Clear all rows from Kendo Grid

[Alex Rogers]

I have an app that has two grids on the page.  Clicking a row on the first grid populates the data in the second.  I am having an issue where the data is just getting pasted underneath the old data.  How do I clear out the second grid to put clean new data in it again?

Alex

[Rosen]

Hello Alex,

Although it is not clear the exact scenario nor the implementation, I suspect that the described issue is caused by instantiating multiple grid instances over single html element. Please make sure that this is not the case. Also you may take a look at this jsfiddle which demonstrates a possible implementation of such scenario.

Regards,
Rosen
the Telerik team

[Alex Rogers]

Well that does help but is not exactly what I was looking for.   I am dealing with JSON data.  Is there a way to clear the previous rows out of a grid and then provide it with a new restful URL to pull fresh data?  The data would be in the same format.

Alex

[Rosen]

Hi,

I'm afraid that clearing the rows in the grid is not supported. However, the grid content will be updated, if the DataSource is repopulated.
Changing the URL is also not supported also, but you may change the query parameters instead through the transport's read options as shown in this online demo.

Greetings,
Rosen
the Telerik team

[Alex Rogers]

I have read through the blog post at http://www.kendoui.com/blogs/archive/11-10-18/datasource_syncing_and_models_in_beta_2.aspx.

I am able to access the datasource for the grid and change the data within it but the grid still does not seem to reflect the changes.

Here is some relevant code that is being called.

var ds = kendo.data.DataSource;
ds = $("#casegrid").data("kendoGrid").dataSource;
var model = ds.get(caseno);

model.set("Available", "checked");

It would appear to me that the data is being modified in the datasource but the grid never seems to acknowledge this.  Is there not a way to force the grid to rebind with the changed datasource?

Alex

[Rosen]

Hi Alex,

I'm afraid that I'm not sure what may cause such behavior on your end. Therefore, it will be appreciated if you could provide a small sample which demonstrates your scenario and the issue you are facing. 
 
All the best,
Rosen
the Telerik team

[Alex Rogers]

I am unable to build a simple application to duplicate this scenario since it involves multiple calls to a database.  I tried with an example that is in one of your demos and it calls back into the database automatically and overwrites the changes that I just made to the datasource.  (That would actually be fine if It would work that way for me).  A little more info: I am running this in an asp .net web application.  I have a wcf webservice returning json data that I can supply with parameters when the dataSource is set up.  The dataSource will make one successfull call to the database for each "row" of data, but it will not call back into the database a second time.  I have everything working like I want except when the data in the database changes (based on an ajax call from my client app) I want to do one of two things:

1. Change the data in the datasource via client javascript to match the database and have the grid reflect this.
2. Have the datasource call back to the database to refresh the data it has.

Here is how I have set up the DataSource:

 var dataSource = new kendo.data.DataSource({
                type: "json",
                transport: {
                    read: {
                        url: baseurl,
                        dataType: "json",
                        data: {
                            UserID: function () { return sessionStorage.getItem("checkuser"); },
                            LocationCd: function () { return sessionStorage.getItem("locationcd"); }
                        } //data
                    }//read
                }, //transport
                schema: { data: "d",
                    model: Cases
                } //schema
 
            });  //datasource

This is what I want:

  var ds = kendo.data.DataSource;
  ds = $("#casegrid").data("kendoGrid").dataSource;
ds.Refresh();  //with new parameters which I supply using the "data" function in the datasource creation
$("#casegrid").data("kendoGrid").Rebind();  //either automatically once the data has refreshed or if I have to call it, either way

Does this functionality not exist?

Alex

[Rosen]

Hello Alex,

In order to force re-population of the DataSource, you should call its read method.

All the best,
Rosen
the Telerik team

[Mangesh]

Hi,

I'm having the same issue of grid not reflects the new data even after datasource.read()

can you please show simple working example according to this demo : http://demos.kendoui.com/web/datasource/remote-data.html

in which instead of template all the data should be shown in grid.

Regards,
Mangesh

[Alex Rogers]

I solved this by declaring my datasource as below:

var dataSource = new kendo.data.DataSource({
                type: "json",
                transport: {
                    read: {
                        cache: false,

                         url: baseurl,
                        dataType: "json",
                        data: {
                            UserID: function () { return sessionStorage.getItem("checkuser"); },
                            LocationCd: function () { return sessionStorage.getItem("locationcd"); }
                        } //data
                    }//read
                }, //transport
                schema: { data: "d",
                    model: Cases
                } //schema
            });  //datasource 

Notice the cache: false  statement.

[Martin]

Hi Alex,

I had the same problem as you and i managed to clear grid rows like this:

$("#secondGrid").empty();
$("#secondGrid").kendoGrid();

Using jQuery .empty() function i first removed all child nodes from the grid div, and then let kendo grid do its magic again.

Regards,
Martin

[Nathan]

I just made the URL for the JSON for the page unique, by putting this on the end:  (Razor/c#)
@("?x="DateTime.Now.Ticks)

[CH]

I tried to use cache:false but it doesn't work, and at last i use 

grid.dataSource.data([]);  //set the datasource data to empty
grid.dataSource.read();   //read data again.

and it works.