Create Grids with Dynamic Columns and Data Types

Create Grids with Dynamic Columns and Data Types

The following example demonstrates how to create a Grid with column and data-field information that is retrieved during runtime.

Example

    <div id="grid" style="width:1000px;"></div>

    <script>
      var isDateField =[];
      $.ajax({
        url: "https://www.mocky.io/v2/5835e736110000020e0c003c",
        dataType: "jsonp",
        success: function(result) {
          generateGrid(result);
        }
      });

      function generateGrid(response) {
        var model = generateModel(response);
        var columns = generateColumns(response);

        var grid = $("#grid").kendoGrid({
          dataSource: {
            transport:{
              read:  function(options){
                options.success(response.data);
              }
            },
            pageSize: 5,
            schema: {
              model: model
            }
          },
          columns: columns,
          pageable: true,
          editable:true
        });
      }

      function generateColumns(response){
        var columnNames = response["columns"];
        return columnNames.map(function(name){
          return { field: name, format: (isDateField[name] ? "{0:D}" : "") };
        })
      }

      function generateModel(response) {

        var sampleDataItem = response["data"][0];

        var model = {};
        var fields = {};
        for (var property in sampleDataItem) {
          if(property.indexOf("ID") !== -1){
            model["id"] = property;
          }
          var propType = typeof sampleDataItem[property];

          if (propType === "number" ) {
            fields[property] = {
              type: "number",
              validation: {
                required: true
              }
            };
            if(model.id === property){
              fields[property].editable = false;
              fields[property].validation.required = false;
            }
          } else if (propType === "boolean") {
            fields[property] = {
              type: "boolean"
            };
          } else if (propType === "string") {
            var parsedDate = kendo.parseDate(sampleDataItem[property]);
            if (parsedDate) {
              fields[property] = {
                type: "date",
                validation: {
                  required: true
                }
              };
              isDateField[property] = true;
            } else {
              fields[property] = {
                validation: {
                  required: true
                }
              };
            }
          } else {
            fields[property] = {
              validation: {
                required: true
              }
            };
          }
        }

        model.fields = fields;

        return model;
      }
    </script>

See Also

• JavaScript API Reference of the Grid
• How to Add Cascading DropDownList Editors
• How to Copy Data from Excel
• How to Drag and Drop Rows between Grids
• How to Enable ForeignKey Column Sorting by Text
• How to Implement Stable Sort in Chrome
• How to Initialize Data Attribute with Detail Template
• How to Load and Append More Records While Scrolling Down
• How to Perform CRUD Operations with Local Storage Data
• How to Persist Expanded Rows after Refresh
• How to Set Cell Color Based on ForeignKey Values
• How to Show Tooltip for Column Records
• How to Update Toolbar Content Using MVVM Binding

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.