Create Grids with Dynamic Columns and Data Types

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	Windows 10 64bit
Preferred Language	JavaScript

Description

In some cases, the server returns a response with different fields and values depending on user input or another external variable. Thus, the developer doesn't know what columns and fields will be available in the Grid, nor what the type of these fields will be.

This article showcases how to dynamically generate the Kendo UI Grid by using the response data and without knowing the names and types of the columns and fields.

Solution

1. Prefetch the dynamic Grid data by making an ajax request to the server.
2. Create the dataSource.model by using the first record in the response as a sample.
3. Create the Grid columns by using the names of the fields returned in the server response.
4. Generate the Grid by using the model and columns that were created in the previous two steps.

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

    <script>
      var isDateField =[];
      $.ajax({
        url: "https://run.mocky.io/v3/073ca8a1-6fe6-44f5-a33d-182a7788d3a4",
        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

• Dynamic Aggregates in a Dynamic Grid
• JavaScript API Reference of the Data Grid