Agregates

How Would I do this?

by siliconsoul

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 = [{
        "Make": "AUDI",
        "Model": "A6",
        "Derivative": "GTI"},
    {
        "Make": "AUDI",
        "Model": "A5",
        "Derivative": "L"},
    {
        "Make": "AUDI",
        "Model": "A6",
        "Derivative": "XL"},
    {
                "Make": "AUDI",
        "Model": "A4",
        "Derivative": "L"},
    {
        "Make": "VOLKSWAGEN",
        "Model": "Golf",
        "Derivative": "TDI"},
    {
        "Make": "VOLKSWAGEN",
        "Model": "Golf",
        "Derivative": "XL"},
 {
        "Make": "AUDI",
        "Model": "A5",
        "Derivative": "L"},
    {
        "Make": "AUDI",
        "Model": "A6",
        "Derivative": "XL"},
    {
                "Make": "AUDI",
        "Model": "A4",
        "Derivative": "L"},
    {
        "Make": "VOLKSWAGEN",
        "Model": "Golf",
        "Derivative": "TDI"},
    {
        "Make": "VOLKSWAGEN",
        "Model": "Golf",
        "Derivative": "XL"},
      {
        "Make": "AUDI",
        "Model": "A5",
        "Derivative": "L"},
    {
        "Make": "AUDI",
        "Model": "A6",
        "Derivative": "XL"},
    {
                "Make": "AUDI",
        "Model": "A4",
        "Derivative": "L"},
    {
        "Make": "VOLKSWAGEN",
        "Model": "Golf",
        "Derivative": "TDI"},
    {
        "Make": "VOLKSWAGEN",
        "Model": "Golf",
        "Derivative": "XL"},                    
       {
        "Make": "AUDI",
        "Model": "A5",
        "Derivative": "L"},
    {
        "Make": "AUDI",
        "Model": "A6",
        "Derivative": "XL"},
    {
                "Make": "AUDI",
        "Model": "A4",
        "Derivative": "L"},
    {
        "Make": "VOLKSWAGEN",
        "Model": "Golf",
        "Derivative": "TDI"},
    {
        "Make": "VOLKSWAGEN",
        "Model": "Golf",
        "Derivative":...