Refresh kendo grid within a partial?

I have the following partial:

@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>

It's rendered within a form that's part of a modal:

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

I'm trying to refresh the kendo grid when the checkbox for #voidInvoice is checked. Whenever it's checked the controller will fetch additional items to display on the grid.

I attempted doing this by adding a listener to the checkbox:

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

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

which then calls 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();
    }

getInvoicesFilter():

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

The data is in the correct format and the parameter naming of the controller matches the infomation but for some reason the request URL doesn't contain any of the parameters. How can I refresh the grid?

Solution

Try this:

Get rid of this line:

 grid.dataSource.transport.read.data = data;

Its not a good idea to change Kendo's widgets options like that. Always try to use setOptions method.

Pass your new params to the read() method:
```
 grid.dataSource.read(data);
```

Check Docs