1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to handle GridSwitchColumn change?

How to handle GridSwitchColumn change?

Hi,
I have below SFDataGrid:
<SfDataGrid:SfDataGridx:Name="gridMerchantCategories"VerticalOptions="FillAndExpand"ColumnSizer="Star"AutoGenerateColumns="False"ItemsSource="{BindingCategoryDetails}">
<SfDataGrid:SfDataGrid.Columns>
<SfDataGrid:GridTextColumnPadding="5"HeaderText="Category"MappingName="category_name"TextAlignment="Start"HeaderTextAlignment="Start"/>
<SfDataGrid:GridSwitchColumnPadding="5"HeaderText="Active"MappingName="is_active"TextAlignment="Center"HeaderTextAlignment="Center"/>
SfDataGrid:SfDataGrid.Columns>
SfDataGrid:SfDataGrid>
How can I handle the change of theGridSwitchColumn to run my webservice which will activate if Inactive and Deactivate if Active?
Thanks,

7 Replies
VP Vimal Prabhu Manohkaran Syncfusion Team December 11, 2017 09:08 AM UTC

Hi Jassim,

Thanks for contacting Syncfusion support. Your requirement can be achieved by writing a custom SwitchRenderer and replacing the existing SwitchRenderer of the SfDataGrid with your custom SwitchRenderer. Inside this custom SwitchRenderer you can access the Switch element directly and can hook the toggled event of the Switch control. Hence you can decide the operation to be performed inside the event handler, based on the toggle value. Please refer the below code snippets.

Your XAML PAGE.cs file  
public partial class SfDataGridPage : ContentPage 
{ 
    // Field to notify that the SfDataGrid has been loaded in view 
    public static bool isGridLoaded = false; 
 
    public SfDataGridPage() 
    { 
        InitializeComponent(); 
        dataGrid.GridLoaded += DataGrid_GridLoaded; 
 
        // Removes the existing SwitchRenderer 
        this.dataGrid.CellRenderers.Remove("Switch"); 
 
        // References the custom switch renderer to the SfDataGrid 
        this.dataGrid.CellRenderers.Add("Switch",new MySwitchRenderer()); 
    } 
 
    private void DataGrid_GridLoaded(object sender, GridLoadedEventArgs e) 
    { 
        isGridLoaded = true; 
    } 
} 

For illustration purpose we have changed the width of the column based on the toggle value of the switch control. You can call your web service or perform any other desired operations here.
Custom SwitchRenderer.cs 
public class MySwitchRenderer : GridCellSwitchRenderer 
{ 
    public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfSwitchControl view) 
    { 
        base.OnInitializeDisplayView(dataColumn, view); 
        view.Toggled += View_Toggled; 
    } 
 
    private void View_Toggled(object sender, Xamarin.Forms.ToggledEventArgs e) 
    { 
        // Checked condition to skip execution of codes before SfDataGrid is loaded 
        if(SfDataGridPage.isGridLoaded) 
        { 
            if (e.Value == false) 
                // Set the width of first column as 100 if toggled is false 
                DataGrid.Columns[0].Width = 100; 
            else 
                // Set the width of first column as 200 if toggled is true 
                DataGrid.Columns[0].Width = 200; 
        } 
    } 
} 
 
Note : By default the GridColumn.AllowEditing property for the switch column will be true. If set to false, the toggle interactions of the switch will not be listened.  

Regards,
Vimal Prabhu 


JR Jassim Rahma December 11, 2017 11:01 AM UTC

What can't it be just Toggled event?

It will be great if this will be implemented in future releases..



AN Ashok N Syncfusion Team December 12, 2017 10:21 AM UTC

Hi Jassim, 
 
Thanks for the feedback.  
 
At present, we do not have this in our feature consideration list, however, we will check on this and add this to our queue based on our validation. We will inform you if we implement this in our future release.  
 
Regards, 
Ashok 


MI Mik replied to Vimal Prabhu Manohkaran May 16, 2018 07:25 AM UTC

Hi Jassim,

Thanks for contacting Syncfusion support. Your requirement can be achieved by writing a custom SwitchRenderer and replacing the existing SwitchRenderer of the SfDataGrid with your custom SwitchRenderer. Inside this custom SwitchRenderer you can access the Switch element directly and can hook the toggled event of the Switch control. Hence you can decide the operation to be performed inside the event handler, based on the toggle value. Please refer the below code snippets.

Your XAML PAGE.cs file  
public partial class SfDataGridPage : ContentPage 
{ 
    // Field to notify that the SfDataGrid has been loaded in view 
    public static bool isGridLoaded = false; 
 
    public SfDataGridPage() 
    { 
        InitializeComponent(); 
        dataGrid.GridLoaded += DataGrid_GridLoaded; 
 
        // Removes the existing SwitchRenderer 
        this.dataGrid.CellRenderers.Remove("Switch"); 
 
        // References the custom switch renderer to the SfDataGrid 
        this.dataGrid.CellRenderers.Add("Switch",new MySwitchRenderer()); 
    } 
 
    private void DataGrid_GridLoaded(object sender, GridLoadedEventArgs e) 
    { 
        isGridLoaded = true; 
    } 
} 

For illustration purpose we have changed the width of the column based on the toggle value of the switch control. You can call your web service or perform any other desired operations here.
Custom SwitchRenderer.cs 
public class MySwitchRenderer : GridCellSwitchRenderer 
{ 
    public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfSwitchControl view) 
    { 
        base.OnInitializeDisplayView(dataColumn, view); 
        view.Toggled += View_Toggled; 
    } 
 
    private void View_Toggled(object sender, Xamarin.Forms.ToggledEventArgs e) 
    { 
        // Checked condition to skip execution of codes before SfDataGrid is loaded 
        if(SfDataGridPage.isGridLoaded) 
        { 
            if (e.Value == false) 
                // Set the width of first column as 100 if toggled is false 
                DataGrid.Columns[0].Width = 100; 
            else 
                // Set the width of first column as 200 if toggled is true 
                DataGrid.Columns[0].Width = 200; 
        } 
    } 
} 
 
Note : By default the GridColumn.AllowEditing property for the switch column will be true. If set to false, the toggle interactions of the switch will not be listened.  

Regards,
Vimal Prabhu 


How can I disable switch on certain cell?
If I have a Grid with 3 rows I want to disable only the switch on cell 2.

Thanks

AN Ashok N Syncfusion Team May 17, 2018 11:53 AM UTC

Hi Mik,  
  
You can achieve your requirement by customizing GridCellSwitchRenderer and add this custom renderer to SfDataGrid.CellRenderers. Please refer the below code example: 
 
// Add renderer  
public MainPage() 
{ 
    InitializeComponent(); 
    dataGrid.CellRenderers.Remove("Switch"); 
    dataGrid.CellRenderers.Add("Switch", new GridCellSwitchRendererExt()); 
} 
 
// custom renderer class  
public class GridCellSwitchRendererExt : GridCellSwitchRenderer 
{ 
    public GridCellSwitchRendererExt() 
    { 
 
    } 
 
    public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfSwitchControl view) 
    { 
        base.OnInitializeDisplayView(dataColumn, view); 
        if (dataColumn.GridColumn.MappingName == "IsClosed") 
        { 
            if ((dataColumn.RowData as OrderInfo).IsClosed) 
                view.IsVisible = true; 
            else 
                view.IsVisible = false; 
        } 
    } 
 
    protected override void OnUpdateCellValue(DataColumnBase dataColumn) 
    { 
        base.OnUpdateCellValue(dataColumn); 
        if ((dataColumn as IElement).Element != null) 
        { 
            var view = (((dataColumn as IElement).Element as ContentView).Content as SfSwitchControl); 
            if (view != null && dataColumn.GridColumn.MappingName == "IsClosed") 
            { 
                if ((dataColumn.RowData as OrderInfo).IsClosed) 
                    view.IsVisible = true; 
                else 
                    view.IsVisible = false; 
            } 
        } 
    } 
} 
 
 
Regards, 
Ashok

AL Alberto May 24, 2018 03:50 PM UTC

It works, but...

How do you get the object that is binded to that row?

I mean, the SfDataGrid has a ItemsSource to a collection of personal objects (for example, an ObservableList of MyObjects) When I toggle the checkbox, the method associated ("View_Toggled") is called correctly. But inside that method, I'm unable to find the way to retrieve the object representing the entire row.

Thanks.

SK Suriya Kalidoss Syncfusion Team May 25, 2018 07:25 AM UTC

Hi Alberto, 
 
Thank you for using Syncfusion Products. You can retrieve the object representing entire row by creating instance to view model collection. We had attached sample for your reference. 
 
 Please refer the below code snippet to achieve your requirement. 
To get entire row data 
  vm = new ViewModel(); 
  var entiredata = vm.OrdersInfo; 
To get data based on specific column 
  var specific = vm.OrdersInfo.Where(x => x.IsClosed); 
 
To get data based on specific column in renderer. 
  public class GridCellSwitchRendererExt : GridCellSwitchRenderer 
    { 
        public GridCellSwitchRendererExt() 
        { 
 
        } 
 
        public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfSwitchControl view) 
        { 
            base.OnInitializeDisplayView(dataColumn, view); 
            var data = dataColumn.GridColumn.MappingName == "IsClosed"; 
         //returns row data of specific column. 
            if (dataColumn.GridColumn.MappingName == "IsClosed") 
            { 
               
                if ((dataColumn.RowData as OrderInfo).IsClosed) 
                    view.IsVisible = true; 
                else 
                    view.IsVisible = false; 
            } 
        } 
 
    } 
 
 
Regards, 
Suriya K 


Loader.
Up arrow icon