Custom CellStyle for Column doesn't work with Multibinding converter and other issues

[Tobias Horn]

Hi,
I'm trying to implement a custom cellstyle on each of my columns with an Multibinding converter.
.net8, Windows, Sf 24.1.41

See my xaml below. I encounter following issues:

1. when I apply the  datagridbackgroundcolorconverter on the whole datagrid, nearly the first row is not not colored correctly, but only the last 3-4 items. the second and following rows all items colored correctly. I tried this by having an "empty" converter returning always e.g. Color.Red.
2. when trying to apply the again for testing "empty" datagridbackgroundcolorconverter returning always Red, only on the e.g.  <!-- 3 {GridSaveTheDate}--> Column by 

   <Style TargetType="syncfusion:DataGridCell"  x:Key="customCellStyle" >

            <Setter Property="Background">

                <Setter.Value>

                    <MultiBinding Converter="{StaticResource Key=datagridbackgroundcolorconverter}" >

                        <Binding Source="{RelativeSource Mode=Self}" />

                        <Binding Path="GridSaveTheDateCompleted" />

                    </MultiBinding>

                </Setter.Value>

            </Setter>         

        </Style>
   without the second Style using the key, so the only Style def in my xaml as above, Then the converter is not called at all.

3. when using the code as below, the column savethedate is colored correctly (in my test blue), but the last item in the last column is colored the same as savethedate also blue without having any specific custom cellstyle.

4. futrhermore as soon as I try to use key and cellstyle together with an converter (single or multibinding, the converter is not called.

Therefore, can you provide an example/fix, where a custom Column cellstyle can be applied by using a multibinding converter?

Thanks in advance,

Tobias 

 <ContentPage.Resources>

     <helpers:DatagridBackgroundColorConverter x:Key="datagridbackgroundcolorconverter"/>

     <helpers:DatagridTextColorConverter x:Key="datagridtextcolorconverter"/>

     <Style TargetType="syncfusion:DataGridCell">

         <Setter Property="Background">

             <Setter.Value>

                 <MultiBinding Converter="{StaticResource Key=datagridbackgroundcolorconverter}" >

                     <Binding Source="{RelativeSource Mode=Self}" />

                     <Binding Path="GridSaveTheDateCompleted" />

                 </MultiBinding>

             </Setter.Value>

         </Setter>         

     </Style>

     <Style TargetType="syncfusion:DataGridCell" x:Key="customCellStyle">

         <Setter Property="Background" Value="#0074E3"/>

     </Style>

 </ContentPage.Resources>

 <ContentPage.BindingContext>

     <vm:PartyItemsViewModel />

 </ContentPage.BindingContext>

 <Grid>

  <sfDG:SfDataGrid

         x:Name="dataGrid"

         AutoGenerateColumnsMode="None"

         ItemsSource="{Binding GridItems, Mode=OneWay}"

         SortingMode="Single"

         AllowEditing="True"

         SelectionMode="SingleDeselect"

         NavigationMode="Cell"

         ColumnWidthMode="FitByCell">

         <sfDG:SfDataGrid.DefaultStyle>

             <sfDG:DataGridStyle SelectionBackground="{StaticResource MainLight}" HeaderRowBackground="{StaticResource MainMedium}" HeaderRowTextColor="{StaticResource White}" RowBackground="{StaticResource MainBackground}" RowTextColor="{StaticResource Black}"/>

         </sfDG:SfDataGrid.DefaultStyle>

        

             <!-- 3 {GridSaveTheDate}-->

             <sfDG:DataGridDateColumn

                 HeaderText="SaveTheDate"

                 MappingName="GridSaveTheDate"

                 Format="dd.MM.yyyy"

                 Width="100"

                 CellStyle="{StaticResource customCellStyle}"/>

[Nirmalkumar Yuvaraj]

Hi Tobias,

Query	Response
when I apply the  datagridbackgroundcolorconverter on the whole datagrid, nearly the first row is not not colored correctly, but only the last 3-4 items. the second and following rows all items colored correctly. I tried this by having an "empty" converter returning always e.g. Color.Red.	Based on the information provided, we conducted tests using a simple sample to replicate the reported issues. However, we were unable to reproduce the issues as described. In our sample, we applied the converter to the SfDataGrid, and the color was successfully applied to the entire datagrid.   We have tested this scenario using the attached sample, and it worked correctly without any issues. If you are still encountering the same problem, we kindly request you to modify the attached sample to reproduce the issue and provide additional details. This will greatly assist us in further investigating the issue and providing an appropriate solution as quickly as possible.
when trying to apply the again for testing "empty" datagridbackgroundcolorconverter returning always Red, only on the e.g.  <!-- 3 {GridSaveTheDate}--> Column by	To better assist you with your query, could you please state the reason for using multibinding?
when using the code as below, the column savethedate is colored correctly (in my test blue), but the last item in the last column is colored the same as savethedate also blue without having any specific custom cellstyle. futrhermore as soon as I try to use key and cellstyle together with an converter (single or multibinding, the converter is not called.	We have conducted extensive tests using the provided sample, but we were unable to reproduce the reported issues. Throughout our testing, we observed that the color is applied only to the specified column and not to the others. we observed that the converter is called properly. We kindly request you to review the modified sample attached in this response, along with the accompanying output reference video for your convenience.

It appears that you are using an older version of SfDataGrid. Please update it to the latest version, which is 24.2.6.

Regards,

Nirmalkumar

Attachment: SfDataGrid_BindingIssue_3ca10867.zip

[Tobias Horn]

Dear Nirmalkumar, 

EDIT:

I checked again and your code works for the 1st, 3rd and 4th query, where you also attached a video to proof the functionality. the 2nd query however doesn'T work and you also didn't send a video for this one.

This is exactly the query I would need. A multibinding converter attached to a customcellstyle for a column.

All other cases work as expected, but this one not.

What I want to achieve and why (I think) I need the multibinding converter attached to a customcellstyle for a column.
I have a couple of dates for tasks in my grid and upon completion, I want to longpress the date to mark it as completed and change the color e.g. grey it out.

therefore my datagrids binding source has for each task date a bool completed e.g. "homework" and "homeworkcompleted". the bool is not shown in the grid but when the column homework is created the multibinding should check the completed status and set color accordingly.

a workaround would be to have a multibinding style on the whole grid (which is wokring (query 1) and finding by headername the correct "completed" bool to check. it just doesn't feel right and maybe slows the grid down with large number of entries, if alwas all bools are send to the converter, when it would be more apporpriate to have a designated converter per column, that only gets the needed data.

oh furthermore, I described some other styling errors, but I could resolve them. Earlier versions of Datagrid had an issue of crashing, when the first click was into the header for sorting. therefore I implemented programmatically the first row to get selected after creating my grid underlying database. this seems to have caused the styling errors.

fortunately the crashing issue is fixed in the meantime and i don't need the selection as first action not anymore.

Thanks already in advance,

Toby

FIRST REPLY:

Thanks for your reply. Indeed with your example, the datagrid works as expected in my Environment as well. 

A key difference I can spot, would be my binding source and the time, when the Binding source is created. My GridItems is created in the viewmodel and is a one way copy of an online database (the reason why im doing this: the online database items (realm) need a dedicated write command and then the edit function of datagrid produces an error. the griditems creation is triggered by an OnAppearing method of the Page (in contentpage.behaviour). maybe there's an overlap with datagrid creation and underlying database. 

is there a way to tap into debugging of datagrid creation when the converter is not triggered? 

i will try to create the GridItems beforehand and see what happens. 

Is there any command/way to trigger a refresh of the datagrid view including the style triggers?

the reason i need multibinding is because i need to Set a color depending on cells value and a bool variable. 

if you maybe know how to change datagrids edit command to use realms writecommand or trigger the write command, please let me know. 

thanks in advance, 

Toby 

[Nirmalkumar Yuvaraj]

Hi Tobias,

Based on the information provided, 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 depicted two scenarios:

Scenario 1: We have prepared a sample that utilizes a boolean value from the model class. In this sample, when the boolean flag is changed in the CellLongPress event, it only triggers if it is a DataGridDateColumn with a mapping name of “HireDate”. It then activates the converter, and the color is applied accordingly.

Scenario 2: We have prepared a sample that utilizes a boolean value from the ViewModel class. In this sample, when the boolean flag is changed in the CellLongPress event, it triggers the converter, and the color is applied accordingly.

If these solutions don't precisely match your requirements, please modify the attached sample to ensure reproducibility. This will enable us to investigate further and provide a solution promptly.

Regards,

Nirmalkumar

Attachment: SfDataGridSample_9e418dba.zip

[Tobias Horn]

Hi Nirmalkumar,

sorry maybe I was unclear. What I would need:

A multibinding Customcellstyle applied to a single column of my grid. Exactly what you did in your first answer as query 2 (which is not working). You showed videos for query 1,3,4 but not for 2. When I use the code below for query 2, the convberter is not called. please fix the code below:

<ContentPage.Resources>

       

        <!-- Second Query -->

         <local:DatagridBackgroundColorConverter x:Key="datagridbackgroundcolorconverter"/>

        <Style TargetType="syncfusion:DataGridCell" x:Key="customCellStyle">

            <Setter Property="Background">

                <Setter.Value>

                    <MultiBinding Converter="{StaticResource datagridbackgroundcolorconverter}" >

                        <Binding Source="{RelativeSource Mode=Self}" />

                        <Binding Path="GridSaveTheDateCompleted" />

                    </MultiBinding>

                </Setter.Value>

            </Setter>

        </Style>

 </ContentPage.Resources>

    <syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Employees}">

        <syncfusion:SfDataGrid.Columns>

            <!-- Second Third and Fourth Query -->

            <syncfusion:DataGridDateColumn MappingName="HireDate" CellStyle="{StaticResource customCellStyle}"/>

        </syncfusion:SfDataGrid.Columns>

    </syncfusion:SfDataGrid>

</ContentPage>

Best regards and thanks for your help,

Toby

[Nirmalkumar Yuvaraj]

Hi Tobias,

Based on the information provided, it seems that you're attempting to change the cell background color of the GridSaveTheDate column to grey based on a boolean value GridSaveTheDateCompleted. You can achieve this by passing GridSaveTheDateCompleted in the setter value binding, the converter will automatically be invoked when the value of GridSaveTheDateCompleted changes. We have attached a code snippet, a modified sample, and an output video for your reference.

Code Snippet:

<Style TargetType="syncfusion:DataGridCell" x:Key="customCellStyle">

    <Setter Property="Background"

Value="{Binding GridSaveTheDateCompleted, Converter={StaticResource Key=converter}, ConverterParameter={x:Reference viewModel}}"/>

</Style> 

 

  <syncfusion:DataGridDateColumn MappingName="GridSaveTheDate" CellStyle="{StaticResource customCellStyle}"/>

If this does not meet your requirements, please provide details on how you would like to change the color of the datagrid cell. Any additional information you can provide would be greatly appreciated, as it will allow us to offer you a more accurate and helpful solution. Additionally, if possible, please provide a video demo or modify the attached sample that may assist us in better understanding your request.

Regards,

Nirmalkumar

Attachment: SfDataGridSample_DateSelection_1712b0e9.zip

[Tobias Horn]

Hi Nirmalkumar, 

Thanks for your reply. 

You are correct, that I want to change the backgroundcolor  of the cell to grey, according to gridsavetgedatecompleted to be true or false. 

however, the BackgroundColor should also change according to the cells value as well. 

i'm creating a task planer. for each task (e. g. "savethedate"), i have a Variable that stores the due date (e. g. GridSaveTheDate). the BackgroundColor should change depending on the time left between now and the due date (e.g. if it's more than 4 days away = color green, between 4 and 2 days away = color orange and less than 2 days = color red. 

upon completion (gridsavetgedatecompleted = true) the BackgroundColor should change to grey. 

i have to have those to separate Variables (gridsavetgedate and gridsavetgedatecompleted) as they are stored in an online database to sync across devices) 

what's also important in this color functionality: if the value for gridsavetgedatecompleted is changed on another device and automtically synced to the local gridsavetgedatecompleted variable, it should trigger automatically the update of the grid to tge correct color. 

hope this makes it clearer. 

Thanks again for all your help, its highly appreciated, 

Toby 

[Sethupathy Devarajan]

Hi Tobias,

 

To better assist you with your query, could you kindly provide us with more details regarding your requirements? Specifically, please provide details on data population , GridSaveTheDateCompleted and GridSaveTheDate is belongs to collection which is bound as a Itemsource for DataGrid? or Its a property available in ViewModel? Any additional information you can provide would be greatly appreciated, as it will allow us to provide you with a more accurate and helpful solution. Additionally, if possible, please provide a code snippet , Image or any other re levant details that may help us better understand your request.

 

Regards,

Sethupathy Devarajan.