KendoUI MVC网格读取后不刷新

时间:2019-06-21 09:37:41

标签: javascript kendo-ui-grid kendo-ui-mvc

很抱歉,如果以前已经回答了这个问题,但是我找不到响应,并且我是KendoUI的新手。

我有这个MVC网格:

@(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");
        });

    })
    )

我正在使用.ServerOperation(false),因为我只从数据库中检索了几条我希望能够在本地网格中搜索的记录(最大100条)。

我在页面上有一个搜索按钮:

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

按下按钮时,上面的JS会读取搜索字段,调用Controller并返回JSON数据:

enter image description here

我的问题是:一旦从控制器返回数据,如何重新加载网格?我从网格中看到等待的动画->一旦停止,则网格为空。我认为网格会触发某些事件或其他事件?

还是我做错了一切?是否有更好的方法可以做到这一点?


我第一次搜索并接收3个文档,然后搜索8个文档时的屏幕截图,您可以看到我从搜索中获得了8个文档,但仅显示前3个?

enter image description here

2 个答案:

答案 0 :(得分:0)

这有点奇怪,因为老实说我看不到您的代码有什么问题。

调用dataSource.read()方法时,网格应该会自动更新,因此您无需执行任何操作。此外,从您的屏幕截图中可以看出,从服务器返回的数据也具有正确的格式(即DataSourceResult)。设置.ServerOperation(false)也不是问题所在。

一种可能的解释是返回的数据可能与网格的数据结构不匹配;从您的屏幕快照中可以看到,返回的数据确实具有DocumentType,但是根据您的网格要求,它们也具有DocumentTypeLong吗?确保返回的数据与传递给Model的{​​{1}}的类型相同。

答案 1 :(得分:0)

好的,在Telerik的帮助下解决了这个问题->问题是

.ServerOperation(false)

有关
.Grid(Model)

意味着我将模型传递给KendoUI,并告诉它不要从服务器获取任何数据?

基本上我是一次进行本地和远程数据检索->我将对构造函数的调用更改为不包括模型即.Grid(),并且一切正常!