Coloring Flex Grid (Xamarin) row by condition from value in Items source

Posted by: sbuescher on 25 September 2024, 9:29 pm EST

  • Posted 25 September 2024, 9:29 pm EST

    Hello,

    i have trouble coloring rows by a condition from the flex grid items source value.

    My way i tried it is using a IValueConverter for the RowBackgroundColor of the FlexGrid.

    My problems are:

    1.) How to bind a value from the items source to the Converter.

    2.) The converter should be fired for every row in the grid to determine the needed row color, so is this the correct approach to use the RowBackgroundColor of the FlexGrid?

    Here is the items source Model :

        public class ProtListWarehouseUldDataModel
        {
            // ULD_EQP_NR, SC_NR, SHP_WHS_LOC_DES_TXT, ULD_ORG_CNY_CD, ULD_DST_CNY_CD, LOAD_PCT, NUM_PKG, VOL_LOD_TYP_CD, BELT, COMMENTS, OUB_SRT_DT
            public string ULD_EQP_NR { get; set; }
            public string SC_NR { get; set; }
            public string SHP_WHS_LOC_DES_TXT { get; set; }
            public string ULD_ORG_CNY_CD { get; set; }
            public string ULD_DST_CNY_CD { get; set; }
            public int LOAD_PCT { get; set; }
            public int NUM_PKG { get; set; }
            public string VOL_LOD_TYP_CD { get; set; }
            public string BELT { get; set; }
            public string COMMENTS { get; set; }
            public string OUB_SRT_DT { get; set; }
        }

    The binding shoud be using the NUM_PKG as coloring condition like >10 Color green < 10 & >5 Color yellow a.s.o.

    Here are the flex definiton from the xaml:

                <c2:FlexGrid x:Name="ProtListFlexGrid" AutoGenerateColumns="False" FontAttributes="Bold" IsReadOnly="True" AllowResizing="None" ZoomMode="Disabled" ColumnHeaderFontAttributes="Bold"
                             HeightRequest="450" RowBackgroundColor="{Binding obsProtListWarehouseData.NUM_PKG, Converter={StaticResource WhsProtListRowColorConverter}}"
                             ItemsSource="{Binding obsProtListWarehouseData}" >
                    <c2:FlexGrid.Columns>
                        <c2:GridColumn Binding="SHP_WHS_LOC_DES_TXT" Header="WarehouseLoc." Width="Auto"/>
                        <c2:GridColumn Binding="NUM_PKG" Header="#Pkgs" Width="*"/>
                    </c2:FlexGrid.Columns>              
                </c2:FlexGrid>

    Hope someone can help me.

    Many Thx and Regards

    Sascha

  • Posted 26 September 2024, 5:01 am EST

    Hi Sascha,

    The best way to apply conditional formatting to FlexGrid rows is by creating a custom CellFactory that inherits from the GridCellFactory class and overriding the PrepareCell method. Please refer to the attached Xamarin.Forms sample project for a simple implementation.

    Attachment: FlexGridConditional.zip

    Best Regards,

    Kartik

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels