MVC Grid not updating

[n/a]

Hi,

I am new to using KendoUI and am sorry if this has been answered before but I cannot seem to find an answer that works for me. I have a search button and a grid on the page. I am taking to d.3 in the backend (a DMS system) using library calls. The user enters s/he search query in the field and I call the Read method in my Controller to get the data from d.3. What is happening is that I am getting the data back in the request but the grid is not updating.

Here is my MVC code:

@(Html.Kendo()
    .Grid(Model)
    .Name("grid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Read(r => r.Action("Read", "Search"))
    )
    .Filterable(f => f.Mode(GridFilterMode.Row))
    .Columns(columns =>
    {
    {
        columns.Bound(c => c.DocumentType)
            .Filterable(false)
            .Width("150px")
            .Title(@Localizer["SearchTableHeaderDocumentType"]);

        columns.Bound(c => c.DocumentTypeLong)
            .Filterable(true)
            .Title(@Localizer["SearchTableHeaderDocumentTitle"])
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));

    })
    )

I have a button on the page that does the submit using the following code:

   var search = $("#search-field").val();
    if (!search) return;
    if (search.trim() === "") return;
    var dataSource = $("#grid").data("kendoGrid").dataSource;
    var parameters = {
        searchFor: search
    }

    // call the search passing the parameters -> searchFor is the parameter name on the SearchController/Read method
    dataSource.read(parameters);

 

This calls my Read method in the SearchController.cs. The Search method creates the data that is supposed to be passed back to the Grid: 

 

            // setup your result for KendoUI
            DataSourceResult result = model.Entries.ToDataSourceResult(request);

            // return
            return Json(result);

I also see the data structure in the response if I check the event after the RequestEnd:

            .Events(events => events.RequestEnd("onRequestEnd"))

or if I check the response in Chrome - this is what I get:

+0Object {DocumentId: "GD00000016", DocumentType: "D3CHG", DocumentTypeLong: "D.3 :: Fehler/Request", …}Object
+1Object {DocumentId: "GD00000148", DocumentType: "DEPSU", DocumentTypeLong: "Abteilung :: Leitung", …}Object
+2Object {DocumentId: "GD00000149", DocumentType: "DEPSU", DocumentTypeLong: "Abteilung :: Leitung", …}Object
+3Object {DocumentId: "GD00000150", DocumentType: "DEPSU", DocumentTypeLong: "Abteilung :: Leitung", …}Object
+4Object {DocumentId: "GD00000266", DocumentType: "IDOCU", DocumentTypeLong: "Infrastruktur :: Handbuch", …}Object
+5Object {DocumentId: "GD00000267", DocumentType: "IDOCU", DocumentTypeLong: "Infrastruktur :: Handbuch", …}Object
+6Object {DocumentId: "GD00000268", DocumentType: "IDOCU", DocumentTypeLong: "Infrastruktur :: Handbuch", …}Object
+7Object {DocumentId: "GD00000269", DocumentType: "CKNOW", DocumentTypeLong: "Global :: Wissen", …}Object
+8Object {DocumentId: "GD00000277", DocumentType: "IDOCU", DocumentTypeLong: "Infrastruktur :: Handbuch", …}Object

 

very odd. 

 

Maybe this helps: If I return dummy data from the Index method (I am currently returning an empty list  => return View(new List<SearchEntryModel>());) before using the Read method from the grid everything magically works (except that the number of entries is limited to the return from the Index method). 

 

Sorry about the weird explanation but I don't know how to better explain it. 

 

Thank you in advance

Martin

 

 

[n/a]

Hi, anybody have any ideas?

[Alex Hajigeorgieva]

Hello, Martin,

Thank you for the provided snippets.

The current binding is the cause for the grid not to refresh - it is what we refer to as local binding:

https://demos.telerik.com/aspnet-mvc/grid/local-data-binding

This means that the data is requested together with the view and it is assigned to an internal array. Since server operations are off, calling the read method will not issue a request to the server at all.

What I suggest you do instead is to use an Ajax bound grid and pass additional data as part of the read method:

.Read(r => r.Action("Read", "Search").Data("searchParameters"))

<script>
 function searchParameters(){
   return {
     searchFor: $("#search-field").val().trim()
   }
 }
</script>

If you would like to filter all columns with a single input, this functionality is currently being implemented. Meanwhile, you can use the approach as mentioned in this forum thread:

https://www.telerik.com/forums/grid-search-in-asp-net-mvc

Let em know in case you need further information or assistance.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[n/a]

Hi Alex. 

Thank you for your response ->

I thought I had an Ajax bound grid: 

    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Read(r => r.Action("Read", "Search"))
    )

 

In the .DataSource I have a .Ajax? Or am I missing something? I do get the data back from my Read method, the problem is that the grid is not "expanding" but only showing the max amount of records I received with the first call. Funny. What I mean by that is if my Index method gets called initially and I do a search and receive eg. 3 records. I can then do the Read method and now matter how many records I get from the method it will only show the first 3 records - see attachment.

 

I will try to pass the additional data with the read method as you have in your example and try the approach you gave me. 

Thank you again

[Alex Hajigeorgieva]

Hi, Martin,

The approach that you have shared is a mix(between local data and remote data) and is not recommended. 

The main culprit here is the model that is passed from the view and received as a parameter in the constructor of the grid. If you check the local binding demo, you will see that the data source does not have a read method, it only has a data source definition as it cannot be left empty:

.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .ServerOperation(false)
 )

Upon inspection of the generated serialization (in the script tag right after the HTML element of the grid, you can see that the data is directly appended to the data array). Copy and beautify the text from the serialization and inspect it in a readable format:





This is not the case with the Ajax() binding - the grid does not have any data in its datasource data array. The issue with the local data is the array will be used or all operations - paging, sorting, filtering, grouping.

I suggest you remove the model from the grid constructor and utilize Ajax binding:

@(Html.Kendo().Grid<Modles.MyModel>()
    .Name("grid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false) // remove if you need to send an external filter parameter to the server
        .Read(r => r.Action("Read", "Search"))
    )

Finally, the grid data source is not expected to send read requests in the type of hybrid binding that you shared with us. Would it be possible for you to send a project so we can inspect it?

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[n/a]

Hi Alex. 

I'll give your suggestions a try and report back here - thank you for the pointers!

Cheers

[n/a]

Hi Alex,

thank you for your pointers -> they have fixed my problem. I was setting .ServerOperation(false) as I didn't like the idea of going back to the server each time I wanted to search within the values I had already searched for. As soon as I stopped worrying about it (and I removed the model from the grid constructor) everything just fell into place :)

 

Cheers for your help