Issues in pivot grid wrapped in angular2 component

[Krishnan]

We are using the Kendo Pivot grid wrapped in Angular2 component. We are able to populate the pivot grid, but we are facing some issues in the following items
1. How do I change the background-color of the columnheader or grouping header in Pivot grid. I tried applying the following css in the custom.css but it is not getting affected with the grid.
.k-grouping-header k-grid-header th.k-header{
    background-color: #F7F7F7 !important;
}
2. How do I get the Subtotals at the group level and Grand total at the overall level? 
3. how to include the Grouped column name along with "All" in the group by RowHeaders (please refer the snapshot attached for more details)

Can anyone help me with these issues?

 

[Krishnan]

2. How do I Highlight (change the row color) the rows of the Subtotals at the group level and Grand total at the overall level? I am getting the subtotals/grand totals but I am not able to highlight it, also how can I rename the column/row headers ?

[Dimiter Topalov]

Hi Krishnan,

Thank you for your interest in Kendo UI for Angular 2.

This is a new and separate product, currently in beta stage and free for use and community preview. We will release a commercial offering in 2017 and that will also include dedicated support service.

Currently there is no Pivot Grid component, but you can vote for one being created in our UserVoice portal:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-2-feedback/suggestions/16636978-pivot-grid-component

In the meantime, the Community & Support page outlines the available options to receive technical assistance via StackOverflow or Telerik Professional Services, or report issues in our kendo-angular2 GitHub repository, or submit feature requests in our UserVoice Portal.

Stay tuned and keep an eye on our Kendo UI for Angular 2 site and the roadmap, the Telerik blogs (specifically, the Kendo UI Product Manager posts) and GitHub repository for updates.

Regards,
Dimiter Topalov
Telerik by Progress

[Krishnan]

Thanks for your reply. I understand that Pivotgrid on angular2 is not available. We are trying to create a wrapper for the existing Pivotgrid and we are also able to load the grids and perform some functionalities as well.

We are struck with some styling issues for which we need some help from Support team or from the community members.

The main issue which we are facing now is : we want to change the GroupHeaders/RowHeaders. In the demo Pivot grid from Telerik website, I can notice the Group headers like "All Geographies", "All Products" etc. But in the grid which we have generated we are getting the headers as "All". We would like to include the values like "All Brand", "All Category" instead of "All". Please refer the snapshot attached for more info.

Please let me know how this can be done in the Normal KendoPivot grid, I can try the same in our angular2 component as well

[Dimiter Topalov]

Hi Krishnan,

Angular 2 set aside, the described text can be modified via the Pivot Grid's dataSource schema.cube configuration. Please note that this is only applicable if client cube processing is used.

The only alternative is to manually change the desired elements' content in the dataBound event handler, similar to the approach in the following how-to article from our documentation:

http://docs.telerik.com/kendo-ui/controls/data-management/pivotgrid/how-to/modify-measure-tag-caption

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress