Attribute Grid

by tomwilliams

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
     <div id="grid"></div>

            <script type="text/x-kendo-template" id="tmpAddressSearchEvents">
                <div class="tabstrip">
                    <ul>
                        <li class="k-state-active">
                            Contact Information
                        </li>
                        <li>
                           Bookings
                        </li>
                       
                    </ul>
                    <div>
                        <div class='employee-details'>
                            <ul>
                                <li><label>Address1:</label>#= Address1 #</li>
                                <li><label>Town:</label>#= JobTitle #</li>
                                <li><label>Postcode:</label>#= Postcode #</li>
                                <li><label>Phone:</label>#= Tel01 #</li>
                            </ul>
                        </div>
                    </div>
                    <div>
                        <div class="AddressSearchEvents"></div>
                    </div>
                </div>

            </script>

CSS

<style scoped="scoped">
                .employee-details ul
                {
                    list-style:none;
                    font-style:italic;
                    margin-bottom: 20px;
                }

                .employee-details label
                {
                    display:inline-block;
                    width:90px;
                    font-style:normal;
                    font-weight:bold;
                }
            </style>

JavaScript

$(document).ready(function() {
    LoadGrid();
});

 function LoadGrid() {
     var GridData= [{"Address1":"Cherry & Lemons","Address2":"Banana","Address3":"","Address4":"","AddressType":"ORGANISATION","Agreement":null,"ColParagonJobNo":null,"Colour":null,"ContactName":"Mr Oranegs Apples","CurrentEvent":null,"CurrentStatus":null,"DateOfRegistration":null,"Defleet":"\/Date(-62135596800000+0000)\/","DelParagonJobNo":null,"Derivative":null,"DisplayAddress":null,"Email":"","EventNo":null,"FirstName":"Oranegs","ID":0,"JobNo":null,"JobTitle":"","Location":null,"LocationID":"043816","LocationName":"Apples, Mr Oranegs (Moon View)","Make":null,"Match":null,"Mileage":null,"Model":null,"OnNetDemo":false,"Postcode":"CA12 9PP","REG":null,"Salutation":"Mr","ScheduledEnd":null,"ScheduledStart":null,"SearchDescription":null,"Site":null,"SubCustomer":null,"Surname":"Apples","Tel01":"01989 Tel No #5","Tel02":"","VID":null,"VIN":null},{"Address1":"Cherry & Lemons","Address2":"Banana","Address3":"","Address4":"","AddressType":"ORGANISATION","Agreement":null,"ColParagonJobNo":null,"Colour":null,"ContactName":"Mr Oranegs Apples","CurrentEvent":null,"CurrentStatus":null,"DateOfRegistration":null,"Defleet":"\/Date(-62135596800000+0000)\/","DelParagonJobNo":null,"Derivative":null,"DisplayAddress":null,"Email":"","EventNo":null,"FirstName":"Oranegs","ID":0,"JobNo":null,"JobTitle":"","Location":null,"LocationID":"044613","LocationName":"Apples Mr Oranegs","Make":null,"Match":null,"Mileage":null,"Model":null,"OnNetDemo":false,"Postcode":"CA12 9PP","REG":null,"Salutation":"Mr","ScheduledEnd":null,"ScheduledStart":null,"SearchDescription":null,"Site":null,"SubCustomer":null,"Surname":"Apples","Tel01":"01527 123489","Tel02":"","VID":null,"VIN":null},{"Address1":"Cherry & Lemons","Address2":"Banana","Address3":"","Address4":"","AddressType":"ORGANISATION","Agreement":null,"ColParagonJobNo":null,"Colour":null,"ContactName":"Mr Oranegs...