Reloading refreshing Kendo Grid

Question

How to reload or refresh a Kendo Grid using Javascript   It is often required to reload or refresh a grid after sometime or after a user action

User · Answer

I want to go back to page 1 when I refresh the grid   Just calling the read   function will keep you on the current page  even if the new results don t have that many pages   Calling  page 1  on the datasource will refresh the datasource AND return to page 1 but fails on grids that aren t pageable   This function handles both   function refreshGrid selector         var grid     selector        if  grid length     0           return        grid   grid data  kendoGrid         if  grid getOptions   pageable             grid dataSource page 1               else            grid dataSource read

User · Answer

I used Jquery  ajax to get data  In order to reload the data into current grid  I need to do the following    success  function  result           grid   data  kendoGrid   dataSource data result data

User · Answer

By using following code it automatically called grid s read method and again fill grid      GridName   data  kendoGrid   dataSource read

User · Answer

The easiest way out to refresh is using the refresh   function   Which goes like       gridName   data  kendoGrid   refresh      while you can also refresh the data source using this command       gridName   data  kendoGrid   dataSource read      The latter actually reloads the data source of the grid  The use of both can be done according to your need and requirement

User · Answer

GridName   data  kendoGrid   dataSource read        GridName   data  kendoGrid   refresh

User · Answer

In a recent project  I had to update the Kendo UI Grid based on some calls  that were happening on some dropdown selects  Here is what I ended up using     ajax           url    api                data    myIDSArray  javascriptArrayOfIDs            traditional  true          success  function result                searchResults   result                   done function             var dataSource   new kendo data DataSource   data  searchResults             var grid       myKendoGrid   data  kendoGrid            dataSource read            grid setDataSource dataSource             Hopefully this will save you some time

User · Answer

If you are desiring the grid to be automatically refreshed on a timed basis  you can use the following example which has the interval set at 30 seconds       lt script type  text javascript  language  javascript  gt          document  ready function               setInterval function                  var grid       GridName   data  kendoGrid                grid dataSource read                30000                 lt  script gt

User · Answer

Actually  they are different        GridName   data  kendoGrid   dataSource read   refreshes the uid attributes of the table row     GridName   data  kendoGrid   refresh   leaves the same uid

User · Answer

In order to do a complete refresh  where the grid will be re-rendered alongwith new read request  you can do the following    Grid setOptions         property  true false           Where property can be any property e g  sortable

User · Answer

What you have to do is just add an event   Events events    events Sync  KendoGridRefresh    in your kendoGrid binding code No need to write the refresh code in ajax result     Html Kendo   Grid lt Models DocumentDetail gt    Name  document        DataSource dataSource   gt  dataSource      Ajax        PageSize 20       Model model   gt  model Id m   gt  m Id                Events events   gt  events Sync  KendoGridRefresh                     Columns columns   gt                    columns Bound c   gt  c Id  Hidden                            columns Bound c   gt  c UserName  Title  Resources Resource lblAddedBy                                       Events e   gt  e DataBound  onRowBound               ToolBar toolbar   gt  toolbar Create   Text  Resources Resource lblNewDocument              Sortable                        HtmlAttributes new   style    height 260px                     And you can add the following Global function in any of your  js file  so  you can call it for all the kendo grids in your project to refresh the kendoGrid   function KendoGridRefresh         var grid       document   data  kendoGrid        grid dataSource read

User · Answer

An alternative way to reload the grid is      GridName   getKendoGrid   dataSource read

User · Answer

You can always use     GridName   data  kendoGrid   dataSource read     You don t really need to  refresh    after that   dataSource read    will do the trick   Now if you want to refresh your grid in a more angular way  you can do    lt div kendo-grid  vm grid  id  grid  options  vm gridOptions  gt  lt  div gt   vm grid dataSource read       OR  vm gridOptions dataSource read      And don t forget to declare your datasource as kendo data DataSource type

User · Answer

theidofthegrid   data  kendoGrid   dataSource data

User · Answer

In my case I had a custom url to go to each time  though the schema of the result would remain the same  I used the following     var searchResults   null    ajax           url  http   myhost context resource          dataType   json           success  function  result  textStatus  jqXHR                  massage results and store in searchResults             searchResults   massageData result                    done function               Kendo grid stuff         var dataSource   new kendo data DataSource   data  searchResults             var grid       doc-list-grid   data  kendoGrid            dataSource read            grid setDataSource dataSource

User · Answer

You can also refresh your grid with sending new parameters to Read action and setting pages to what you like    var ds       gridName   data  kendoGrid   dataSource  ds options page   1  var parameters         id  1     name   test    ds read parameters     In this example read action of the grid is being called by 2 parameters value and after getting result the paging of the grid is in page 1

User · Answer

If you do not want to have a reference to the grid in the handler  you can use this code        k-pager-refresh   trigger  click      This will refresh the grid  if there is a refresh button  The button can be enabled like so     MVC GRID DECLARATION  Pageable p  gt  p Refresh true

User · Answer

I never do refresh      GridName   data  kendoGrid   dataSource read     alone works for me all the time

User · Answer

You can use       GridName   data  kendoGrid   dataSource read     lt  --  first reload data source -- gt       GridName   data  kendoGrid   refresh     lt  --  refresh current UI -- gt

User · Answer

You may try           GridName   data  kendoGrid   dataSource read        GridName   data  kendoGrid   refresh

User · Answer

The default updated configuration data of the widgets is set to automatically bind to an associated DataSource       GridId   data  kendoGrid   dataSource read        GridId   data  kendoGrid   refresh

User · Answer

You can use the below lines       GridName   data  kendoGrid   dataSource read        GridName   data  kendoGrid   refresh      For a auto refresh feature have a look here

User · Answer

Not a single one of these answers gets the fact that read returns a promise  which means you can wait for the data to load before calling refresh       GridId   data  kendoGrid   dataSource read   then function             GridId   data  kendoGrid   refresh          This is unnecessary if your data grab is instant synchronous  but more than likely it s coming from an endpoint that won t return immediately

User · Answer

grd   data  kendoGrid   dataSource read

User · Answer

Just write below code      k-i-refresh   click

[kendo-ui] Reloading/refreshing Kendo Grid

Examples related to kendo-ui

Examples related to kendo-grid