How to handle GridSwitchColumn change?

Question

Hi,I have below SFDataGrid: 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,Jassim

Vimal Prabhu Manohkaran · Answer

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

Jassim Rahma · Answer

What can't it be just Toggled event?It will be great if this will be implemented in future releases..

Ashok N · Answer

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

Mik · Answer

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

Ashok N · Answer

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; 
            } 
        } 
    } 
} 
 
Sample : http://www.syncfusion.com/downloads/support/forum/134979/ze/SfDataGridSample_(2)2059621852  
 
Regards, Ashok

Alberto · Answer

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.

Suriya Kalidoss · Answer

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; 
            } 
        } 
 
    } 
 
Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridSample1011024448 
 
Regards, 
Suriya K