Unable to refresh dynamic grid

[Shawn]

Hello,

I am creating a jQuery grid dynamically like below.  A user is able to add new data (columns) via an external dialog and button.  When the button is clicked a new column is added to the dynamic list for the grid's data and then I send the "read" and "refresh" commands for the grid.  However, the grid never displays the grid with the new column.  The new column also doesn't show when physically click on the refresh icon button on the bottom of the grid.

Here's how I create my grid:

function createGrid(gridName, baseUrl) {
    $.ajax({
        type: "POST",
        url: baseUrl,
        dataType: "json",
        success: function (response) {
            var sampleDataItem = response[0];
            var model = generateModel(sampleDataItem);
            var dataSource = generateDataSource(baseUrl, model);
            var columns = generateColumns(sampleDataItem);
            var gridOptions = {
                toolbar: [
                    { template: kendo.template($('#toolbartemplate').html()) }
                ],
                dataSource: dataSource,
                dataBound: grdRRManagement_OnDataBound,
                columns: columns,
                pageable: {
                    pageSizes: [5, 10, 20, 50, "all"],
                    numeric: true,
                    refresh: true
                },
                editable: false,
                selectable: false
            }

            var grid = $("#" + gridName).kendoGrid(gridOptions);
        },
        error: function (error) {
            console.log("Error while creating R&R Management Grid! " + JSON.stringify(error));
        }
    });
}

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

        if (propType === "number") {

            fields[property.replace(/(\n|\r|[^a-zA-Z0-9])/g, '')] = {
                from: "['" + property + "']",
                type: "number",
                validation: {
                    required: false
                }
            };
            if (model.id === property) {
                fields[property].editable = false;
                fields[property].validation.required = false;
            }
        } else if (propType === "boolean") {
            fields[property.replace(/(\n|\r|[^a-zA-Z0-9])/g, '')] = {
                from: "['" + property + "']",
                type: "boolean"
            };
        } else if (propType === "string") {
            var parsedDate = kendo.parseDate(sampleDataItem[property]);
            if (parsedDate) {
                fields[property.replace(/(\n|\r|[^a-zA-Z0-9])/g, '')] = {
                    from: "['" + property + "']",
                    type: "date",
                    validation: {
                        required: false
                    }
                };
                isDateField[property] = true;
            } else {
                fields[property.replace(/(\n|\r|[^a-zA-Z0-9])/g, '')] = {
                    from: "['" + property + "']",
                    validation: {
                        required: false
                    }
                };
            }
        } else {
            fields[property.replace(/(\n|\r|[^a-zA-Z0-9])/g, '')] = {
                from: "['" + property + "']",
                validation: {
                    required: false
                }
            };
        }
    }

    model.fields = fields;
    return model;
}


function generateDataSource(baseURL, model) {
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: baseURL,
                dataType: "json",
                contentType: "appliation/json",
                async: true,
                cache: false
            }
        },

        schema: {
            model: model
        },
        pageSize: 50
    });

    return dataSource;
}

 

var grid = $("#RRManagement").data("kendoGrid"):

//I've tried read() and refresh()
grid.dataSource.read();
grid.refresh();

//I've also tried sync(), but I only get the spinning loading icon that never goes away.
grid.dataSource.sync();

 

I'm not sure what I'm doing wrong.  Any help is appreciated.  Thanks.

Shawn A.

 

[Viktor Tachev]

Hello Shawn,

 

Thank you for the provided description and code snippet.

For changing the Grid configuration you can use the setOptions function. It will accept the options of the widget and thus columns can be added or removed if necessary. The blog post below describes in details how the Grid widget can be created and changed based on the data received from the server.

https://www.telerik.com/blogs/dynamic-data-in-the-kendo-ui-grid

 

The updated createGrid method would look similar to this:

 

function createGrid(gridName, baseUrl) {
    $.ajax({
        type: "POST",
        url: baseUrl,
        dataType: "json",
        success: function (response) {
            var sampleDataItem = response[0];
            var model = generateModel(sampleDataItem);
            var dataSource = generateDataSource(baseUrl, model);
            var columns = generateColumns(sampleDataItem);
            var gridOptions = {
                toolbar: [
                    { template: kendo.template($('#toolbartemplate').html()) }
                ],
                dataSource: dataSource,
                dataBound: grdRRManagement_OnDataBound,
                columns: columns,
                pageable: {
                    pageSizes: [5, 10, 20, 50, "all"],
                    numeric: true,
                    refresh: true
                },
                editable: false,
                selectable: false
            }
 
			var grid = $("#" + gridName)..data("kendoGrid");
  
			if(grid){
				grid.setOptions(gridOptions);
			} else {
				$("#grid").kendoGrid(gridOptions);
			}
            
        },
        error: function (error) {
            console.log("Error while creating R&R Management Grid! " + JSON.stringify(error));
        }
    });
}

 

Give the modification a try and let me know how it works for you.

 

Regards,
Viktor Tachev
Progress Telerik