refresh datasource

3 posts, 0 answers
  1. John
    John avatar
    14 posts
    Member since:
    Sep 2006

    Posted 04 Oct Link to this post

    Hi,

    I'm using kendo-ui with aurelia and opted for the kendui templating for exporting grouped grid data and have everyting working except the section marked below when grouping and refreshing the dataset. In summary I want to refresh datasource and maintain aggregate groupings.

    Thanks,

    John

    This works. No aggregate totals in groups.
     changeData() {
        let s1 = moment(this.startDatePicker._value).format('MM-DD-YYYY')//  moment(this.startDatePicker.value).format('MM-DD-YYYY')
        let s2 = moment(this.endDatePicker._value).format('MM-DD-YYYY') //moment(this.endDatePicker.value ).format('MM-DD-YYYY')
       //  the api fetching new data
       api.getTWO(s1, s2)
          .then((jsonRes) => {
            let twos = jsonRes;
             let grid = jQuery(this.grid).data('kendoGrid');
            grid.setDataSource(dataSource)        //  dataSource.read();

          })
      }
    attached() {
       jQuery(this.grid).kendoGrid({
          toolbar: ["excel"],
          excel: {
            fileName: "Kendo UI Grid Export.xlsx",
            proxyURL: "//demos.telerik.com/kendo-ui/service/export",
            filterable: true,
            allPages: true
          },
          dataSource: {
            type: "json",
            transport: {
              read: "http://localhost:8080/api/v1/two/getAll/" + s1 + "/" + s2

            },
            group: [{ field: "TenantCategory_Desc" }, { field: "CYM" }],// set grouping for the dataSource
            schema: {
              model: {
                fields: {
                  CompanyName: { type: "string" },
                  CYM: { type: "string" },
                  CDATE: { type: "string" },
                  TenantCategory_TenantCategory: { type: "string" },
                  TenantCategory_Desc: { type: "string" },
                  Comments: { type: "string" },
                  Total: { type: "number" },
                  TenantCategory_Amt: { type: "number" }
                }
              }
            },
            pageSize: 20,

            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
          },

          height: 550,
          filterable: true,
          groupable: true,
          sortable: true,
          pageable: true,
          columns: [
            { field: "CompanyName", filterable: false },
            "CYM",
            "CDATE",
            { field: "TenantCategory_Desc", title: "TenantCategory_Desc" },
      
            {
              field: "Total",
              title: "Total"
            }, {
              field: "TenantCategory_Amt",
              title: "TenantCategory_Amt"
            }
          ],
       

        });
      }


    }



    This Does Not work

     changeData() {
         let s1 = moment(this.startDatePicker).format('MM-DD-YYYY')
        let s2 = moment(this.endDatePicker).format('MM-DD-YYYY') 

        api.getTWO(s1, s2)
          .then((jsonRes) => {
            let twos = jsonRes;
            let dataSource = new kendo.data.DataSource({ data: twos });
            let grid = jQuery(this.grid).data('kendoGrid');
            let dataSource = new kendo.data.DataSource({ data: twos });
            let grid = jQuery(this.grid).data('kendoGrid');
            grid.dataSource.group({
              field: "TenantCategory_Desc", aggregates: [
                { field: "TenantCategory_Desc", aggregate: "count" },
                { field: "Total", aggregate: "sum" }
              ],
            })
            grid.setDataSource(dataSource)
            dataSource.read();
           
          })
      }


      attached() {
         this.startDatePicker.value = this.ss1;
        jQuery(this.grid).kendoGrid({
          toolbar: ["excel"],
          excel: {
            fileName: "Kendo UI Grid Export.xlsx",
            proxyURL: "//demos.telerik.com/kendo-ui/service/export",
            filterable: true,
            allPages: true
          },
          dataSource: {
            type: "json",
            transport: {
              read: "http://localhost:8080/api/v1/two/getAll/" + this.ss1 + "/" + this.ss2

            },
            group: {
              field: "TenantCategory_TenantCategory", aggregates: [

                { field: "TenantCategory_Desc", aggregate: "count" },
                { field: "Total", aggregate: "sum" }
              ]
            }
            ,
         
            schema: {
              model: {
                fields: {
                  CompanyName: { type: "string" },
                  CYM: { type: "string" },
                  CDATE: { type: "string" },
                  TenantCategory_TenantCategory: { type: "string" },
                  TenantCategory_Desc: { type: "string" },
                  Comments: { type: "string" },
                  Total: { type: "number" },
                  TenantCategory_Amt: { type: "number" }
                }
              }
            },
            pageSize: 20,

            aggregate: [{ field: "TenantCategory_Desc", aggregate: "count" },
              { field: "Total", aggregate: "sum" }]
          },
          groupable: true,
          sortable: true,
          scrollable: false,
          pageable: true,
          columns: [

            { field: "TenantCategory_Desc", title: "TenantCategory_Desc", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
            { field: "Total", title: "Total", aggregates: ["sum"], footerTemplate: "#= kendo.toString(sum, '0.00') #", groupFooterTemplate: "#= kendo.toString(sum, '0.00') #" },
            { field: "CompanyName", filterable: false },
            { field: "CYM", title: "YearMonth", filterable: true },
            { field: "CDATE", filterable: false },
          ]
        });
      }
    }

    }

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 06 Oct Link to this post

    Hi John,

    You can use the dataSource.query() method and provide all necessary data operation parameters and configuration options (page, pageSize, sort, filter, group, aggregate):

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-query

    The following documentation article on Aurelia-Kendo UI integration might also prove useful:

    http://docs.telerik.com/kendo-ui/third-party/aurelia

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
  4. John
    John avatar
    14 posts
    Member since:
    Sep 2006

    Posted 06 Oct in reply to Dimiter Topalov Link to this post

    Hi

    1) The following function disables grouping and exports to excel

      changeData() {
        let s1 = moment(this.startDatePicker).format('MM-DD-YYYY')
        let s2 = moment(this.endDatePicker).format('MM-DD-YYYY')
        api.getTWO(s1, s2)
          .then((jsonRes) => {
            let twos = jsonRes;
            let dataSource = new kendo.data.DataSource({ data: twos });
            let grid = jQuery(this.grid).data('kendoGrid');
             dataSource.query({
              group:{
                field: "TenantCategory_TenantCategory", aggregates: [
                { field: "TenantCategory_Desc", aggregate: "count" },
                { field: "Total", aggregate: "sum" }
              ]}
            })

    2) While I use Aurelia-KendoUI Bridge, my understanding and proactice shows that if I use aurelia or angular templating, I loose the ability to get totals to display in footers in grid and exports.  Jeroen Vinke told me 'That is where the bug occurs (we use the same "hook" for aurelia templates:
    3) I got the following to work by reloading the page. Now all grouping exports work fine.

    import {activationStrategy} from 'aurelia-router';

      changeData() { 

        let s1 = moment(this.startDatePicker).format('MM-DD-YYYY')
        let s2 = moment(this.endDatePicker).format('MM-DD-YYYY')
        let rt = 'two'
        console.log('this.route ', this.route)
        this.router.navigate(rt + '/1' + '?d1=' + s1 + '&d2=' + s2);
      }

     

Back to Top