Clear all rows from Kendo Grid

13 posts, 0 answers
  1. Alex Rogers
    Alex Rogers avatar
    13 posts
    Member since:
    Jun 2006

    Posted 16 Jan 2012 Link to this post

    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
  2. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 17 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Alex Rogers
    Alex Rogers avatar
    13 posts
    Member since:
    Jun 2006

    Posted 17 Jan 2012 Link to this post

    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
  5. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 18 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Alex Rogers
    Alex Rogers avatar
    13 posts
    Member since:
    Jun 2006

    Posted 23 Jan 2012 Link to this post

    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
  7. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 24 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Alex Rogers
    Alex Rogers avatar
    13 posts
    Member since:
    Jun 2006

    Posted 24 Jan 2012 Link to this post

    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
  9. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 25 Jan 2012 Link to this post

    Hello Alex,

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

    All the best,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Mangesh
    Mangesh avatar
    16 posts
    Member since:
    Sep 2011

    Posted 31 Jan 2012 Link to this post

    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
  11. Alex Rogers
    Alex Rogers avatar
    13 posts
    Member since:
    Jun 2006

    Posted 31 Jan 2012 Link to this post

    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.
  12. Martin
    Martin avatar
    1 posts
    Member since:
    Mar 2012

    Posted 13 Apr 2012 Link to this post

    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
  13. Nathan
    Nathan avatar
    39 posts
    Member since:
    Sep 2011

    Posted 13 Jun 2013 Link to this post

    I just made the URL for the JSON for the page unique, by putting this on the end:  (Razor/c#)
    @("?x="DateTime.Now.Ticks)
  14. Cheng-how
    Cheng-how avatar
    26 posts
    Member since:
    Jun 2013

    Posted 17 Aug 2013 Link to this post


    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.
Back to Top
Kendo UI is VS 2017 Ready