random number from column aggregation

2 posts, 0 answers
  1. Jong
    Jong avatar
    1 posts
    Member since:
    Sep 2019

    Posted 18 Sep Link to this post

    HI I'm fairly new to Kendo UI and want to practice using Kendo Grid. I was trying to follow the demo for aggregation and somehow it puts out random number.

    I attached output for my program and here is my code:

     

    <!DOCTYPE html>
    <head>
        <title></title>
        <base href="https://demos.telerik.com/kendo-ui/grid/excel-export">
        <link rel="stylesheet" href="styles/kendo.common.min.css" />
        <link rel="stylesheet" href="styles/kendo.default.min.css" />
        <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>


    </head>
    <body>
        <div id="example">
            <div id="grid"></div>

            <div class="row">
                <div class="col-12">
                    <div id="grid"></div>
                </div>
            </div>
        </div>
    </body>

            <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 } }
                                    }
                                }
                            },
                            aggregate: [
                                { field: "UnitPrice", aggregate: "sum" },
                                { field: "UnitsInStock", aggregate: "count"}]
                        });

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        sortable: {

                            mode: "single",
                            allowUnsort: false
                        },
                        groupable: true,
                        filterable: {
                            mode: "row"
                        },
                        reorderable: true,
                        resizable: true,
                        columnMenu: true,
                        height: 850,

                        toolbar: ["create", "excel", "pdf"],
                        excel: {
                            fileName: "Kendo UI Grid Export.xlsx",
                            proxyURL: "https://demos.telerik.com/kendo-ui/service/export",
                            filterable: true
                        },
                        pdf: {
                        allPages: true,
                        avoidLinks: true,
                        paperSize: "A4",
                        margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
                        landscape: true,
                        repeatHeaders: true,
                        template: $("#page-template").html(),
                        scale: 0.8
                        },


                        columns: [
                            { selectable: true, width: "50px" },
                            { field: "ProductName", title: "Product Name", groupable: true, width: "400px" },
                            { field: "UnitPrice", title: "Unit Price", groupable: true, aggregates: ["sum"], footerTemplate: "Sum: $#= sum#", format: "{0:c}", width: "200px" },
                            { field: "UnitsInStock", title: "Units In Stock", groupable: true, aggregates: ["count"], footerTemplate: "Count: #=count#", width: "200px" },
                            { field: "Discontinued", groupable: true, width: "120px", editor: customBoolEditor },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                        editable: "popup"
                    });
                });

                function customBoolEditor(container, options) {
                    var guid = kendo.guid();
                    $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
                    $('<label class="k-checkbox-label" for="' + guid + '">&#8203;</label>').appendTo(container);
                }
            </script>

     

    Thank you!

  2. Hetali
    Admin
    Hetali avatar
    16 posts

    Posted 19 Sep Link to this post

    Hi Jong,

    Thank you for the code.

    The columns.aggregates can be used to define the aggregates which can be used only when the grid is grouped by columns field i.e. only in the columns.groupFooterTemplate.

    In the example, the aggregate method in the DataSource calculates the sum of the UnitPrice and the count of the UnitsInStock across data and displays it accordingly in the Grid using the columns.footerTemplate.

    However, if you are looking to get the sum and the count of the data present in the particular page, please add the following custom functions:

    $("#grid").kendoGrid({
      columns: [
         { field: "UnitPrice", title: "Unit Price", groupable: true, footerTemplate: footerTemplateSum, format: "{0:c}", width: "200px" },
         { field: "UnitsInStock", title: "Units In Stock", groupable: true, footerTemplate: footerTemplateCount, width: "200px" }],
     });
    
    function footerTemplateCount(e){
      var grid =$("#grid").data("kendoGrid");
      var count = 0;
      return "Count: " + (count+grid._data.length);
    }
              
    function footerTemplateSum(e){
      var grid =$("#grid").data("kendoGrid");
      var sum = 0;
      for(let i=0; i<grid._data.length; i++){
         var units = grid._data[i].UnitPrice;
         sum += units;
      }
      return "Sum: " + sum;
    }


    Please take a look at this Dojo sample where the Grid footer displays the sum and the count of the data present in the particular page.

    Please let me know if this is something that you're looking for. If not, could you please reply with more details of what you're trying to achieve?

    I look forward to your reply.

    Regards,
    Hetali
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top