剑道网格关键和求和列

Question

Hi i am beginner for kendo grid. When in edit mode, once I keyup the original price and tax amount, I want to sum the final price immediately . Please see my code at below

       <div class="panel-body">
                <div id="productRobPrice-grid"></div>

                <script>
                    var record = 0;
                    $(document).ready(function () {
                        $("#productRobPrice-grid").kendoGrid({
                            dataSource: {
                                type: "json",
                                transport: {
                                    create: {
                                        url: "@Html.Raw(Url.Action("ProductRobPriceAdd", "Product"))",
                                        type: "POST",
                                        dataType: "json",
                                        data: addAntiForgeryToken
                                    },
                                    read: {
                                        url: "@Html.Raw(Url.Action("ProductRobPriceList", "Product", new {productId = Model.Id}))",
                                        type: "POST",
                                        dataType: "json",
                                        data: addAntiForgeryToken
                                    },
                                    update: {
                                        url: "@Html.Raw(Url.Action("ProductPictureUpdate", "Product"))",
                                        type: "POST",
                                        dataType: "json",
                                        data: addAntiForgeryToken
                                    },
                                    destroy: {
                                        url: "@Html.Raw(Url.Action("ProductPictureDelete", "Product"))",
                                        type: "POST",
                                        dataType: "json",
                                        data: addAntiForgeryToken
                                    }
                                },
                                schema: {
                                    data: "Data",
                                    total: "Total",
                                    errors: "Errors",
                                    model: {
                                        id: "Id",
                                        fields: {
                                            OriginalPrice: {
                                                type: "number", validation: { required: true, min: 1 },
                                            },
                                            Tax: {
                                                type: "number", validation: { required: true, min: 1 },
                                                defaultValue: 6.00
                                            },
                                            FinalPrice: { type: "number", validation: { required: true, min: 1 } },
                                            QuantityFrom: { type: "number", validation: { required: true, min: 1 } },
                                            QuantityTill: { type: "number", validation: { required: true, min: 1 } },
                                            Avalaible: { type: "boolean", defaultValue: true },
                                            AvalaibleQuantity: { type: "number" },


                                        }
                                    }
                                },
                                requestEnd: function (e) {
                                    if (e.type == "update") {
                                        this.read();
                                    }
                                },
                                error: function (e) {
                                    display_kendoui_grid_error(e);
                                    // Cancel the changes
                                    this.cancelChanges();
                                },
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true
                            },
                            pageable: {
                                refresh: true,
                                numeric: false,
                                previousNext: false,
                                info: false,
                                @Html.Partial("_GridPagerMessages")
                            },
                            editable: {
                                confirmation: "@T("Admin.Common.DeleteConfirmation")",
                                mode: "inline"
                            },
                            scrollable: false,
                            toolbar: [{ name: "create", text: "@T("Admin.Common.AddNewRecord")" }],
                            columns: [



                          {
                              field: "OriginalPrice",
                              template: "<strong>#: OriginalPrice # </strong>"
  },

                          {
                              field: "Tax",

                              title: "@T("Admin.Catalog.Products.RobSale.Fields.Tax")",

                          },

                          {
                              field: "FinalPrice",
                              format: "{0:c}",
                              title: "@T("Admin.Catalog.Products.RobSale.Fields.FinalPrice")",

                          },


                          {
                              field: "QuantityFrom",
                              format: "{0:d}",
                              title: "@T("Admin.Catalog.Products.RobSale.Fields.QuantityFrom")",

                          },


                          {
                              field: "QuantityTill",

                              title: "@T("Admin.Catalog.Products.RobSale.Fields.QuantityTill")",

                          },
                          {
                              field: "Avalaible",

                              title: "@T("Admin.Catalog.Products.RobSale.Fields.Avalaible")",

                          },






                            {
                                command: [
                                {
                                    name: "edit",
                                    text: {
                                        edit: "@T("Admin.Common.Edit")",
                                        update: "@T("Admin.Common.Update")",
                                        cancel: "@T("Admin.Common.Cancel")"
                                    }
                                }, {
                                    name: "destroy",
                                    text: "@T("Admin.Common.Delete")"
                                }
                                ],
                                width: 200
                            }
                            ]
                        });
                    });
                </script>
            </div>

But currently got one problem, the original price textbox keyup seem like not able to fire . Please give some guideline. TQ

Answer 1

To attach a function to the keyup event you need to create custom editor function .

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        columns: [{
                field: "name"
            }, {
                field: "price",
                editor: function(container, options) {
                    // create an input element
                    var input = $("<input/>");
                    // set its name to the field to which the column is bound ('name' in this case)
                    input.attr("name", options.field);
                    input.keyup(function() {
                        alert("key up");
                    });
                    // append it to the container
                    input.appendTo(container);
                    // initialize a Kendo UI AutoComplete
                    input.kendoNumericTextBox();
                }
            },
            {
                command: "edit"
            }
        ],
        editable: true,
        dataSource: [{
            name: "Jane Doe",
            price: 5
        }, {
            name: "John Doe",
            price: 10
        }],
        editable: {
            mode: "inline"
        }
    });
</script>

But I think you probably need something like this . An aggregate function that will recalculate its value on change. Not as immediate as keyup but should work for you.