Attribute Grid

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="grdVehicleAttributes"></div> 
<script type="text/x-kendo-template" id="tmpVehicleAttributeEdit">
   <p>Custom editor template</p>
 
  <div class="k-edit-label">
        <label for="VIN">VIN:</label>
    </div>
    <input type="text" class="k-input k-textbox" name="VIN"  data-bind="value:VIN">

    <div class="k-edit-label">
        <label for="AttributeType">Attribute Type:</label>
    </div>
    <input type="text" id="titles" class="k-input" name="AttributeType" data-bind="value:AttributeType">
           
    <div class="k-edit-label">
        <label for="AttributeValue" >Attribute Value:</label>
    </div>
    <input type="text" class="k-input k-textbox" name="AttributeValue" data-bind="value:AttributeValue">

       <div class="k-edit-label">
        <label for="AttributeCode" >Attribute Code:</label>
    </div>
    <input type="text" class="k-input k-textbox" name="AttributeCode" data-bind="value:AttributeCode">

   
</script>

CSS

.k-edit-label
{
    vertical-align:bottom;
}

*+html .k-edit-form-container .k-textbox
{
    display:inline;
}

JavaScript

$(document).ready(function() {
    GetVehicleAttributes();
});
var AttType = '';
var ddlDistTypeVA = '';

function GetVehicleAttributes() {

    var JsonAttributes = [{
        "AttributeCode": "",
        "AttributeType": "Make",
        "AttributeValue": "SEAT",
        "ID": 3378592,
        "VIN": "VSSZZZ6JZDR051504"},
    {
        "AttributeCode": "",
        "AttributeType": "Model",
        "AttributeValue": "IBIZA          ",
        "ID": 3378593,
        "VIN": "VSSZZZ6JZDR051504"},
    {
        "AttributeCode": "",
        "AttributeType": "Derivative",
        "AttributeValue": "Ibiza 5dr (2012) SE 1.6 TDI CR 105 PS 5-speed manu",
        "ID": 3378594,
        "VIN": "VSSZZZ6JZDR051504"},
    {
        "AttributeCode": "",
        "AttributeType": "Colour",
        "AttributeValue": "Ice Silver",
        "ID": 3378595,
        "VIN": "VSSZZZ6JZDR051504"},
    {
        "AttributeCode": "",
        "AttributeType": "Colour Code",
        "AttributeValue": "P5P5",
        "ID": 3378596,
        "VIN": "VSSZZZ6JZDR051504"},
    {
        "AttributeCode": "",
        "AttributeType": "Trim Code",
        "AttributeValue": "BT",
        "ID": 3378597,
        "VIN": "VSSZZZ6JZDR051504"},
    {
        "AttributeCode": "",
        "AttributeType": "Trim Description",
        "AttributeValue": "Aloe",
        "ID": 3378598,
        "VIN": "VSSZZZ6JZDR051504"},
    {
        "AttributeCode": "",
        "AttributeType": "Engine Size(CC)",
        "AttributeValue": "1598",
        "ID": 3378599,
        "VIN": "VSSZZZ6JZDR051504"},
    {
        "AttributeCode": "",
        "AttributeType": "Fuel Type",
        "AttributeValue": "DIESEL",
        "ID": 3378600,
        "VIN": "VSSZZZ6JZDR051504"},
    {
        "AttributeCode": "",
        "AttributeType": "BHP",
        "AttributeValue": "105",
        "ID": 3378601,
        "VIN": "VSSZZZ6JZDR051504"},
    {
        "AttributeCode": "",
        "AttributeType": "GEARS",
        "AttributeValue": "5",
    ...