custom group area

[jose luis barajas]

Hi

Please help, I need custom group area in blazor datagrid, for example, change background color, change font size, and reduce height for group area, check my image...

Thanks in advace!

Attachment: question_b4022991.rar

[Monisha Saravanan]

Hi Jose Luis Barajas, 

Greetings from Syncfusion support. 

We can customize the group drag area and group headercell by using the below CSS. Kindly check the attached sample and code snippet for your reference. 

<style> 

    .e-grid .e-groupdroparea{    /*To change group drag area CSS*/ 

        background-color: green; 

        font-size: 24px; 

        height: 80px; 

    } 

    .e-grid .e-groupdroparea.e-grouped{ 

         background-color: green; 

 

    } 

    .e-grid .e-groupheadercell{   /*To change headercell CSS*/ 

        background-color: red;   

        font-size: 24px; 

        height: 40px; 

    } 

</style> 

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

 

Reference: https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling 

Kindly get back to us if you have further queries. 

Regards, 

Monisha