We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Key header in group

Hello,
Now I have such a basic view:


After grouping by 'Klient' I have:


And after expand:


I would like to get something like that:



For the next levels of groups I would like to achieve a similar effect.

How to do it?

Best regards,
Rafal

3 Replies

JP Jagadeesan Pichaimuthu Syncfusion Team February 18, 2019 12:09 PM UTC

Hi Rafal, 
 
Thank you for contacting Syncfusion support. 
 
We have analyzed your query and you can achieve your requirement “To display the Grouped column Key in CaptionSummaryRow Column” by overriding the CaptionSummaryCellRender. Please refer the below code snippets. 
 
public class CustomCaptionSummaryCellRenderer : GridCaptionSummaryCellRenderer 
{ 
    public override void OnInitializeEditElement(DataColumnBase dataColumn, GridCaptionSummaryCell uiElement, object dataContext) 
    { 
        if (dataContext is Group) 
        { 
            var groupRecord = dataContext as Group; 
            var mappingName = dataColumn.GridColumn.MappingName; 
            var groupedColumn = this.GetGroupedColumn(groupRecord); 
 
            if (mappingName == groupedColumn.MappingName) 
                uiElement.Content = groupRecord.Key; 
            else 
                uiElement.Content = SummaryCreator.GetSummaryDisplayText(groupRecord.SummaryDetails, 
                    dataColumn.GridColumn.MappingName, this.DataGrid.View); 
        } 
    } 
 
    public override void OnUpdateEditBinding(DataColumnBase dataColumn, GridCaptionSummaryCell element, object dataContext) 
    { 
        if (element.DataContext is Group && this.DataGrid.View.GroupDescriptions.Count > 0) 
        { 
            var groupRecord = element.DataContext as Group; 
            //get the column which is grouped. 
            var groupedColumn = this.GetGroupedColumn(groupRecord); 
            var mappingName = dataColumn.GridColumn.MappingName; 
 
            if (mappingName == groupedColumn.MappingName) 
                element.Content = groupRecord.Key; 
            else 
                element.Content = SummaryCreator.GetSummaryDisplayText(groupRecord.SummaryDetails, 
                    dataColumn.GridColumn.MappingName, this.DataGrid.View); 
        } 
    } 
 
    // Method to get the Grouped Column. 
    private GridColumn GetGroupedColumn(Group group) 
    { 
        var groupDesc = this.DataGrid.View.GroupDescriptions[group.Level - 1] as PropertyGroupDescription; 
        foreach (var column in this.DataGrid.Columns) 
        { 
            if (column.MappingName == groupDesc.PropertyName) 
            { 
                return column; 
            } 
        } 
        return null; 
    } 
        
} 
 
Please find the sample from the below location. 
 
Screenshot: 
 
 
Please refer the below KB to get more details about CaptionSummaryCell renderer customization. 
 
 
Regards, 
Jagadeesan 



RA Rafal February 19, 2019 12:35 PM UTC

Thank you very much :).

Best regards,
Rafal


JN Jayaleshwari N Syncfusion Team February 20, 2019 06:24 AM UTC

Hi Rafal, 
 
Thanks for the update. Please get in touch if you would require further assistance. 
 
Regards, 
Jayaleshwari N 


Loader.
Live Chat Icon For mobile
Up arrow icon