如何刷新局部视图中的Kendo Grid？

我有一个渲染在模态框表单内的Kendo Grid局部视图，希望勾选#voidInvoice复选框时刷新Grid，让控制器获取额外参数展示更多数据。目前复选框的change事件能触发刷新函数，但请求URL里没有携带任何参数，控制器收不到所需的fetchAllItems等参数。

相关代码 #

局部视图（Grid定义）

@model List<PrintedCheckInvoice>

<div>
    @Html.Kendo().Grid(Model).Name("PrintedCheckInvoiceList").DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Model(model =>
        {
            model.Id(o => o.actionItemID);
        }).Read(read => read.Action("PrintedCheckInvoiceList_Read", "Assoc").Data("getInvoicesFilter"))
        ).Columns(columns =>
        {
            columns.Bound(o => o.ledgerID).Width(90);
            columns.Bound(o => o.actionItemID).Width(100);
            columns.Bound(o => o.invoiceNo).Width(130);
            columns.Bound(o => o.description).Width(180);
            columns.Bound(o => o.glDetail).Width(230);
            columns.Bound(o => o.checkNo).Width(90);
            columns.Bound(o => o.amount).Format("{0:c}").Width(100);
        }).Resizable(resize => resize.Columns(true)).Scrollable(scrolling => scrolling.Height(150))
</div>

父视图（模态框表单）

<form method='post' id='frmRegisterVoid' name='frmRegisterVoid'>
    <div>.....</div>

    <div class="editor-label" style="width: 20%">
        @Html.Label("voidInvoice", "Void Invoice")
    </div>
    <div class="editor-field" style="width: 75%; margin-top: 6px;">
        @Html.EditorFor(model => model.voidInvoice)
        <label id="bankRegisterVoidDisclaimer" style="display: none; font-size: 1.0em; color: grey;">Payment created by Post Expense; Invoice void required.</label>
    </div>
    <div class="info-box">
        <span class="k-icon k-i-info-circle"></span>
        <p>The following invoice payments will also be @((Convert.ToBoolean(ViewData["IsUnvoid"]) ? "unvoided" : "voided")) when completing this action:</p>
    </div>

    <!-- Partial rendered here -->
    <div class="paid-invoices-grid" style="width: 100%; overflow: auto;">
        @{ Html.RenderAction("PrintedCheckInvoiceList_Read", new { checkNo = Model.checkNo, assocBankAcctID = Model.assocBankAcctID, assocAcctLedgerID = Model.assocAcctLedgerID}); }
    </div>
</form>

JS事件与刷新函数

$(document).ready(function () {
    if (@Convert.ToBoolean(ViewData["DisableVoidInvoiceCheckbox"]).ToString().ToLower()) {
        $("#voidInvoice").prop("disabled", true);
        $('#bankRegisterVoidDisclaimer').css('display', 'inline-block');
    }

    $('#voidInvoice').change(function () {
        refreshInvoiceList();
    });
});

function refreshInvoiceList() {
    console.log('refreshInvoiceList function called.');

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

    console.log('Grid:', grid);
    console.log('Data:', data);

    // Set new read parameters on the existing data source
    grid.dataSource.transport.read.data = data;

    // Read data from the server
    grid.dataSource.read();
}

function getInvoicesFilter() {
    console.log("getInvoicesFilter hit!");
    var voidAllInvoices = $('#voidInvoice').is(':checked');
    var checkNo = $('#checkNo').val().toString();
    var assocBankAcctID = Number($('#assocBankAcctID').val());
    var assocAcctLedgerID = Number($('#assocAcctLedgerID').val());

    var data = {
        checkNo: checkNo,
        assocBankAcctID: assocBankAcctID,
        assocAcctLedgerID: assocAcctLedgerID,
        fetchAllItems: voidAllInvoices
    };

    return data;
}

当前问题 #

getInvoicesFilter()能正确生成参数对象，但调用grid.dataSource.read()时，请求URL里没有这些参数，控制器无法获取fetchAllItems等值。

问题出在直接修改grid.dataSource.transport.read.data的方式不符合Kendo UI DataSource的规则，以下是三种可行的修正方案：

方法1：调用read时直接传入参数 #

不需要修改transport配置，直接把参数传给read()方法，Kendo会自动将参数附加到请求URL上：

function refreshInvoiceList() {
    console.log('refreshInvoiceList function called.');
    var data = getInvoicesFilter();
    var grid = $("#PrintedCheckInvoiceList").data("kendoGrid");
    
    console.log('Grid:', grid);
    console.log('Data:', data);
    
    // 直接将参数传入read方法
    grid.dataSource.read(data);
}

方法2：重新设置DataSource的Read配置 #

如果需要持久化修改后续请求的参数规则，可以重新配置DataSource的read属性：

function refreshInvoiceList() {
    console.log('refreshInvoiceList function called.');
    var grid = $("#PrintedCheckInvoiceList").data("kendoGrid");
    
    // 重新配置read的Data函数
    grid.dataSource.options.read.data = getInvoicesFilter();
    // 刷新数据
    grid.dataSource.read();
}

方法3：利用原始Data函数的动态特性 #

你最初的Grid定义已经指定了Data("getInvoicesFilter")，这个函数会在每次read()时自动执行，获取最新的复选框状态和参数值，因此可以简化刷新逻辑：

function refreshInvoiceList() {
    var grid = $("#PrintedCheckInvoiceList").data("kendoGrid");
    grid.dataSource.read();
}

验证建议 #

• 打开浏览器控制台的Network面板，查看请求的URL是否包含预期的QueryString参数
• 确认#checkNo、#assocBankAcctID、#assocAcctLedgerID等元素存在且能获取到正确的值

内容的提问来源于stack exchange，提问作者CarlosG90