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 !