Using SfSwitch in SfGrid

[Uwe Jädick]

How can I use <SfSwitch> inside a <GridColumn>?

<GridColumn HeaderText="Test" Width="80px">

<SfSwitch />

</GridColumn>

is not working

[Naveen Palanivel]

Hi Uwe,

Greetings from Syncfusion support.

Based on your query, it seems that you want to render the SfSwitch component inside the Grid column. We suggest using the column template to render the other components( i.e SfSwitch) in a Grid column. Please refer the Documentation and sample for more reference.

Reference: Column Template in Blazor DataGrid Component | Syncfusion

Sample: https://blazorplayground.syncfusion.com/embed/hZrgNFDhrrdXGXcc?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

[Uwe Jädick]

Thank you. It works!!

[Naveen Palanivel]

Hi Uwe,

Welcome

We are glad to hear that your query has been resolved. 

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel.

[s h]

I have placed an SfSwitch as shown in the sample, but all rows are being updated simultaneously. How can I configure it so that each row is updated individually?

[Naveen Palanivel]

Hi S h,

We reviewed your query, it seems that changing the SfSwitch in one row affects all rows. To resolve this issue, ensure that each row has its own unique value for the SfSwitch.  We should bind the switch’s state to a property specific to each row rather than using a single shared property. Please refer to the following code snippet and sample for guidance.

Sample : https://blazorplayground.syncfusion.com/embed/VXBpNECCqdjSpvAe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name">

            <Template>

                @{

                    var employee = context as EmployeeData;

                    <SfSwitch @bind-Checked="employee.SwitchState"></SfSwitch>

                }

            </Template>

        </GridColumn>

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Format="C2"></GridColumn>

        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" Width="150"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

    public List<EmployeeData> Employees { get; set; }

 

    protected override void OnInitialized()

    {

        Employees = Enumerable.Range(1, 5).Select(x => new EmployeeData()

            {

                EmployeeID = x,

                FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)],

                Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager", "Inside Sales Coordinator" })[new Random().Next(4)],

                HireDate = DateTime.Now.AddDays(-x),

                SwitchState = false

            }).ToList();

    }

 

    public class EmployeeData

    {

        public int? EmployeeID { get; set; }

        public string FirstName { get; set; }

        public string Title { get; set; }

        public DateTime? HireDate { get; set; }

        public bool SwitchState { get; set; } // Add this property

    }

}

Regards,
Naveen