Changing column colors

[Phunction]

I am trying to programmatically change column background colors based on a flag.

I have a simple List that contains a 1 or 0, based on that I change the grids column color.

In the xaml I have:

<ContentPage.Resources>

    <local:CustemViewColumnColor x:Key="converter"/>

    <Style TargetType="syncfusion:DataGridCell">

        <Setter Property="Background" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=converter}}"/>

    </Style>

</ContentPage.Resources>

In my converter I check the flag and return either a white color or a red color.

I use the celltapped event to toggle the flag.

Right now, the column only changes color on the initial view load, however when I tap the cell, it does not live update the column color even though the flag is set.

I have tried using Invalidate() and Layout() to force a refresh in the celltapped event, but I cannot get the grid to update with the new column color. How do I do that?

[Nirmalkumar Yuvaraj]

Hi Phunction,

Based on the provided code snippet, we're uncertain about your requirements, particularly regarding the placement of the boolean flag—whether it belongs in the model class or the viewmodel class. To address this uncertainty and align with our understanding of your needs, we've prepared a sample that utilizes a boolean value from the model class. In this sample, when the bool flag is changed in the celltapped event, it triggers the converter, and the color is applied accordingly. If this solution doesn't match your requirements precisely, please modify the attached sample to ensure reproducibility. This will enable us to investigate further and provide a solution promptly.

Regards,

Nirmalkumar

Attachment: SfDataGridSample_38b3ed1c.zip

[Phunction]

I have a grid with 4 columns and a list like this:

List<int> columns = new List<int>()

columns.add(0)

columns.add(1)

columns.add(1)

columns.add(0)

This is the tapped evenet:

private void _gridCustomView_CellTapped(object sender, Syncfusion.Maui.DataGrid.DataGridCellTappedEventArgs e)

{

    int nCol = e.RowColumnIndex.ColumnIndex;

    if ( columns .Count > nCol)

    {

        if ( columns [nCol] == 1)

        columns[nCol] = 0;

        else

             columns[nCol] = 1;

    }

}

My Converter (CustemViewColumnColor ) :

object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)

{

    var gridCell = (value as DataGridCell);

    var columnIndex = gridCell.ColumnIndex;

    if ( columns Count > columnIndex)

    {

        if ( columns[columnIndex] == 1)

            return Colors.Red;

    }

    return Colors.White;

}

In xaml:

<local:CustemViewColumnColor x:Key="converter"/>

<Style TargetType="syncfusion:DataGridCell">

    <Setter Property="Background" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=converter}}"/>

</Style>

This works on the inital page load as List columns is setup before loading the page view.

It just does not live udate. The celltapped is triggered.

[Nirmalkumar Yuvaraj]

Hi Phunction,

Based on the provided code snippet, we remain uncertain about your requirements. Is the column, which is of type List<int>, associated with the SfDataGrid in any way? If not, changing the column value in the CellTapped event will not trigger the converter. To better comprehend your query, could you please provide additional details regarding your requirements? Alternatively, you can modify the attached sample to investigate the issue further.

Regards,

Nirmalkumar

Attachment: SfDataGridSample_82e4c8d.zip

[Phunction]

Basically, I want a grid of # columns, say 10 with only one row needed.

There is no data associated with the grid. I just need to be able to have a single column change from white to red and vice versa when the column is tapped. I have a simple list to keep track of which columns are on and which are off.

It does not really need to have a data model back end as it is just used to control if the columns show on another grid. It is a visual way for the user to decide which columns they want to show or hide on the main grid.

But I can use a simple data model if that is needed just to keep track of which columns are on or off.

I attached the sample as to what I was thinking. (The sample you provided did not actually work for me, the columns would not toggle.)

Attachment: SfDataGridSample_7105bfb7.zip

[Nirmalkumar Yuvaraj]

Hi Phunction,

Based on the information provided, it seems that columns of type List<int> are not associated with the data grid in any way. Changing the value of that column will not invoke the converter. To invoke the converter, a value associated with the data grid must be updated. We have modified the attached document to meet your requirements. We changed the binding context of the columnElement, which is the DataGridCell, in the cellTapped event. By doing this, we can manually invoke the converter. When scrolling, the converter will be invoked by default. We have attached a sample for your reference.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Nirmalkumar

Attachment: SfDataGridSample_5d9538f9.zip

[Phunction]

Thanks, that almost works, but it will not toggle back to white. When tapping a cell, it will turn it red, but tapping on that cell again will not turn it back to white.

[Nirmalkumar Yuvaraj]

Hi Phunction,

We conducted extensive tests using the provided sample, but we were unable to reproduce the reported issue. However, during our testing, we observed that the DataGrid column color changes when tapped. We have attached a video for your reference.

Regards,

Nirmalkumar

Attachment: SfDataGrid_video_ec75b7.zip

[Phunction]

I found something, it would only work for me if I scrolled down to the last row then back up.

Try having it only add 1 or 2 data rows, then it will not work, at least for me it did not work.

[Nirmalkumar Yuvaraj]

Hi Phunction,

Upon analyzing the sample, we discovered that the value of the column of type List<int> inside the cell tapped event is being modified for each cell in the data column rather than for each tap. To rectify this issue, we removed that code from the loop. We have made the necessary modifications and attached the updated sample as per your requirements for your reference. If this information proves helpful, we kindly ask you to consider accepting it as the solution. Doing so will facilitate other members in locating it more quickly.

Regards,

Nirmalkumar

Attachment: SfDataGridSample_41740df.zip