KendoUI MVC Grid does not refresh after read

Question

I am sorry if this has been answered before but I cannot find a response and I am new to KendoUI.

I have this MVC grid:

@(Html.Kendo()
    .Grid(Model)
    .Name("grid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Read(r => r.Action("Read", "Search"))
    )
    .Resizable(resize => resize.Columns(true))
    .Selectable(selectable =>
    {
        selectable.Enabled(true);
        selectable.Mode(GridSelectionMode.Single);
    })
    .HtmlAttributes(new { style = "height: 99%;" })
    .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)));

        columns.Command(command =>
        {
            command.Custom(@Localizer["SearchTableOpenInD3Button"]).Click("open");
            command.Custom(@Localizer["SearchTableReadButton"]).Click("read");
            command.Custom(@Localizer["SearchTableEditButton"]).Click("edit");
        });

    })
    )

I am using .ServerOperation(false) as I am only getting a couple of records back from the database (max 100) that I want to be able to search for in the grid locally.

I have a search button on the page:

    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);

When the button is pressed the JS above reads the search-field, calls the Controller and returns JSON data:

my question is: how do I get the grid to reload once the data has been returned from my controller? I see the waiting animation from the grid -> once it stops the grid is empty. I assume the grid triggers some event or other?

Or am I doing everything incorrectly? Is there a better way to do this maybe?

---

screenshot when I first search for and receive 3 docs, then search for 8, as you can see I get 8 docs back from the search but only display the first 3?

Answer 1

ok, fixed this with help from Telerik -> the problem was

.ServerOperation(false)

in connection with

.Grid(Model)

means that I passed the Model to the KendoUI and told it to not get any data from the server

Basically I was doing local and remote data retrieval in one -> I changed the call to the constructor to not include the model i.e. .Grid() and everything worked perfectly !

Answer 2

This is kind of weird as I honestly don't see anything wrong with your code.

When you call dataSource.read() method, the grid is supposed to update automatically and you shouldn't need to do anything. Besides, from your screenshot, it appears that the data returned from the server is also of the correct format (i.e. a DataSourceResult). Setting .ServerOperation(false) is also not the problem here.

One possible explanation is that the returned data may not match the data structure of your grid; I can see from your screenshot that the returned data do have DocumentType, but do they also have DocumentTypeLong as required from your grid? Make sure the returned data is of the same type as the Model passed to Html.Kendo().Grid().