Kendo Grid not updating with local data

[Andrew]

I'm trying to do CRUD with kendo grid using local data. my kendo grid set is 

 

var configSetupGird = $("#facility-setup").kendoGrid({
    dataSource: {
        schema: {
            model: {
                id: "configId",
                fields: {
                    noofblocks: { type: "string" },
                    noofchairspertable: { type: "string" },
                    noofcolumns: { type: "string" },
                    noofrows: { type: "string" },
                    nooftables: { type: "string" },
                    color: { type: "string" }
                }
            }
        }
    },
    sortable: true,
    toolbar: [{ template: kendo.template($("#addSetupTable").html()) }],
    columns: [
        {
            field: "noofchairspertable",
            title: "Chairs (PerTable)",
        }, {
            field: "noofblocks",
            title: "# Blocks"
        }, {
            field: "noofrows",
            title: "# Rows"
        }, {
            field: "noofcolumns",
            title: "# Columns"
        }, {
            field: "color",
            title: "Color"
        }, {
            command: [
                {
                    name: "delete",
                    text: "Delete",
                    click(evt) {
                        var tr = $(evt.target).closest("tr");
                        var data = this.dataItem(tr);

                    },

                }]
        }
    ]
}).data("kendoGrid");

 

so when i add data 

 

var data = $('#setupTableForm').serializeObject();
data.configId = Math.floor(Math.random() * (100 - 0 + 1)) + 0;
tableSetup.push(data);
configSetupGird.dataSource.data(tableSetup);
configSetupGird.dataSource.read();
configSetupGird.refresh()

 

but this is not updating when i see the datasource objecti can see there already have added data here with i attached the browser console view what was the problem ?

 thanks

 

[Andrew]

i have tried with these code block too ,

 

transport: {
                   read: (operation) => {
                       console.log(operation);
                       if (operation.data.length > 0) operation.success(tableSetup);
                       //operation.success(operation.data);
                   }
               },

[Boyan Dimitrov]

Hello Andrew,

 

Passing an array to the data method of the Kendo UI DataSource should render and rebind the Kendo UI Grid with the passed (new) data. In this case there is no need to call read and refresh method after that. Could you please check for any errors in the console and prepare a runnable sample in a Kendo UI Dojo? 

 

Also please take a look at the CRUD Operations with Local or Custom Transport article that shows an example of implementing CRUD operations with Local data. 

 

Regards,
Boyan Dimitrov
Telerik