How to change the color of show or hide datagrid switch button?

[Belle Cruz]

I was wondering if how can I change the color of show or hide datagrid switch button.

[Rahul Narayanasamy]

Hi Belle, 

Greetings from Syncfusion. 

We have validated your query and you want to change color of the toggle switch button. You can achieve your requirement by using below documentation. Find the below link for your reference. 

https://blazor.syncfusion.com/documentation/toggle-switch-button/how-to/customize-the-appearance-of-a-switch 

https://blazor.syncfusion.com/documentation/toggle-switch-button/how-to/customize-the-appearance-of-a-switch#color-the-toggle-switch-button 

Please let us know if you have any concerns. 

Regards, 

Rahul 

 

[Belle Cruz]

Thanks Rahul

I already tried the toggle-switch-button customize appearance but it didn't work. I want a color blue and not pink

[Gayathri KarunaiAnandam]

Hi Belle Cruz, 

We have checked your reported query. We would like to let you know that switch default color in material theme is pink. You can customize the color of Switch Component by using the CSS property. Please check the below code snippet. 

Code snippet: 

<SfSwitch CssClass="bar-color"  @bind-Checked="isBarCheked"></SfSwitch><br /> 

 

 

@code { 

  private bool isBarCheked = false; 

 

} 

<style> 

/* To customize switch color */ 

.e-switch-wrapper.bar-color .e-switch-inner.e-switch-active, 

.e-switch-wrapper.bar-color:hover .e-switch-inner.e-switch-active .e-switch-on { 

  background-color: #ADD8E6; 

  border-color: #ADD8E6; 

} 

 

.e-switch-wrapper.bar-color .e-switch-inner, 

.e-switch-wrapper.bar-color .e-switch-off , .e-switch-wrapper .e-switch-on{ 

  background-color: #ADD8E6; 

  border-color: #ADD8E6; 

} 

 

.e-switch-wrapper.bar-color .e-switch-handle { 

  background-color: #0000FF; 

} 

 

.e-switch-wrapper:hover .e-switch-handle.e-switch-active, 

.e-switch-wrapper:not(.e-switch-disabled):hover .e-switch-handle:not(.e-switch-active){ 

     background-color: #0000FF; 

} 

 

</style> 

For your reference, please check the below sample link. 

Sample: https://www.syncfusion.com/downloads/support/forum/170504/ze/Server5.0920087951 

Sample output: 

 

Documentation: https://blazor.syncfusion.com/documentation/toggle-switch-button/how-to/customize-the-appearance-of-a-switch 

Please check and get back to us, if you need further assistance. 

Regards, 

Gayathri K 

 

[Belle Cruz]

Thank you it work on my switch button. but when opening the grid I want the corresponding column to hide automatically.

[Gayathri KarunaiAnandam]

Hi Belle,  

  

Thanks for the update.  

  

Query: but when opening the grid I want the corresponding column to hide automatically.  

  

We have validated your query and you want to hide the columns at initial rendering itself. You can hide the columns at initial rendering by using Visible property of the column. After that you can show and hide the columns dynamically by using ShowColumnAsync and HideColumnsAsync method of the Grid.  

  

<SfGrid @ref="DefaultGrid" DataSource="@Orders" Height="315">  

    <GridColumns>  

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Center" Width="150"></GridColumn>  

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150" Visible="false"TextAlign="TextAlign.Center"></GridColumn>  

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date"TextAlign="TextAlign.Center" Width="130"></GridColumn>  

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>  

    </GridColumns>  

</SfGrid>  

  

  

If you want to hide the corresponding column to hide/show when changing the SfSwitch value. You can achieve your requirement by using ShowColumnAsync and HideColumnsAsync method of the Grid. Find the below code snippets and sample for your reference.  

  

Reference: https://blazor.syncfusion.com/documentation/datagrid/columns#showhide-columns-by-external-button  

  

  

<SfSwitch CssClass="bar-color" @bind-Checked="isBarCheked" ValueChange="Change" TChecked="bool?"></SfSwitch>  

<br />  

  

<SfGrid @ref="DefaultGrid" DataSource="@Orders" Height="315">  

    <GridColumns>  

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Center" Width="150"></GridColumn>  

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150" Visible="false"TextAlign="TextAlign.Center"></GridColumn>  

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date"TextAlign="TextAlign.Center" Width="130"></GridColumn>  

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>  

    </GridColumns>  

</SfGrid>  

  

@code{  

    private bool? isBarCheked = true;  

    private SfGrid<Order> DefaultGrid;  

  

    . . .  

  

    private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool?> args)  

    {  

        if (args.Checked == true)  

        {  

            this.DefaultGrid.ShowColumnAsync("Customer Name");    //show Customer Name Column  

        } else  

        {  

            this.DefaultGrid.HideColumnsAsync(new string[] { "Customer Name" });     //hide Customer Name column  

        }  

    }  

}  

  

  

Sample:  https://www.syncfusion.com/downloads/support/forum/170504/ze/GridShowHide911016398   

  

Please let us know if you have any concerns.  

  

Regards,  

Gayathri K