Telerik/ Kendo MVC Grid，按需加载网格，而不是页面加载

Posted 2023-05-07

【中文标题】Telerik/ Kendo MVC Grid，按需加载网格，而不是页面加载

【英文标题】：Telerik/ Kendo MVC Grid, Load grid on demand, not on page load

【发布时间】：2017-12-09 03:47:46

【问题描述】：

我找到了几个关于如何做到这一点的例子，但没有一个对我有用。

这是我的 Telerik MVC 网格：

@(html.Kendo().Grid<PlayerStatsViewModel>()
    .Name("PlayerStats")
    .Columns(columns =>
    
        columns.Bound(o => o.PlayerId);
        columns.Bound(o => o.FirstName);
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.PlayerId))
    .Read(read => read.Action("PlayerStats_Read_Bound", "Contest").Data("getPlayerId"))      
    ).AutoBind(false)
    )

用我的网格打开模式

我设置了 autobind(false) 以防止页面加载。用户单击链接后，我使用我的网格打开一个模式，并且需要传入一个参数。

// open modal
$(document).on("click", "#openStatsModal", function () 
    playerId = $(this).data('id'); // get parameter from click
    loadPlayerStats();
);

function getPlayerId() 
    return 
        playerId: playerId
    

进行 ajax 调用？ 我的点击方法有效，我得到了我的玩家 ID。然后我尝试进行网格调用。

function loadPlayerStats() 
    var grid = $("#PlayerStats").data("playerStats");
    alert(grid); // returns undefined
    //grid.ajaxRequest(); this didnt work either
    grid.dataSource.read(); // Cannot read property 'dataSource' of undefined

操作方法 除非我关闭自动绑定，否则永远不会被调用

public ActionResult PlayerStats_Read_Bound([DataSourceRequest]DataSourceRequest request, int playerId)
        
            // some code
            return Json(result)
        

【问题讨论】：

您在网格上错误地使用了选择器，var grid = $("#PlayerStats").data("playerStats"); 应该是 var grid = $("#PlayerStats").data("kendoGrid");（假设 PlayerStats 是您希望在其上呈现剑道网格的 HTML 元素的正确 ID）。

【参考方案1】：

试试吧：

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

然后：

grid.dataSource.read();

【讨论】：

这行得通，$("#PlayerStats").getKendoGrid();不知道为什么，正如我在官方文档中看到的使用变量名的示例。不确定“kendoGrid”映射到什么。