Kendo grid Footer template issue

[Dev]

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).

[Silviya Stoyanova]

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

[Dev]

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

[Silviya Stoyanova]

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

[Dev]

Hi Silviya,

Thanks for your reply. It is working fine.