1. Home
  2. Forum
  3. Xamarin.Forms
  4. Select datagrid rows via a checkbox column

Select datagrid rows via a checkbox column

Hey,

We would like to add a check box column (unbound column) to a data grid for selecting rows. Is this possible?

Thanks,
Mano



3 Replies
DS Divakar Subramaniam Syncfusion Team June 7, 2018 06:31 AM UTC

Hi Mano, 
  
 
Thanks for contacting Syncfusion Support. 
 
You can able to add check box column in SfDataGrid by adding GridSwitchColumn in SfDataGrid.Columns collection. Please refer the below code snippet, 
  
// In Model class 
public bool IsClosed 
{ 
    get { return this.isClosed; } 
    set { this.isClosed = value; RaisePropertyChanged("IsClosed"); } 
} 
// In XAML 
<sfgrid:SfDataGrid.Columns> 
    <sfgrid:GridTextColumn MappingName="Customer" HeaderText="Customer"/> 
    <sfgrid:GridTextColumn MappingName="ShipCountry" HeaderText="Ship Country"/> 
    <sfgrid:GridSwitchColumn MappingName="IsClosed"/> 
    <sfgrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/> 
</sfgrid:SfDataGrid.Columns> 
 
 
Also, you can able to select a row based on the Switch’s IsToggled property. You can achieve this requirement by subclass the GridCellSwitchRenderer class. Please refer the below code snippet, 
 
grid.CellRenderers.Remove("Switch"); 
grid.CellRenderers.Add("Switch", new GridSwitchRendererExt()); 
public class GridSwitchRendererExt : GridCellSwitchRenderer 
{ 
    public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfSwitchControl view) 
    { 
        base.OnInitializeDisplayView(dataColumn, view); 
        view.Toggled += (sender, e) => 
        { 
            if (e.Value) 
            { 
                dataColumn.Renderer.DataGrid.SelectedItems.Add(dataColumn.RowData); 
            } 
            else 
            { 
                dataColumn.Renderer.DataGrid.SelectedItems.Remove(dataColumn.RowData); 
            } 
            dataColumn.Renderer.DataGrid.UpdateDataRow(dataColumn.RowIndex); 
        }; 
    } 
} 
 
 
In the above code, we have selected the row if the check box is checked otherwise removed the selection. You can modify the code based on your requirement. We have prepared a sample for your reference and you can download the same from the below link, 
 
Regards, 
Divakar. 


MS Mano Sadeh June 7, 2018 11:57 AM UTC

Thanks. Can we do this without binding the column to our model? Maybe by using an Unbound column?

Thanks
Mano

DS Divakar Subramaniam Syncfusion Team June 8, 2018 05:22 AM UTC

Hi Mano, 
 
In SfDataGrid, it is not possible to load CheckBox/Switch inside an Unbound column. However, you can achieve your requirement using GridTemplateColumn available in SfDataGrid. Please refer the below code snippet, 
 
<sfgrid:GridTemplateColumn MappingName="Order"> // Here Order is not in the column collection. You can give any name here as your wish. 
    <sfgrid:GridTemplateColumn.CellTemplate> 
        <DataTemplate> 
            <Switch IsToggled="False"></Switch> // By default set IsToggle as "False" since you don't want to bind any Model property here. 
        </DataTemplate> 
    </sfgrid:GridTemplateColumn.CellTemplate> 
</sfgrid:GridTemplateColumn> 
 
// In Code-behind 
 
grid.CellRenderers.Remove("Template"); 
grid.CellRenderers.Add("Template", new GridTemplateRendererExt()); 
 
public class GridTemplateRendererExt : GridCellTemplateRenderer 
{ 
    public override void OnInitializeDisplayView(DataColumnBase dataColumn, View view) 
    { 
        base.OnInitializeDisplayView(dataColumn, view); 
        var gridCell = (dataColumn as IElement).Element as GridCell; 
        var switchCell = gridCell != null ? gridCell.Content as Switch : null; 
        if(switchCell != null) 
        { 
            switchCell.IsToggled = (dataColumn.RowData as OrderInfo).IsClosed; 
            switchCell.Toggled += (sender, e) => 
            { 
                if (e.Value) 
                { 
                    (dataColumn.RowData as OrderInfo).IsClosed = true; 
                    dataColumn.Renderer.DataGrid.SelectedItems.Add(dataColumn.RowData); 
                } 
                else 
                { 
                    (dataColumn.RowData as OrderInfo).IsClosed = false; 
                    dataColumn.Renderer.DataGrid.SelectedItems.Remove(dataColumn.RowData); 
                } 
                dataColumn.Renderer.DataGrid.UpdateDataRow(dataColumn.RowIndex); 
            };         
        }  
    } 
 
    protected override void OnUpdateCellValue(DataColumnBase dataColumn) 
    { 
        base.OnUpdateCellValue(dataColumn); 
        // Update the row since to maintain the switch in the correct toggled state 
        dataColumn.Renderer.DataGrid.UpdateDataRow(dataColumn.RowIndex); 
    } 
 
} 
 
We have attached our working sample for your sample and you can download the same from the below link, 
 
Please note, we have prepared this sample specially to achieve your requirement. Actual behavior of SfDataGrid is to bind any Model property to the columns as we provided in our previous update. 
 
Regards, 
Divakar. 


Loader.
Up arrow icon