Custom CSS per grouping level on DataGrid

[Leland]

Hello,

I have a data grid that has multiple levels of grouping. Is there a way to provide a custom style via CSS to each level of grouping depending on its nesting level? I do not see a way to access this information from the Styling and Appearance Documentation.

Thank you,

[Monisha Saravanan]

Hi Leland,

Greetings from Syncfusion support.

We are currently checking the feasibility in achieving your requirement and we will update further details within two business days on or before 4^th October, 2022.

Until the we appreciate your patience.

Regards,

Monisha

[Monisha Saravanan]

Hi Leland,

Thanks for the patience.

Query: “Is there a way to provide a custom style via CSS to each level of grouping depending on its nesting level? ”

We have checked your query and  we would like to inform that we can achieve your requirement using Javascript solution we had prepared an simple sample based on the shared requirement by using aria label property. You can customize your application by using the below suggested solution at your end.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DATAGR~1-790981971.zip

search = function () {

    var a = document.querySelectorAll("[aria-label^='Customer']");

 

    for (var i = 0; i < a.length; i++) {

 

        a[i].style.background = "blue";

    }

 

    var b = document.querySelectorAll("[aria-label^='Freight']");

    for (var i = 0; i < b.length; i++) {

       

            b[i].style.background = "Green";

        }

Kindly get back to us if you have faced any difficulties or if you have further queries.

Regards,

Monisha

[Leland]

Thank you this is helpful. To expand on this are you able to apply this style to the left side of the grouping component as well? So that the the whole grouping component is styled the same.

Thank you,

[Monisha Saravanan]

Hi Leland,

Thanks for the update.

We have modified the sample as per your shared requirement. By using JavaScript solution we have customized group caption. By using this we suggest you to customize your application at your end. Kindly check the attached sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid_Server-982358065.zip

Please let us know if you have any concerns.

Regards,

Monisha

[Leland]

Thank you for the reply. I will be able to modify your solutions for my needs. If there is any documentation that I missed related to this, I would appreciate links to that. 

Thank you for your help. 

[Leland]

One more question in regard to this formatting. Currently in your example the formatting occurs in the ActionBegin and DataBound event handlers. When the user expands or collapses the grouped areas, the formatting does not persist. Is there an event that fires when a grouped category is expanded or collapsed so that I can persist this formatting? I do not see an even related to this specific action in the Event Documentation. It does not appear that the OnActionBegin or OnActionComplete 

[Monisha Saravanan]

Hi Leland,

Thanks for the update.

Query: “When the user expands or collapses the grouped areas, the formatting does not persist. Is there an event that fires when a grouped category is expanded or collapsed so that I can persist this formatting?”

We would like to inform that currently we don’t have any events for Grid expand or collapse. Instead we suggest you to achieve you solution using JavaScript click event. It will  be triggered for every click action and we can filter our required action using class list and inside the condition we can call again the search method to apply CSS. Kindly refer the attached sample and modified solution for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid_Server2095071066.zip

 

document.addEventListener('click', function (args) {

    if ((args.target.classList.contains('e-icon-gdownarrow')) || (args.target.classList.contains('e-icon-grightarrow')))

    {

        setTimeout(function () {

            search();

        },400)

      

    }

 

})

 

Kindly get back to us if you have further queries. As always we will be happy to help you.

Regards,

Monisha