How to calculate all the values kendo grid column and want display outside using one textbox?

Question

Actually, my requirement is i want to calculate all the amount values and want to display outside of the grid.

For example i am having coulmn name amount and please assume that amount grid column having 10 more values and i want to calculate sum of that 10 values and want to display outside of kendo grid using one text box.

Please help me any one to achieve this.

Please see this example. I want to do in this example. http://dojo.telerik.com/UmIKE

Answer 1

Please try with the below code snippet.

<div id="grid"></div>
<input type="text" id="txtAllRowSum" />
<input type="text" id="txtCurrentPageSum" />
<script>
    $(document).ready(function () {
        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: crudServiceBaseUrl + "/Products",
                                dataType: "jsonp"
                            },
                            update: {
                                url: crudServiceBaseUrl + "/Products/Update",
                                dataType: "jsonp"
                            },
                            destroy: {
                                url: crudServiceBaseUrl + "/Products/Destroy",
                                dataType: "jsonp"
                            },
                            create: {
                                url: crudServiceBaseUrl + "/Products/Create",
                                dataType: "jsonp"
                            },
                            parameterMap: function (options, operation) {
                                if (operation !== "read" && options.models) {
                                    return { models: kendo.stringify(options.models) };
                                }
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        schema: {
                            model: {
                                id: "ProductID",
                                fields: {
                                    ProductID: { editable: false, nullable: true },
                                    ProductName: { validation: { required: true } },
                                    UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                                    Discontinued: { type: "boolean" },
                                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                }
                            }
                        }
                    });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 550,
            dataBound: onDataBound,
            toolbar: ["create"],
            columns: [
                "ProductName",
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
                { field: "UnitsInStock", title: "Units In Stock", width: "120px" },
                { field: "Discontinued", width: "120px" },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
            editable: "inline"
        });
    });
    function onDataBound(arg) {
        //Total sum of UnitsInStock field
        var datalength = arg.sender.dataSource.data().length;
        var totalsum = 0;
        if (datalength > 0) {
            for (var i = 0; i < datalength; i++) {
                totalsum += arg.sender.dataSource.data()[0].UnitsInStock;
            }
        }
        $("#txtAllRowSum").val(totalsum);

        //UnitsInStock field sum of current page
        var curretpagesum = 0;
        var grid = $("#grid").data("kendoGrid");
        $(grid.tbody).find('tr').each(function (index) {
            curretpagesum += parseInt($(this).find('td:eq(2)').html());
        });
        $("#txtCurrentPageSum").val(curretpagesum);
    }


</script>

Let me know if any concern.