1. Home
  2. Forum
  3. Xamarin.Forms
  4. Changing the background colour of row when checkbox is checked

Changing the background colour of row when checkbox is checked

Hi There,

I would like to be able to change the background colour of a row in sfDataGrid when a switch/checkbox control within the sfDataGrid is checked.

I have tried to use a DataTrigger on the GridCell type but the DataTrigger never seems to activate.

I have attached my Xaml code to help with trying to find a resolution.

Attachment: sfDataGrid.txt_4b621611.zip

5 Replies
PK Pradeep Kumar Balakrishnan Syncfusion Team May 11, 2020 05:44 PM UTC

HI Sachin Kanadia, 
 
Thank you for contacting Syncfusion support . 
 
We have checked your requirement “How to change background color of an row when check box in the same row is selected” in Xamarin form. We prepared sample for your requirement in that sample we have cancelled selection touch interaction and row is selected only switch column value is changed. Please refer the following code for reference . 
 
Code Snippet: 
[XAML] 
 
<sfgrid:SfDataGrid x:Name="dataGrid" 
            AutoGenerateColumns="False" 
            ColumnSizer="Star" 
            SelectionMode="Multiple" 
            SelectionChanging="dataGrid_SelectionChanging" 
            SelectedItems="{Binding SelectedIems}" ValueChanged="dataGrid_ValueChanged" 
            ItemsSource="{Binding OrderInfoCollection}" > 
 
    <sfgrid:SfDataGrid.GridStyle> 
        <local:CustomDataGridStyle/> 
    </sfgrid:SfDataGrid.GridStyle> 
 
    <sfgrid:SfDataGrid.Columns> 
        <sfgrid:GridTextColumn MappingName="OrderID"/> 
        <sfgrid:GridTextColumn MappingName="CustomerID"/> 
        <sfgrid:GridTextColumn MappingName="ShipCountry"/> 
        <sfgrid:GridSwitchColumn MappingName="IsChecked" HeaderText="Selected" /> 
 
    </sfgrid:SfDataGrid.Columns> 
 
</sfgrid:SfDataGrid> 
 
private void dataGrid_ValueChanged(object sender, Syncfusion.SfDataGrid.XForms.ValueChangedEventArgs e) 
{ 
    if (e.Column.MappingName == "IsChecked") 
    { 
        if (bool.Parse(e.NewValue.ToString())) 
        { 
            this.viewModel.SelectedIems.Add(e.RowData); 
        } 
        else 
        { 
            this.viewModel.SelectedIems.Remove(e.RowData); 
        } 
    } 
} 
 
private void dataGrid_SelectionChanging(object sender, GridSelectionChangingEventArgs e) 
{ 
    e.Cancel = true; 
} 
     
We have also attached sample for your reference in the following link. 
 
We hope this meets your requirement. Let us know if you need any further assistance on this. 
 
Regards, 
Pradeep Kumar B 
 


SK Sachin Kanadia May 11, 2020 06:22 PM UTC

Hi Pradeep,

Firstly thank you for your thorough response.

I see that the sample that you sent me sets the 'checked' row as selected and you have disabled traditional row selection. This works great but its not what I need :(

What I need is when the checkbox within the row is checked the row background colour is changed BUT at the same time I need the traditional form of row selection to work as usual. I don't know if this is use-case is possible?

Thanks and I look forward to your response.

PK Pradeep Kumar Balakrishnan Syncfusion Team May 12, 2020 10:42 AM UTC

Hi Sachin Kanadia,, 
 
Thank you for the update. 
 
Based on the provided information we have modified the sample for your requirement “Switch column should be toggled based on the respective row selection” in the attached sample we have used SfDataGrid SelectionChanging, SelectionChanged and ValueChanged event to achieve your requirement. Please refer the attached sample for more information. 
 
 
We hope this meets your requirement. Let us know if you need any further assistance on this.  
 
Regards, 
Pradeep Kumar 


SK Sachin Kanadia May 12, 2020 11:27 AM UTC

This matter is not a priority, so consider this matter closed from my side. I do have a feature request that is a priority - ticket number : 14280

If that could be looked into that would be great.

Many Thanks


PK Pradeep Kumar Balakrishnan Syncfusion Team May 13, 2020 03:43 PM UTC

Hi Sachin Kanadia,  
  
Thank you for the update. 
 
We have checked the mentioned feature request feedback ticket. Currently, GridImageColumn cannot be sorted. Please provide the detail on what basis image column should be sorted (example image column should be sorted based on the image type (png, jpg)) it will be helpful for us to validate the feature and provide the solution earlier. 
 
Regards, 
Pradeep Kumar B 
 


Loader.
Up arrow icon