Generate DataSource Model from Retrieved Data

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

How can I generate the DataSource Model based on the dynamic data I have in the Grid so that it includes validation and uses the correct data types?

Solution

1. Iterate through the data and try to parse each field to determine what type it is.
2. Based on that, define the respective model properties.
3. If necessary, you can also include validation properties.

If you omit the columns setting of the Grid, a column is generated for each field in the model.

<div id="grid"></div>

<script>
    //example data received from remote source via jQuery ajax merthod
    var data = [{
        "Name": "John",
        "Role": "Developer",
        "Dept": "Dev",
        "Date": "\/Date(836438400000)\/",
        "Balance": 23
    }, {
        "Name": "Jane",
        "Role": "Developer",
        "Dept": "Dev",
        "Date": "\/Date(836438400000)\/",
        "Balance": 23
    }, {
        "Name": "James",
        "Role": "QA",
        "Dept": "Dev",
        "Date": "\/Date(836438400000)\/",
        "Balance": 23
    }, {
        "Name": "Jimmy",
        "Role": "Designer",
        "Dept": "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;
    }
</script>