Skip to content

Commit 2d968c7

Browse files
farveensulthanafarveensulthana
authored
Merge pull request #5830 from syncfusion-content/952529-sort-null
952529: Added the missing topics in Sort, row template and grouping
2 parents 5cb1aa7 + 67f0e8a commit 2d968c7

File tree

5 files changed

+416
-2
lines changed

5 files changed

+416
-2
lines changed

‎blazor/datagrid/caption-template.md‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,177 @@ The following example demonstrates how to add a custom text to the group caption
180180

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

183+
## Customize group caption text using locale
184+
185+
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.
186+
187+
The following example demonstrates, how to customize group caption text based on **ar** locale:
188+
189+
{% tabs %}
190+
{% highlight razor tabtitle="Index.razor" %}
191+
@using Syncfusion.Blazor.Grids
192+
193+
<SfGrid DataSource="@Orders" AllowGrouping="true" AllowPaging="true" Height="315">
194+
<GridColumns>
195+
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
196+
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
197+
<GridColumn Field=@nameof(Order.Country) HeaderText="Country" Width="130"></GridColumn>
198+
<GridColumn Field=@nameof(Order.City) HeaderText="City" Width="120"></GridColumn>
199+
</GridColumns>
200+
</SfGrid>
201+
@code {
202+
public List<Order> Orders { get; set; }
203+
protected override void OnInitialized()
204+
{
205+
var countries = new[] { "USA", "UK", "Germany", "Canada", "France" };
206+
var cities = new[] { "New York", "London", "Berlin", "Toronto", "Paris" };
207+
var random = new Random();
208+
Orders = Enumerable.Range(1, 75).Select(x => new Order()
209+
{
210+
OrderID = 1000 + x,
211+
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[random.Next(5)],
212+
Country = countries[random.Next(countries.Length)],
213+
City = cities[random.Next(cities.Length)]
214+
}).ToList();
215+
}
216+
public class Order
217+
{
218+
public int? OrderID { get; set; }
219+
public string CustomerID { get; set; }
220+
public string Country { get; set; }
221+
public string City { get; set; }
222+
}
223+
}
224+
{% endhighlight %}
225+
{% highlight c# tabtitle="SyncfusionLocalizer.cs" %}
226+
227+
using Syncfusion.Blazor;
228+
namespace LocalizationSample.Client
229+
{
230+
public class SyncfusionLocalizer : ISyncfusionStringLocalizer
231+
{
232+
public string GetText ( string key )
233+
{
234+
return this.ResourceManager.GetString(key);
235+
}
236+
public System.Resources.ResourceManager ResourceManager
237+
{
238+
get
239+
{
240+
// Replace the ApplicationNamespace with your application name.
241+
return LocalizationSample.Client.Resources.SfResources.ResourceManager;
242+
}
243+
}
244+
}
245+
}
246+
247+
{% endhighlight %}
248+
{% highlight c# tabtitle="SfResources.ar.resx" %}
249+
250+
<?xml version="1.0" encoding="utf-8"?>
251+
<root>
252+
<xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
253+
<xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
254+
<xsd:element name="root" msdata:IsDataSet="true">
255+
<xsd:complexType>
256+
<xsd:choice maxOccurs="unbounded">
257+
<xsd:element name="metadata">
258+
<xsd:complexType>
259+
<xsd:sequence>
260+
<xsd:element name="value" type="xsd:string" minOccurs="0" />
261+
</xsd:sequence>
262+
<xsd:attribute name="name" use="required" type="xsd:string" />
263+
<xsd:attribute name="type" type="xsd:string" />
264+
<xsd:attribute name="mimetype" type="xsd:string" />
265+
<xsd:attribute ref="xml:space" />
266+
</xsd:complexType>
267+
</xsd:element>
268+
<xsd:element name="assembly">
269+
<xsd:complexType>
270+
<xsd:attribute name="alias" type="xsd:string" />
271+
<xsd:attribute name="name" type="xsd:string" />
272+
</xsd:complexType>
273+
</xsd:element>
274+
<xsd:element name="data">
275+
<xsd:complexType>
276+
<xsd:sequence>
277+
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
278+
<xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
279+
</xsd:sequence>
280+
<xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
281+
<xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
282+
<xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
283+
<xsd:attribute ref="xml:space" />
284+
</xsd:complexType>
285+
</xsd:element>
286+
<xsd:element name="resheader">
287+
<xsd:complexType>
288+
<xsd:sequence>
289+
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
290+
</xsd:sequence>
291+
<xsd:attribute name="name" type="xsd:string" use="required" />
292+
</xsd:complexType>
293+
</xsd:element>
294+
</xsd:choice>
295+
</xsd:complexType>
296+
</xsd:element>
297+
</xsd:schema>
298+
<resheader name="resmimetype">
299+
<value>text/microsoft-resx</value>
300+
</resheader>
301+
<resheader name="version">
302+
<value>2.0</value>
303+
</resheader>
304+
<resheader name="reader">
305+
<value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
306+
</resheader>
307+
<resheader name="writer">
308+
<value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
309+
</resheader>
310+
<data name="Grid_GroupDropArea" xml:space="preserve">
311+
<value>اسحب رأس العمود هنا لتجميع العمود</value>
312+
</data>
313+
<data name="Grid_UnGroupButton" xml:space="preserve">
314+
<value>انقر هنا لإلغاء التجميع</value>
315+
</data>
316+
<data name="Grid_GroupDisable" xml:space="preserve">
317+
<value>تم تعطيل التجميع لهذا العمود</value>
318+
</data>
319+
<data name="Grid_Item" xml:space="preserve">
320+
<value>بند</value>
321+
</data>
322+
<data name="Grid_Items" xml:space="preserve">
323+
<value>العناصر</value>
324+
</data>
325+
<data name="Grid_Group" xml:space="preserve">
326+
<value>تجميع حسب هذا العمود</value>
327+
</data>
328+
<data name="Grid_Ungroup" xml:space="preserve">
329+
<value>فك تجميع بواسطة هذا العمود</value>
330+
</data>
331+
</root>
332+
333+
{% endhighlight %}
334+
{% highlight razor tabtitle="App.razor" %}
335+
336+
<body>
337+
...
338+
<script src="_framework/blazor.web.js" autostart="false"></script>
339+
<script>
340+
Blazor.start({
341+
webAssembly: {
342+
applicationCulture: 'ar'
343+
}
344+
});
345+
</script>
346+
...
347+
</body>
348+
349+
{% endhighlight %}
350+
{% endtabs %}
351+
352+
![Customize group caption text using locale](./images/blazor-datagrid-customize-group-caption-text-locale.png)
353+
183354
## Render custom component in group caption
184355

185356
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.

‎blazor/datagrid/grouping.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1149,8 +1149,7 @@ The following example demonstrates how the `Grouping` and `Grouped` events work
11491149
{% endtabs %}
11501150

11511151
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLpNCtffrjjtSYQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
1152-
1153-
1152+
11541153
## See Also
11551154

11561155
* [Exporting grouped records](https://blazor.syncfusion.com/documentation/datagrid/excel-exporting#exporting-grouped-records)

‎blazor/datagrid/images/blazor-datagrid-customize-group-caption-text-locale.PNG‎

84 KB
Loading

‎blazor/datagrid/row-template.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -523,6 +523,124 @@ public static List<OrderData> Orders = new List<OrderData>();
523523

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

526+
## Render Syncfusion Chart in row template
527+
528+
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.
529+
530+
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.
531+
532+
Here is an example that demonstrates rendering Syncfusion Chart within a row template:
533+
534+
{% tabs %}
535+
{% highlight razor tabtitle="Index.razor" %}
536+
@page "/"
537+
@using Syncfusion.Blazor.Grids
538+
@using Syncfusion.Blazor.Charts
539+
<SfGrid @ref="Grid" DataSource="@Orders" AllowSelection="true" Height="400px">
540+
<GridTemplates>
541+
<RowTemplate Context="emp">
542+
@{
543+
var order = emp as Order;
544+
}
545+
<td class="details">
546+
<table class="CardTable" cellpadding="3" cellspacing="2">
547+
<tbody>
548+
<tr>
549+
<td class="CardHeader">Customer ID</td>
550+
<td>@order.CustomerID</td>
551+
</tr>
552+
<tr>
553+
<td class="CardHeader">Freight</td>
554+
<td>@order.Freight</td>
555+
</tr>
556+
<tr>
557+
<td class="CardHeader">Order Date</td>
558+
<td>@order.OrderDate?.ToShortDateString()</td>
559+
</tr>
560+
</tbody>
561+
</table>
562+
</td>
563+
<td class="chart">
564+
<SfChart Width="100%" Height="200px">
565+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
566+
<ChartSeriesCollection>
567+
<ChartSeries DataSource="@GetChartData(order.OrderID)" XName="Category"
568+
YName="Value" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
569+
</ChartSeries>
570+
</ChartSeriesCollection>
571+
</SfChart>
572+
</td>
573+
</RowTemplate>
574+
</GridTemplates>
575+
<GridColumns>
576+
<GridColumn HeaderText="Order Details" Width="50%"></GridColumn>
577+
<GridColumn HeaderText="Chart" Width="50%"></GridColumn>
578+
</GridColumns>
579+
</SfGrid>
580+
581+
<style type="text/css">
582+
.details {
583+
padding-left: 18px;
584+
border-color: #e0e0e0;
585+
border-width: 1px 0px 0px 0px;
586+
border-style: solid;
587+
}
588+
.details > table {
589+
width: 100%;
590+
}
591+
592+
.CardHeader {
593+
font-weight: 600;
594+
}
595+
td {
596+
padding: 4px;
597+
}
598+
</style>
599+
@code {
600+
public List<Order> Orders { get; set; }
601+
SfGrid<Order> Grid;
602+
603+
protected override void OnInitialized()
604+
{
605+
Orders = Enumerable.Range(1, 5).Select(x => new Order()
606+
{
607+
OrderID = 1000 + x,
608+
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
609+
Freight = 2.1 * x,
610+
OrderDate = DateTime.Now.AddDays(-x),
611+
}).ToList();
612+
}
613+
public class Order
614+
{
615+
public int OrderID { get; set; }
616+
public string CustomerID { get; set; }
617+
public DateTime? OrderDate { get; set; }
618+
public double? Freight { get; set; }
619+
}
620+
public class ChartData
621+
{
622+
public string Category { get; set; }
623+
public double Value { get; set; }
624+
}
625+
626+
private List<ChartData> GetChartData(int orderId)
627+
{
628+
// Simulated data per row (can vary by orderId if needed).
629+
return new List<ChartData>
630+
{
631+
new ChartData { Category = "Q1", Value = orderId % 10 + 10 },
632+
new ChartData { Category = "Q2", Value = orderId % 5 + 15 },
633+
new ChartData { Category = "Q3", Value = orderId % 7 + 5 },
634+
new ChartData { Category = "Q4", Value = orderId % 9 + 20 },
635+
};
636+
}
637+
}
638+
639+
{% endhighlight %}
640+
{% endtabs %}
641+
642+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVINfWegMFKNCdv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
643+
526644
## Limitations
527645

528646
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.

0 commit comments

Comments
 (0)