datagrid with 2 header rows and variable content

[Walter Martin]

I'm using Blazor server

I don't find the right way, if possible, to do the following:

1) Writing in the datagrid column header variable values

2) Adding to the datagrid a second header row as showed in the picture below

[Monisha Saravanan]

Hi Walter,

We have checked your query and we suspect that you need to add multiple header to the DataGrid. We would like to inform that in Grid we have support to render stacked header. We have already documented this topic kindly refer the attached UG and demo for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/columns#stacked-column-header

https://blazor.syncfusion.com/demos/datagrid/stacked-header?theme=bootstrap4

Kindly get back to us if you face any difficulties or if you have further queries.

Regards,

Monisha

[Walter Martin]

Actually the stacked header is not exactly what I need but I could use your suggestion if there's a way to write in the HeaderText property of every column a variable content

something like:

<GridColumns>

        <GridColumn Field=ArticoloId HeaderText=@{variable} AutoFit=true></GridColumn>

</GridColumns>

  

is this possible ? 

The variable value belongs to the data in that specific column so I could get it from database or maybe there's a way to set it in the grid data bound ?set in 

[Monisha Saravanan]

Hi Walter,

Thanks for the update.

We suspect that you need to customize the Grid header. So we suggest you to use Grid header template feature of DataGrid and you can customize the header as per your requirement. Kindly refer the attached UG for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/columns#header-template

https://blazor.syncfusion.com/documentation/datagrid/columns#dynamic-column-building

Kindly get back to us if you have further queries.

Regards,

Monisha

[Walter Martin]

thanks for your reply, 

I totally changed the way to build the grid and now, using the wonderful ExpandoObject databinding, I solved several problems.

Now I'm trying to use Aggregates with ExpandoObject but the code below doesn't work

The piece of code in bold seems to be totally ignored and the grid has no aggergates line on footer

Even if I delete the   if (prop == "Totpezzi") condition the aggretes are not showed

what could be the source of problem ?

<SfGrid ID="GridBolle" DataSource="@CustomerList" TValue="ExpandoObject" AllowPaging="true" AllowPdfExport="true" AllowExcelExport="true" AllowFiltering="true" AllowSorting="true" Toolbar="@(new List<string>() { "ExcelExport", "PdfExport" })">

    <GridPageSettings PageSize="10" PageSizes="true"></GridPageSettings>

    <GridEvents OnToolbarClick="ToolbarClick" TValue="ExpandoObject" />

    <GridColumns>

        @{

            foreach (var val in Columns)

            {

                <GridColumn Field="@val" IsPrimaryKey="@(val == "ArticoloId")"></GridColumn>

            }

        }

    </GridColumns>

    <GridAggregates>

        <GridAggregate>

            <GridAggregateColumns>

                @{

                    foreach (var prop in Columns)

                    {

                            <GridAggregateColumn Field=@prop Type="AggregateType.Sum">

                                <FooterTemplate>

                                @{

                                    if (prop == "Totpezzi")

                                    {

                                        var aggregate = (context as AggregateTemplateContext);

                                        <div>

                                            <p>Sum: @aggregate.Sum</p>

                                        </div>

                                    }

                                }

                                </FooterTemplate>

                            </GridAggregateColumn>

                   }

                }

            </GridAggregateColumns>

        </GridAggregate>

    </GridAggregates>

</SfGrid>

[Monisha Saravanan]

Hi Walter,

Thanks for the update.

We have checked your query and we suspect that you are facing issue with aggregate column when using it with dynamic column building. We have prepared an sample based on your shared code snippet. Kindly check the attached sample and code snippet for your reference.

 

<SfGrid DataSource="@OrderData" @ref="Grid">

    <GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></GridEditSettings>

    <GridAggregates>

 

        <GridAggregate>

 

            <GridAggregateColumns>

 

                @{

 

                    foreach (var prop in Grid.Columns)

 

                    {

                            @if (prop.Field == "EmployeeID")

                        {

 

                                    <GridAggregateColumn Field[email protected] Type="AggregateType.Sum">

 

                                        <FooterTemplate>

 

                                        @{

                                     

                                        var aggregate = (context as AggregateTemplateContext);

 

                                                        <div>

 

                                                            <p>Sum: @aggregate.Sum</p>

 

                                                        </div>

 

                                        }

 

                                        </FooterTemplate>

 

                                    </GridAggregateColumn>

 

                   }

 

                }

                }

 

            </GridAggregateColumns>

 

        </GridAggregate>

 

    </GridAggregates>

</SfGrid>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1932452541.zip

If the reported issue still reproduced then kindly get back to us with an issue reproduceable sample or try to modify the above mentioned sample and kindly get back to us if you have further queries.

Regards,

Monisha

[Walter Martin]

I don't know if this is relevant but I'm using ExpandoObject and my piece of code below doesn't show the aggregates

The number of columns is variable 

I added a breakpoint but even if the "@if (prop.Field == "Totpezzi")" is true, the piece of code inside this if condition is not performed surprisingly

All the right columns values are always showed but not the line with the sum value.

<SfGrid ID="GridBolle" @ref="grbolle" DataSource="@BolleList" TValue="ExpandoObject" AllowPaging="true" AllowPdfExport="true" AllowExcelExport="true" AllowFiltering="true" AllowSorting="true" Toolbar="@(new List<string>() { "ExcelExport", "PdfExport" })">

    <GridPageSettings PageSize="10" PageSizes="true"></GridPageSettings>

    <GridEvents OnToolbarClick="ToolbarClick" TValue="ExpandoObject" />

        <GridAggregates>

        <GridAggregate>

            <GridAggregateColumns>

                @{

                    foreach (var prop in grbolle.Columns)

                    {

                       @if (prop.Field == "Totpezzi")

                        {

                            <GridAggregateColumn [email protected] Type="AggregateType.Sum">

                                <FooterTemplate>

                                @{

                                        var aggregate = (context as AggregateTemplateContext);

                                        <div>

                                            <p>Sum: @aggregate.Sum</p>

                                        </div>

                                }

                                </FooterTemplate>

                            </GridAggregateColumn>

                        }

                    }

                }

            </GridAggregateColumns>

        </GridAggregate>

    </GridAggregates>

    <GridColumns>

        @{

            foreach (var val in Columns)

            {

                <GridColumn Field="@val" IsPrimaryKey="@(val == "ArticoloId")"></GridColumn>

            }

        }

    </GridColumns>

</SfGrid>

[Walter Martin]

I found the source of problem but not a good solution

The sum value appeared after clicking in the column header to sort the data so it seems to be it's necessary to make a sort of grid refresh because probably the columns are created too early

How can I force a grid sorting before rendering it ?

[Monisha Saravanan]

Hi Walter,

Thanks for the update.

We have checked your checked your query we suspect that the reported issue occurs due to time delay.

Kindly try the below solution at your end. We have attached sample for your reference. Kindly refer the attached sample

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-132488962.zip

<GridAggregate>

 

            <GridAggregateColumns>

 

                @{

                var firstItem = Orders.First();

                var dictionaryItem = (IDictionary<string, object>)firstItem;

 

                    foreach (var prop in dictionaryItem)

 

                    {

                            @if (prop.Key == "EmployeeID")

                        {

 

                                    <GridAggregateColumn Field[email protected] Type="AggregateType.Sum"></GridAggregateColumn>

 

                   }

                  }

                }

 

            </GridAggregateColumns>

 

        </GridAggregate>

 

    </GridAggregates>

Also we would like to inform that we have support to perform initial sorting. We have already documented this topic kindly check the attached UG for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/sorting#initial-sort

If you still face any difficulties then kindly get back to us with an issue reproduceable sample or try to reproduce the issue on the above mentioned sample. So that it would be helpful for us to validate the issue further at our end and help us to provide solution ASAP.

Regards,

Monisha

[Walter Martin]

I changed in attachment your sample to make it similar to mine and as you can see, I fill the grid datasource not from the beginning but after selecting something in the dropdownlist

In this case the sum value is showed only after clciking in the column header to filter the data for instance.

How can I show the sum value just after selecting a value in the dropdownlist ?

Attachment: BlazorApp1_43288a5f.zip

[Monisha Saravanan]

Hi Walter,

Thanks for the update.

We are able to reproduce the reported query at the provided sample and we could see that before columns refreshed we are trying to calculate Grid Aggregates. So the reported issue reproduced. So we have called RefreshColumnsAsync method of DataGrid before calling Refresh method to refresh the columns. Kindly refer the below code snippet and attached sample for your reference.

 

<SfGrid DataSource="@Orders" @ref="Grid" AllowSorting=true>

 

</SfGrid>

 

@code{

 

    public async Task ChangeTipologia(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Tipologia> args)

    {

      

        if (args.ItemData != null)

        {

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

            {

                dynamic d = new ExpandoObject();

                d.OrderID = 1000 + x;

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

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

                return d;

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

 

        }

  

        await Grid.RefreshColumnsAsync();

        await Task.Delay(300);

        await Grid.Refresh();

 

    }

  

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1_43288a5f815894619.zip

Kindly get back to us if you have further queries.

Regards,

Monisha

[Walter Martin]

this is what I needed 

thanks a lot

[Monisha Saravanan]

Hi Walter,

Most welcome. Kindly get back to us if you have further queries. As always we will be happy to help you.

Regards,

Monisha