Skip to content

952529: Added the missing topics in Sort, row template and grouping #5830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 12, 2025
Merged

952529: Added the missing topics in Sort, row template and grouping #5830

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2e75ec5
952529: Added the missing topics in Sort, row template and grouping
Apr 15, 2025
1d405c5
952529: Added the topic of Customize group caption text using locale
Apr 22, 2025
1620cc1
952529: Modified
May 5, 2025
3e3b5b6
952529: Modified the changes based on provided correction
May 8, 2025
67f0e8a
952529: Added the colon
May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 171 additions & 0 deletions blazor/datagrid/caption-template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,177 @@ The following example demonstrates how to add a custom text to the group caption

{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVzjiXvgoxRzKIb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

## Customize group caption text using locale

The Syncfusion Blazor DataGrid allows you to customize the group caption text based on the locale. This feature enables you to display localized text or translated content in the group captions according to different language or region settings.

The following example demonstrates, how to customize group caption text based on **ar** locale:

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowGrouping="true" AllowPaging="true" Height="315">
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.Country) HeaderText="Country" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.City) HeaderText="City" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<Order> Orders { get; set; }
protected override void OnInitialized()
{
var countries = new[] { "USA", "UK", "Germany", "Canada", "France" };
var cities = new[] { "New York", "London", "Berlin", "Toronto", "Paris" };
var random = new Random();
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[random.Next(5)],
Country = countries[random.Next(countries.Length)],
City = cities[random.Next(cities.Length)]
}).ToList();
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string Country { get; set; }
public string City { get; set; }
}
}
{% endhighlight %}
{% highlight c# tabtitle="SyncfusionLocalizer.cs" %}

using Syncfusion.Blazor;
namespace LocalizationSample.Client
{
public class SyncfusionLocalizer : ISyncfusionStringLocalizer
{
public string GetText ( string key )
{
return this.ResourceManager.GetString(key);
}
public System.Resources.ResourceManager ResourceManager
{
get
{
// Replace the ApplicationNamespace with your application name.
return LocalizationSample.Client.Resources.SfResources.ResourceManager;
}
}
}
}

{% endhighlight %}
{% highlight c# tabtitle="SfResources.ar.resx" %}

<?xml version="1.0" encoding="utf-8"?>
<root>
<xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
<xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
<xsd:element name="root" msdata:IsDataSet="true">
<xsd:complexType>
<xsd:choice maxOccurs="unbounded">
<xsd:element name="metadata">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" />
</xsd:sequence>
<xsd:attribute name="name" use="required" type="xsd:string" />
<xsd:attribute name="type" type="xsd:string" />
<xsd:attribute name="mimetype" type="xsd:string" />
<xsd:attribute ref="xml:space" />
</xsd:complexType>
</xsd:element>
<xsd:element name="assembly">
<xsd:complexType>
<xsd:attribute name="alias" type="xsd:string" />
<xsd:attribute name="name" type="xsd:string" />
</xsd:complexType>
</xsd:element>
<xsd:element name="data">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
<xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
<xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
<xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
<xsd:attribute ref="xml:space" />
</xsd:complexType>
</xsd:element>
<xsd:element name="resheader">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" use="required" />
</xsd:complexType>
</xsd:element>
</xsd:choice>
</xsd:complexType>
</xsd:element>
</xsd:schema>
<resheader name="resmimetype">
<value>text/microsoft-resx</value>
</resheader>
<resheader name="version">
<value>2.0</value>
</resheader>
<resheader name="reader">
<value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<resheader name="writer">
<value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<data name="Grid_GroupDropArea" xml:space="preserve">
<value>اسحب رأس العمود هنا لتجميع العمود</value>
</data>
<data name="Grid_UnGroupButton" xml:space="preserve">
<value>انقر هنا لإلغاء التجميع</value>
</data>
<data name="Grid_GroupDisable" xml:space="preserve">
<value>تم تعطيل التجميع لهذا العمود</value>
</data>
<data name="Grid_Item" xml:space="preserve">
<value>بند</value>
</data>
<data name="Grid_Items" xml:space="preserve">
<value>العناصر</value>
</data>
<data name="Grid_Group" xml:space="preserve">
<value>تجميع حسب هذا العمود</value>
</data>
<data name="Grid_Ungroup" xml:space="preserve">
<value>فك تجميع بواسطة هذا العمود</value>
</data>
</root>

{% endhighlight %}
{% highlight razor tabtitle="App.razor" %}

<body>
...
<script src="_framework/blazor.web.js" autostart="false"></script>
<script>
Blazor.start({
webAssembly: {
applicationCulture: 'ar'
}
});
</script>
...
</body>

{% endhighlight %}
{% endtabs %}

![Customize group caption text using locale](./images/blazor-datagrid-customize-group-caption-text-locale.png)

## Render custom component in group caption

The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid offers the flexibility to render a custom component in the group caption, providing advanced or interactive functionality within the group caption row. This feature allows you to display custom UI elements, like buttons, icons, or dropdowns, and handle user interactions directly within the group caption.
Expand Down
3 changes: 1 addition & 2 deletions blazor/datagrid/grouping.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1149,8 +1149,7 @@ The following example demonstrates how the `Grouping` and `Grouped` events work
{% endtabs %}

{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLpNCtffrjjtSYQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}



## See Also

* [Exporting grouped records](https://blazor.syncfusion.com/documentation/datagrid/excel-exporting#exporting-grouped-records)
Expand Down
Binary file added blazor/datagrid/images/blazor-datagrid-customize-group-caption-text-locale.PNG
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
118 changes: 118 additions & 0 deletions blazor/datagrid/row-template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -523,6 +523,124 @@ public static List<OrderData> Orders = new List<OrderData>();

{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhTMsZwzXeNByOG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

## Render Syncfusion Chart in row template

The Syncfusion Blazor DataGrid provides the flexibility to include custom controls, such as a Chart, within the rows of the Grid. This feature enhances Grid interactivity by allowing graphical representations of data instead of plain text.

To render a Syncfusion Blazor Chart within a row template of the Grid, use the [RowTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate) property. This property accepts a HTML template that defines the layout for each row, enabling rich data visualization directly inside the Grid.

Here is an example that demonstrates rendering Syncfusion Chart within a row template:

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@page "/"
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Charts
<SfGrid @ref="Grid" DataSource="@Orders" AllowSelection="true" Height="400px">
<GridTemplates>
<RowTemplate Context="emp">
@{
var order = emp as Order;
}
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<tbody>
<tr>
<td class="CardHeader">Customer ID</td>
<td>@order.CustomerID</td>
</tr>
<tr>
<td class="CardHeader">Freight</td>
<td>@order.Freight</td>
</tr>
<tr>
<td class="CardHeader">Order Date</td>
<td>@order.OrderDate?.ToShortDateString()</td>
</tr>
</tbody>
</table>
</td>
<td class="chart">
<SfChart Width="100%" Height="200px">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@GetChartData(order.OrderID)" XName="Category"
YName="Value" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</td>
</RowTemplate>
</GridTemplates>
<GridColumns>
<GridColumn HeaderText="Order Details" Width="50%"></GridColumn>
<GridColumn HeaderText="Chart" Width="50%"></GridColumn>
</GridColumns>
</SfGrid>

<style type="text/css">
.details {
padding-left: 18px;
border-color: #e0e0e0;
border-width: 1px 0px 0px 0px;
border-style: solid;
}
.details > table {
width: 100%;
}

.CardHeader {
font-weight: 600;
}
td {
padding: 4px;
}
</style>
@code {
public List<Order> Orders { get; set; }
SfGrid<Order> Grid;

protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 5).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public class Order
{
public int OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
public class ChartData
{
public string Category { get; set; }
public double Value { get; set; }
}

private List<ChartData> GetChartData(int orderId)
{
// Simulated data per row (can vary by orderId if needed).
return new List<ChartData>
{
new ChartData { Category = "Q1", Value = orderId % 10 + 10 },
new ChartData { Category = "Q2", Value = orderId % 5 + 15 },
new ChartData { Category = "Q3", Value = orderId % 7 + 5 },
new ChartData { Category = "Q4", Value = orderId % 9 + 20 },
};
}
}

{% endhighlight %}
{% endtabs %}

{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVINfWegMFKNCdv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

## Limitations

Row template feature is not compatible with all the features which are available in the grid, and it has limited features support. The features that are incompatible with the row template feature are listed below.
Expand Down
Loading