clarification in sfgrid and card and tab item

[KINS]

I have an grid control .I would like to clarify below css in syncfusion blazor grid

1.How to change grid menu color (menu in header)

2.How to set alternative row color in grid.

And Also I would like to know how to use validation summary (which should display in card as sweet alert box when submitting forms.

And Also I would like to know how to make tab as responsive when I resizing browser 

For example 

I have 8 tab,I would like to know how to view all 8 tab in mobile mode as responsive 

[KINS]

Please ignore " How to set alternative row color in grid".

For point 1  How to change grid menu color (menu in header).

Please check attached image for your reference.

Attachment: Alerts1_97a50192.zip

[Vignesh Natarajan]

Hi Ahmed, 

 

Thanks for the update.  

 

Query: “For point 1  How to change grid menu color (menu in header).” 

 

We have analyzed your query and we suspect that you want to change the color of filter icon in column header. We request you to achieve your requirement using below solution to change the color of the default filter icon.  

 

<style> 

    /*to color the icon when filtering is not applied to that column*/ 

    .e-grid .e-filtermenudiv::before { 

        color: red; 

    } 

    /*to color the icon when filtering is applied to that column*/ 

 

    .e-grid .e-filtered::before { 

        color: green; 

    } 

</style> 

 

 

If you are facing any difficulties with the above solution, kindly get back to us with more details about the query  

 

Query: “ I would like to know how to use validation summary (which should display in card as sweet alert box when submitting forms.” 

 

We have analyzed your query and we would like to inform you that we have already provided support for Column validation and documented this topic in our UG documentation. So kindly refer the below ug documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/editing/#column-validation  

 

If above solution does not match your requirement. Kindly share more details about the issue.  

 

Query: “ I would like to know how to make tab as responsive when I resizing browser ” 

 

You can either set OverflowMode as Popup or Scrollable to use the tab as responsive. Please refer to the following UG.  

 

https://blazor.syncfusion.com/documentation/tabs/responsive-modes/  

 

If all the 8 tabs is not able to be rendered in available space, you can either view it using scrollable mode or popup mode.  

 

Regards, 

Vignesh Natarajan