Create columns from MarkupString
Dear All,
I try to generate a stacked header grid, but I have to create the markup from the code. I did the following:
<div id="grid">
<SfGrid DataSource="@Orders" AllowSorting = "true" Height=800>
<GridSortSettings>
<GridSortColumns>
<GridSortColumn Field="customer" Direction="SortDirection.Ascending"></GridSortColumn>
</GridSortColumns>
</GridSortSettings>
<GridColumns>
@myColumns
</GridColumns>
<SfSpinner @bind-Visible="@spinnerVisible" CssClass="e-spin-overlay" Label="Loading Data..."></SfSpinner>
</SfGrid>
</div>
The content of the myColumnsMarkup is the following:
<GridColumn Field="Customer" TextAlign="TextAlign.Left"></GridColumn>
<GridColumn HeaderText="2020">
<GridColumns>
<GridColumn Field="Value2020" HeaderText="Value (EUR)" Format="N0" TextAlign="TextAlign.Right" ></GridColumn>
<GridColumn Field="Profit2020" HeaderText="Profit (EUR)" Format="N0" TextAlign="TextAlign.Right" ></GridColumn>
<GridColumn Field="ProfitPerc2020" HeaderText="%" Format="N1" TextAlign="TextAlign.Right" > </GridColumn>
</GridColumns>
</GridColumn>
<GridColumn HeaderText="2021">
<GridColumns>
<GridColumn Field="Value2021" HeaderText="Value (EUR)" Format="N0" TextAlign="TextAlign.Right" ></GridColumn>
<GridColumn Field="Profit2021" HeaderText="Profit (EUR)" Format="N0" TextAlign="TextAlign.Right" ></GridColumn>
<GridColumn Field="ProfitPerc2021" HeaderText="%" Format="N1" TextAlign="TextAlign.Right" > </GridColumn>
</GridColumns>
</GridColumn>However the grid is not appearing, it's palce is empty. What do I wrong?
Strange enough: if I just copy-paste the markup content, the grid appears and all is fine....
|
[Index.razor]
<SfGrid DataSource="@Orders" AllowResizing="true" AllowPaging="true" Height="315">
<GridColumns>
<GridColumnsCustom />
</GridColumns>
</SfGrid> |
|
[GridColumnsCustom.razor]
@using Syncfusion.Blazor.Grids
<GridColumn Field="OrderID" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn HeaderText=" Order Details">
<GridColumns>
<GridColumn Field="OrderDate" Width="130" HeaderText="Order Date" Format="d" TextAlign="TextAlign.Right" MinWidth="10"></GridColumn>
<GridColumn Field="Freight" Width="135" HeaderText="Freight($)" Format="C2" TextAlign="TextAlign.Right" MinWidth="10" AllowResizing=false></GridColumn>
</GridColumns>
</GridColumn>
|
Dear Rahul,
maybe I was not clear how the myColumnsMarkup is created: it is created on the fly, dynamically, via a c# code, since the columns of the grid are not fixed, they are changing based on user interaction.
What I included is only the result of the c# code, running on a button press. I include a short sample what shows the same problem. Please have a look on the FetchData page, and click on the Filter button.
Please note: the project is for .NET 6/VS 2022
Attachment: BlazorApp1_e72dd35.zip
|
[Counter.razor]
<SfButton CssClass="e-outline" IsPrimary="true" @onclick="onFilterClick">Filter</SfButton><br />
<SfGrid DataSource="@forecasts" AllowSorting = "true" Height=800 Columns="@Cols">
</SfGrid>
@code {
private WeatherForecast[]? forecasts;
List<GridColumn> Cols = new List<GridColumn>(); //columns bounded to Grid.
MarkupString myColumns;
async Task onFilterClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
Cols.Add(new GridColumn()
{
HeaderText = "2021",
Width = "75",
Columns = new List<GridColumn>() {
new GridColumn() { Field = "Date", HeaderText = "Value (EUR)", Format="N0", TextAlign = TextAlign.Right },
new GridColumn() { Field = "TemperatureC", HeaderText = "Value (EUR)", Format="N0", TextAlign = TextAlign.Right },
new GridColumn() { Field = "TemperatureF", HeaderText = "Value (EUR)", Format="N0", TextAlign = TextAlign.Right },
}
});
}
}
|
Dear Rahul,
unfortunately I am unable to use your suggestion, since the grid is binded to an ExpandoObject, the columns are coming in an arbitrary order, and in arbitrary number too. The way I can distinguish them is by their name. The example I included is a very simplified version of the column generation.
I still don't understand why the MarkupString is not working as expected? Can you please check the example I included?
As a last resort, should I use RenderFragment instead of MarkupString? Will that work?
Thanks.
Dear Rahul,
thank you for your time and effort to check my problem. Your guidance is very valuable and without it I would be hooked.
With best regards:
Peter
