Kendo Dynamic Grid According to JSON Data

阅读更多

Referenc:

http://www.telerik.com/forums/binding-kendoui-grid-to-dynamic-column-and-values-kendo-ui-complete-resources-buy-try

 

1.html page

 

 

 

 

2.Js file

 

var data = [{

  "Name": "daya",

  "Role": "Developer",

  "Dept": "Dev",

  "Dept1": "Dev",

  "Date": "\/Date(836438400000)\/",

  "Balance": 23

}, {

  "Name": "siva",

  "Role": "Developer",

  "Dept": "Dev",

  "Dept1": "Dev",

  "Date": "\/Date(836438400000)\/",

  "Balance": 23

}, {

  "Name": "sivadaya",

  "Role": "Developer",

  "Dept": "Dev",

  "Dept1": "Dev",

  "Date": "\/Date(836438400000)\/",

  "Balance": 23

}, {

  "Name": "dayasiva",

  "Role": "Developer",

  "Dept": "Dev",

  "Dept1": "Dev",

  "Date": "\/Date(836438400000)\/",

  "Balance": 23

}];

 

//in the success handler of the ajax method call the function below with the received data:

var dateFields = [];

generateGrid(data)

 

function generateGrid(gridData) {

 

  var model = generateModel(gridData[0]);

 

  var parseFunction;

  if (dateFields.length > 0) {

    parseFunction = function (response) {

      for (var i = 0; i < response.length; i++) {

        for (var fieldIndex = 0; fieldIndex < dateFields.length; fieldIndex++) {

          var record = response[i];

          record[dateFields[fieldIndex]] = kendo.parseDate(record[dateFields[fieldIndex]]);

        }

      }

      return response;

    };

  }

 

  var grid = $("#grid").kendoGrid({

    dataSource: {

      data: gridData,

      schema: {

        model: model,

        parse: parseFunction

      }

    },

    editable: true,

    sortable: true

  });

}

 

function generateModel(gridData) {

  var model = {};

  model.id = "ID";

  var fields = {};

  for (var property in gridData) {

    var propType = typeof gridData[property];

 

    if (propType == "number") {

      fields[property] = {

        type: "number",

        validation: {

          required: true

        }

      };

    } else if (propType == "boolean") {

      fields[property] = {

        type: "boolean",

        validation: {

          required: true

        }

      };

    } else if (propType == "string") {

      var parsedDate = kendo.parseDate(gridData[property]);

      if (parsedDate) {

        fields[property] = {

          type: "date",

          validation: {

            required: true

          }

        };

        dateFields.push(property);

      } else {

        fields[property] = {

          validation: {

            required: true

          }

        };

      }

    } else {

      fields[property] = {

        validation: {

          required: true

        }

      };

    }

 

  }

  model.fields = fields;

 

  return model;

}