This is a migrated thread and some comments may be shown as answers.

Unable to refresh dynamic grid

1 Answer 123 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shawn
Top achievements
Rank 1
Shawn asked on 05 Dec 2019, 07:47 PM

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.

 

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 09 Dec 2019, 11:39 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Shawn
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or