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

Kendo grid Footer template issue

4 Answers 781 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dev
Top achievements
Rank 1
Veteran
Dev asked on 27 Feb 2020, 07:37 AM

Hi

In our project, we need a footer template design in the Kendo grid. So we have used a Footertemplate property inside the columns.

columns: [{
field: "Name",
title: "Name",
headerTemplate: "Name <span class='fa fa-gbp' onclick='Showpopup(false,this,120); return false'></span>",
footerTemplate: "<div class='footer_Template'><div id='Namecount' style='display:none;'>Count = #: count #</div></div>"
}],

For the aggregate function, we have added the icon in the header template and added the aggregate options dynamically inside the popup window. During click of the icon, we display the aggregate options on a popup window.

The Footer template aggregate labels are initially set as display: none (as mentioned above). Once the aggregate option is selected from the header popup the footer template aggregate labels style will be display: block.

The above process is working fine before sorting of the column values but while clicking the sorting the footer template aggregate labels goes back to the initial stage (all the design style changes to display: None)


We need the same functionality & process to take place as on the video on our application too.
Video Link

Attached a demo project for your reference.

Demo Project (The link will be valid for 6 days).

4 Answers, 1 is accepted

Sort by
0
Silviya Stoyanova
Telerik team
answered on 28 Feb 2020, 06:22 PM

Hello, Rick,

Thank you for the detailed explanation, as well as the video link and demo project.

When a column is getting sorted repainting of the grid has happened. This causes the initial application of the hardcoded style display: none of the footer template. We slightly modified your code to achieve the desired behavior. In it we have included a mapping object that keeps track of the display status:

 var footerViz = {
        Name: "none",
        ID: "none",
        Amount: "none",
        Amountsum: "none",
        Amountavg:"none",
        Amountmax:"none",
        Amountmin:"none",
        Amountcount: "none"
};

Then incorporated that as part of the template. This way when the grid repaints, the current state of the property is evaluated instead of the initial state:

footerTemplate: "<div class='footer_Template'><div id='Namecount' style='display:#=footerViz['Name']#;'>Count = #: count #</div></div>"

Runnable example: http://dojo.telerik.com/ODOyIBof/5

What you are trying to achieve might be easier by using the Kendo MVVM pattern and observable objects instead to keep track of the user selections:

https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/checked

I hope this is a working solution for your project.

Regards, Silviya Stoyanova 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.
0
Dev
Top achievements
Rank 1
Veteran
answered on 05 Mar 2020, 02:30 PM

Hi Silviya,

Thanks for your information. 

We are able to almost solve the issue but need your support on a small Issue "While unselecting the aggregate column, the field removes from the footer template but while sorting it gets displayed".Video link mentioned below for your reference.

 Video Link

0
Silviya Stoyanova
Telerik team
answered on 09 Mar 2020, 03:50 PM

Hello Rick,

I apologize for the belated response.

The  issue is caused by the way the custom logic works (or does not work in this case). To assist you, we have changed the name of the aggregates to fix the error in the custom code:

var footerViz = {
        Namecount: "none",
        IDcount: "none",
        Amount: "none",
        Amountsum: "none",
        Amountavg:"none",
        Amountmax:"none",
        Amountmin:"none",
        Amountcount: "none"
      };

and also added the Grid refresh() method into the "btnOkclick" function to use the current data items.

("#AccountsGrid_120").data("kendoGrid").refresh();

You could check the updated dojo example here. I would like to once again suggest that for cases like this it is far better to work with an observable as to avoid errors like the one you encountered.

I hope it helps.

Regards, Silviya Stoyanova 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.
0
Dev
Top achievements
Rank 1
Veteran
answered on 10 Mar 2020, 10:53 AM

Hi Silviya,

Thanks for your reply. It is working fine.

Tags
Grid
Asked by
Dev
Top achievements
Rank 1
Veteran
Answers by
Silviya Stoyanova
Telerik team
Dev
Top achievements
Rank 1
Veteran
Share this question
or