如何使用 JQuery 在 Kendo Ui Grid 上刷新“页脚”

Question

I Set Kendo Ui Grid and footer, footer will get total price, but it always can't get last data. hope somebody can help to fix it. and i try $("#Grid").data("kendoGrid").refresh(); but it didn't work for me.

kendoui grid set

dataSource

    var AddGriddataSource = new kendo.data.DataSource({
    data: [],
    schema: {
        model: {
            fields: { 
                id: 'No',                
                Name: { editable: false, nullable: false },
                txtStockNum: { editable: false, nullable: false },
                txtReturnNum: { editable: true, nullable: false },
                txtPricetax: { editable: false, nullable: false },
                txtPriceNum1: { editable: false, nullable: false }
            }
        } // end of model
    },  // end of schema
    aggregate: [{ field: "txtPriceNum", aggregate: "sum" }, { field: "txtPriceNum1", aggregate: "sum" }],
});

Cell

    var AddGridCells = [
    { field: "Name", title: "Name", width: "20px" },
    { field: "StockNum", title: "Stock", width: "20px" },
    { field: "txtReturnNum", title: "txtReturnNum", width: "100px", template: '<input id = "Del" class="returnDel" type="button" value="▼" style="margin: -1px" /><input id="Txt_test1" class="returnTxtBox" type="textbox" value= #=txtReturnNum# style="margin: 2px" /><input id = "plus" class="returnPlus" type="button" value="▲" style="margin: -1px" />' },       
    { field: "txtPrice", title: "txtPrice", width: "20px", hidden: true },
    { field: "txtPricetax", title: "txtPricetax", width: "20px", format: "{0:n3}" },
    { field: "txtPriceNum", title: "Total", width: "20px", footerTemplate: "#= kendo.toString(sum, '0.000')#", hidden: true },
    { field: "txtPriceNum1", title: "Total", width: "30px", footerTemplate: "<span id='footerPlaceholder'>#= kendo.toString(sum, '0.000')#</span>", format: "{0:n3}" },
    { command: [{ text: "X", click: DelchooseDetails }], title: " ", width: "10px" },
];

and

$("#AddGrid").kendoGrid({
            dataSource: AddGriddataSource,
            selectable: "row",
            scrollable: false,
            columns: AddGridCells,
            change: numberInput,
            pageable: {
                buttonCount: 3,
                messages: GridPageMsg
            },
            height: '100%',
            editable: true
        }).data("kendoGrid");

JQuery todo

$(document).on('click', '.returnPlus', function (e) {
 
    if (nowStatus != 0) {
        return;
    }
    var ds2 = $("#AddGrid").data("kendoGrid").dataSource;
    var row = $(this).closest("tr"),
        grid = $("#AddGrid").data("kendoGrid"),
        dataItem = grid.dataItem(row);
    debugger;
    ds2.fetch(function () {
        dataItem.txtReturnNum = dataItem.txtReturnNum - (-1);
        dataItem.txtPriceNum = dataItem.txtReturnNum * dataItem.txtPrice;
        dataItem.txtPriceNum1 = mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax);
    })
    $("#AddGrid").data("kendoGrid").refresh();
    return;
});


$(document).on('click', '.returnDel', function (e) {
    if (nowStatus != 0) {
        return;
    }
    var ds2 = $("#AddGrid").data("kendoGrid").dataSource;
    var row = $(this).closest("tr"),
        grid = $("#AddGrid").data("kendoGrid"),
        dataItem = grid.dataItem(row);
    debugger;
    ds2.fetch(function () {
        dataItem.txtReturnNum = dataItem.txtReturnNum - (1);
        dataItem.txtPriceNum = dataItem.txtReturnNum * dataItem.txtPrice;
        dataItem.txtPriceNum1 = mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax);
    })       
    $("#AddGrid").data("kendoGrid").refresh();
    return;
});

I'm not sure If i does not described correctly,so i record video https://imgur.com/mePv5qI

How can i do will be correct

Answer 1

Why are you using fetch() ? It seems that you don't need it, since you're not updating data from api. You're only updating local data, right ? So remove it and change dataItem directly:

var row = $(this).closest("tr"),
    grid = $("#AddGrid").data("kendoGrid"),
    dataItem = grid.dataItem(row);

dataItem.txtReturnNum = dataItem.txtReturnNum - (-1);
dataItem.txtPriceNum = dataItem.txtReturnNum * dataItem.txtPrice;
dataItem.txtPriceNum1 = mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax);

$("#AddGrid").data("kendoGrid").refresh();

Or

var row = $(this).closest("tr"),
    grid = $("#AddGrid").data("kendoGrid"),
    dataItem = grid.dataItem(row);

dataItem.set('txtReturnNum', dataItem.txtReturnNum - (-1));
dataItem.set('txtPriceNum', dataItem.txtReturnNum * dataItem.txtPrice);
dataItem.set('txtPriceNum1', mulFloat(dataItem.txtReturnNum, dataItem.txtPricetax));