Change dropdowndatagrid CSS conditonally

Radzen.Blazor Components
1

Hello Team,
I have a requirement where in we need to change the font of dropdowndatagrid components marked 1,2, and 3 based on a condition.

image
image508×435 14.3 KB

I am able to change the fonts by applying below changes in style.css

.rz-cell-data,
.rz-dropdown .rz-dropdown-label ,
.rz-lookup-search input {
    font-family: Ankit !important;
    font-size: 20px !important;
}

where ankit is an imported font. I want this style to be activated based on a condition in my code like

 if (condition_true)
{
//apply css
}

For the same I defined a custom class "myDropDown"

.myDropDown.rz-cell-data,
.myDropDown.rz-dropdown .rz-dropdown-label ,
.myDropDown.rz-lookup-search input {
    font-family: Ankit !important;
    font-size: 20px !important;
}

and applied the same based on condition using

        <RadzenDropDownDataGrid  style="MyStyle" >

where MyStyle is a string variable whose value is set as myDropDown based on condition
This works and font is applied for screenshot item number (1) but the font is not being applied to item(2) and (3)
Kindly Guide how to apply style/font for items 2and 3 the above.
Thanks

2

You can try setting the class attribute. Style renders the inline style attribute of the outer HTML element.

3

Thanks for your feedback.

.myDataGrid .rz-cell-data,
.myDataGrid .rz-cell-filter {
    font-family: Ankit !important;
    font-size: 20px !important;
}

I used above class and radzen datagrid to resolve my issue.

1 Like