Kendo Grid not refreshing

Posted by mflanegan on 02-Feb-2016 08:09

Hi There, 

I have a kendo grid that I populate using a search box which sends my filter to the appserver and returns a dataset.

I am able to populate my grid with rows the first time but when I try search again the grid is not being populated. I can see that the dataset has been returned from the appserver but the grid is not changing.

This is the code I am using to populate the grid:

function createGrid(modelFilter) {

$('#grid').kendoGrid({
dataSource: {
serverFiltering: true,
filter: {
value: modelFilter
},
type: "jsdo",
transport: {
jsdo: "beAdvSrc1",
},
error: function(e) {
var obj = JSON.parse(e.xhr.response);
alert(obj._retVal);
}
},
height: 800,
groupable: true,
sortable: true,
reorderable: true,
resizable: true,
selectable: true,
pageable: {
refresh: true,
pageSizes: true,
pageSize: 20,
buttonCount: 10
},
columns: [{
field: 'model',
title: 'Model',
width: 100
}]
});

}

Does anyone know what I could be missing that is causing the grid not to refresh?

Thanks in advance.

Posted by egarcia on 02-Feb-2016 08:52

Are you re-creating the grid in the createGrid() method? You should not need to.

You would use the same grid that you have and from within the readCatalogue(), you would call the filter() method on the DataSource.

If you re-create the grid, then it would use the filter that is defined when it is configured.

All Replies

Posted by egarcia on 02-Feb-2016 08:24

Hello Meyrick,

How are you implementing the search box? What methods are you calling?

You should be able to something like the following:

           var grid = $("#grid").data("kendoGrid");

           grid.dataSource.filter(filter);

The filter() would then use the JSDO internally to access the AppServer.

I hope this helps.

Posted by mflanegan on 02-Feb-2016 08:46

Hi Edsel,

This is the HTML for my search control:

   <ul class="form-content" data-role="listview" data-style="inset">

       <li>

           <label>Search

               <input onkeydown="if (event.keyCode == 13) { readCatalogue(this.value);}" placeholder="Search" type="search">

           </label>

       </li>

   </ul>

On enter of the search control it calls the function below, which then populates the grid.

function readCatalogue(model)

{

      var modelFilter = model;

      createGrid(modelFilter);

}        

I have added the code you supplied and again I can see the dataset returned to the client but the grid is still not refreshing and displaying the new data.

Posted by egarcia on 02-Feb-2016 08:52

Are you re-creating the grid in the createGrid() method? You should not need to.

You would use the same grid that you have and from within the readCatalogue(), you would call the filter() method on the DataSource.

If you re-create the grid, then it would use the filter that is defined when it is configured.

Posted by mflanegan on 03-Feb-2016 08:39

Thank you Edsel!

This thread is closed