Adding template to grid

[Kunal]

I want to add Template to my grid. I have configured the grid through c# code. Below is the code snippet. How can I add Template in this grid to change the background colour based on the value of a column?

public SfGrid<ExpandoObject>[] sfGrid;

public List<List<ExpandoObject>> dataGridView1 = new();

foreach (string PanelId in channelsIds)

{

     PanelModel panel = new PanelModel

     {

         Id = PanelId + "_layout",

         Column = columnindex,

         Row = rowindex,

         SizeX = 1,

         SizeY = 1,

         Enabled = true,

         Content = new RenderFragment(async builder =>

         {

             if (dataGridView1 == null)

                 return;

             if (dataGridView1.Count == null || dataGridView1.Count == 0)

             {

             }

             else

             {

                 builder.OpenComponent<SfGrid<ExpandoObject>>(0);

                 if (int.TryParse(PanelId, out int index) && index >= 0 && dataGridView1 != null && index <                                      dataGridView1.Count)

                 {

                     builder.AddAttribute(1, "DataSource", dataGridView1[index]);

                 }

                 builder.AddAttribute(2, "RowHeight", rowHeights[Convert.ToInt16(PanelId)]);

                builder.AddComponentReferenceCapture(3, (value) =>

               {

                   sfGrid[Convert.ToInt32(PanelId)] = value as SfGrid<ExpandoObject>;

               });

              builder.CloseComponent();

        }

})

 panelList.Add(panel);

 await dashboardObject.AddPanelAsync(panel);

     if (columnindex < 5)

     {

         columnindex++;

     }

     else

     {

         columnindex = 0;

         rowindex++;

     }

 

};

[Prathap Senthil]

Hi Kunal,

Based on your requirement, we suggest using the QueryCellInfo event to achieve your requirement. The QueryCellInfo event triggers every time a request is made to access cell information, element, or data and also before the cell element is appended to the DataGrid element. Using this event to, you can achieve your requirements according to your needs. We have already documented this topic, kindly refer to the below documentation for your reference.

Comp.cs
    public class Comp<T> : SfGrid<T>

    {

   

        public async Task RowSelected(Syncfusion.Blazor.Grids.RowSelectEventArgs<T> args)

        {

            //perform your action here

        }

        public void CustomizeCell(QueryCellInfoEventArgs<T> args)

        {

            if (args.Column.Field == "Freight")

            {

                var data = args.Data as IDictionary<string, object>;

                double FreightValue = Convert.ToDouble( data["Freight"]);

 

                if (FreightValue < 30)

                {

                    args.Cell.AddClass(new string[] { "below-30" });

                }

                else if (FreightValue < 80)

                {

                    args.Cell.AddClass(new string[] { "below-80" });

                }

                else

                {

                    args.Cell.AddClass(new string[] { "above-80" });

                }

            }

        }

        //take Grid instance

        private SfGrid<T> GridRef { get; set; }

        protected override void BuildRenderTree(RenderTreeBuilder builder)

        {

            builder.OpenComponent<SfGrid<T>>(0);
----------------------

                //grid events

                //TValue="B2B_MISSINGPRODUCT" OnActionFailure="@ActionFailure" OnBatchSave="CallbackMISSINGPRODUCT"

                inner.OpenComponent<GridEvents<T>>(36);

                inner.AddAttribute<Syncfusion.Blazor.Grids.RowSelectEventArgs<T>>(37, "RowSelected", EventCallback.Factory.Create<Syncfusion.Blazor.Grids.RowSelectEventArgs<T>>(this, RowSelected));

                inner.AddAttribute<Syncfusion.Blazor.Grids.QueryCellInfoEventArgs<T>>(38, "QueryCellInfo", EventCallback.Factory.Create<Syncfusion.Blazor.Grids.QueryCellInfoEventArgs<T>>(this, CustomizeCell));

 

                inner.CloseComponent();

                inner.OpenComponent<GridColumns>(40);

                inner.AddAttribute(41, "ChildContent", (RenderFragment)((_builder1) =>

                {

                    int sequencestarts = 300;

                    foreach (var item in (IDictionary<string, object>)DataSource.First())

                    {

                      

                            _builder1.OpenComponent(42, typeof(Syncfusion.Blazor.Grids.GridColumn));

                            _builder1.AddAttribute(43, "Field", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.String>(item.Key.ToString()));

                            if (item.Key == "OrderID")

                            {

                                _builder1.AddAttribute(44, "IsPrimaryKey", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Boolean>(true));

                            }

 

                        _builder1.CloseComponent();

                            _builder1.AddMarkupContent(50, "\r\n");

                       

                    }

                }));

                inner.CloseComponent();

            }));

            builder.AddAttribute(55, nameof(Toolbar), new List<string>() { "Add", "Edit", "Cancel", "Update" });

            builder.AddComponentReferenceCapture(56, inst => { GridRef = (SfGrid<T>)inst; });

            builder.CloseComponent();

        }      

    }

}

Index.Razor

<div style="width:calc(100vw - 20rem); height:calc(100vh - 7rem);">

    <Comp DataSource="Orders"></Comp>

</div>

<style>

    .below-30 {

        background-color: orangered;

    }

 

    .below-80 {

        background-color: yellow;

    }

 

    .above-80 {

        background-color: greenyellow

    }

</style>

@code {

 

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 75).Select((x) =>

        {

            dynamic d = new ExpandoObject();

            d.OrderID = 1000 + x;

            d.CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)];

            d.Freight = (new double[] { 2, 1, 4, 5, 3 })[new Random().Next(5)] * x;

            d.OrderDate = (new DateTime[] { new DateTime(2010, 11, 5), new DateTime(2018, 10, 3), new DateTime(1995, 9, 9), new DateTime(2012, 8, 2), new DateTime(2015, 4, 11) })[new Random().Next(5)];

            d.ShipCountry = (new string[] { "USA", "UK" })[new Random().Next(2)];

            d.Verified = (new bool[] { true, false })[new Random().Next(2)];

 

            return d;

        }).Cast<ExpandoObject>().ToList<ExpandoObject>();

 

    }

    public List<ExpandoObject> Orders { get; set; } = new List<ExpandoObject>();

 

 

  }

 

Reference:
https://blazor.syncfusion.com/documentation/datagrid/cell#using-event
https://blazor.syncfusion.com/documentation/datagrid/cell#using-event

Regards,
Prathap Senthil

Attachment: BlazorApp10_4(1)_fb5e8f80.zip