This is a migrated thread and some comments may be shown as answers.

refresh datasource

2 Answers 691 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 04 Oct 2016, 06:41 PM

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 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 06 Oct 2016, 09:43 AM
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.
0
John
Top achievements
Rank 1
answered on 06 Oct 2016, 06:44 PM

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);
  }

 

Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
John
Top achievements
Rank 1
Share this question
or