Skip to content

Commit 5a2711e

Browse files
SuganthiK963SuganthiK963
authored
Merge branch 'hotfix/hotfix-v31.1.17' into 979178-TableIssueHotfix
2 parents 5fb3c85 + c3d1985 commit 5a2711e

File tree

3 files changed

+350
-2
lines changed

3 files changed

+350
-2
lines changed

‎blazor/datagrid/caption-template.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Caption template in Blazor DataGrid | Syncfusion
4-
description: Checkout and learn here all about Grouping in Syncfusion Blazor DataGrid and much more details.
4+
description: Checkout and learn here all about Caption Template in Syncfusion Blazor DataGrid and much more details.
55
platform: Blazor
66
control: DataGrid
77
documentation: ug

‎blazor/datagrid/cell.md‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -764,6 +764,251 @@ The following example demonstrates, how to set the [ClipMode](https://help.syncf
764764

765765
The Syncfusion Blazor DataGrid allows you to display information about the Grid columns to the user when they hover over them with the mouse.
766766

767+
### Show tooltip
768+
769+
The Syncfusion Blazor DataGrid provides a built-in feature to display tooltips when hovering over header and content cells. You can enable this feature by setting the `ShowTooltip` property to **true** in the DataGrid.
770+
By default, it shows the cell value for both header and content cells. For special types like templates, it displays the row data of the corresponding cells.
771+
772+
The following example demonstrates, how to set the `ShowTooltip` property in the DataGrid.
773+
774+
{% tabs %}
775+
{% highlight razor tabtitle="Index.razor" %}
776+
777+
@using Syncfusion.Blazor.Grids
778+
779+
<SfGrid DataSource="@Orders" ShowTooltip="true" Width="700">
780+
<GridColumns>
781+
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="90"></GridColumn>
782+
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="80"></GridColumn>
783+
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="70"></GridColumn>
784+
<GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="90"></GridColumn>
785+
</GridColumns>
786+
</SfGrid>
787+
788+
@code {
789+
private SfGrid<OrderData> Grid;
790+
public List<OrderData> Orders { get; set; }
791+
792+
protected override void OnInitialized()
793+
{
794+
Orders = OrderData.GetAllRecords();
795+
}
796+
}
797+
798+
{% endhighlight %}
799+
{% highlight c# tabtitle="Order.cs" %}
800+
801+
public class OrderData
802+
{
803+
public static List<OrderData> Orders = new List<OrderData>();
804+
public OrderData()
805+
{
806+
807+
}
808+
public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight)
809+
{
810+
this.OrderID = OrderID;
811+
this.CustomerID = CustomerID;
812+
this.OrderDate = OrderDate;
813+
this.Freight = Freight;
814+
}
815+
public static List<OrderData> GetAllRecords()
816+
{
817+
if (Orders.Count() == 0)
818+
{
819+
int code = 10;
820+
for (int i = 1; i < 2; i++)
821+
{
822+
Orders.Add(new OrderData(10248, "VINET",new DateTime(1996,07,07), 32.38));
823+
Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 07), 92.38));
824+
Orders.Add(new OrderData(10250, "HANAR", new DateTime(1996, 07, 07), 62.77));
825+
Orders.Add(new OrderData(10251, "VICTE", new DateTime(1996, 07, 07), 12.38));
826+
Orders.Add(new OrderData(10252, "SUPRD", new DateTime(1996, 07, 07), 82.38));
827+
Orders.Add(new OrderData(10253, "CHOPS", new DateTime(1996, 07, 07), 31.31));
828+
Orders.Add(new OrderData(10254, "RICSU", new DateTime(1996, 07, 07), 22.37));
829+
Orders.Add(new OrderData(10255, "WELLI", new DateTime(1996, 07, 07), 44.34));
830+
Orders.Add(new OrderData(10256, "RICSU", new DateTime(1996, 07, 07), 31.33));
831+
code += 5;
832+
}
833+
}
834+
return Orders;
835+
}
836+
public int? OrderID { get; set; }
837+
public string CustomerID { get; set; }
838+
public DateTime? OrderDate { get; set; }
839+
public double? Freight { get; set; }
840+
}
841+
842+
{% endhighlight %}
843+
{% endtabs %}
844+
845+
{% previewsample "https://blazorplayground.syncfusion.com/embed/htrSjFVnKuSghwyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
846+
847+
### Tooltip template
848+
849+
The Syncfusion Blazor DataGrid component provides a built-in option to customize tooltip content for both header and content cells. This can be achieved using the `TooltipTemplate` property, which accepts a `RenderFragment` under the `GridTemplates` component.
850+
851+
This feature allows you to display additional information about columns when users hover over them, enhancing the clarity and usability of the DataGrid.
852+
Tooltip customization is supported through the `TooltipTemplateContext`, which provides access to the following built-in properties:
853+
<ul>
854+
<li><strong>Value</strong> – Displays the content of the hovered cell: the column name for header cells or the cell value for content cells.</li>
855+
<li><strong>RowIndex</strong> – Indicates the row number of the hovered cell. Returns -1 for header cells.</li>
856+
<li><strong>ColumnIndex</strong> – Indicates the column number of the hovered cell.</li>
857+
<li><strong>Data</strong> – Provides the full data object of the hovered row. Not available for header cells.</li>
858+
<li><strong>Column</strong> – Contains metadata about the column, such as the field name and formatting.</li>
859+
</ul>
860+
861+
The following sample demonstrates a custom tooltip implementation using the `TooltipTemplate` in the DataGrid. The tooltip content is styled and includes interactive elements such as formatted text, icons, and contextual information to improve the overall user experience.
862+
863+
{% tabs %}
864+
{% highlight razor tabtitle="Index.razor" %}
865+
866+
@using Syncfusion.Blazor.Grids
867+
868+
<SfGrid DataSource="@GridData" Height="330" ShowTooltip="true" Width="700">
869+
<GridTemplates>
870+
<TooltipTemplate>
871+
@{
872+
var tooltip = context as TooltipTemplateContext;
873+
var order = tooltip?.RowData as OrdersDetails;
874+
if (tooltip?.RowIndex == -1)
875+
{
876+
if (tooltip.Value == "Order ID")
877+
{
878+
<span><strong>@tooltip.Value: </strong>Unique number used to identify each customer order.</span>
879+
}
880+
881+
else if (tooltip.Value == "Customer ID")
882+
{
883+
<div>
884+
<span><strong>@tooltip.Value: </strong>Displays the name of the customer who placed the order.</span>
885+
</div>
886+
}
887+
else if (tooltip.Value == "Freight")
888+
{
889+
<span><strong>@tooltip.Value: </strong>Shipping cost for the order. </span>
890+
}
891+
else
892+
{
893+
<span><strong>@tooltip.Value: </strong>Name of the city where the order is delivered.</span>
894+
}
895+
}
896+
897+
else
898+
{
899+
var fieldName = tooltip?.Column?.Field;
900+
<div style="font-family: Arial; line-height: 1.6;">
901+
@switch (fieldName)
902+
{
903+
case nameof(order.OrderID):
904+
<p style="margin: 2px 0;">@((MarkupString)GetStatusMessage(order.Status, order.OrderDate))</p>
905+
break;
906+
907+
case nameof(OrdersDetails.CustomerID):
908+
<div>
909+
<p style="margin: 2px 0;">
910+
<strong>EmailID: </strong><a href="mailto:@order.Email">@order.Email</a>
911+
</p>
912+
</div>
913+
break;
914+
915+
case nameof(OrdersDetails.Freight):
916+
<p style="margin: 4px 0;">
917+
<strong>Delivery Type: </strong>
918+
@GetDeliveryType(order.Freight)
919+
</p>
920+
break;
921+
922+
case nameof(OrdersDetails.ShipCity):
923+
<span class="e-icons e-location"></span>
924+
<strong>Country: </strong> @order.ShipCountry
925+
break;
926+
927+
default:
928+
<strong>@tooltip?.Column?.Field: </strong> @tooltip.Value
929+
break;
930+
}
931+
</div>
932+
}
933+
}
934+
</TooltipTemplate>
935+
</GridTemplates>
936+
<GridColumns>
937+
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="90"></GridColumn>
938+
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer ID" Width="90"></GridColumn>
939+
<GridColumn Field=@nameof(OrdersDetails.Freight) Format="C2" Width="80" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit"></GridColumn>
940+
<GridColumn Field=@nameof(OrdersDetails.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
941+
</GridColumns>
942+
</SfGrid>
943+
944+
<style>
945+
.e-icons.e-location:before {
946+
position: relative;
947+
top: 2px;
948+
}
949+
950+
</style>
951+
952+
@code {
953+
public List<OrdersDetails> GridData { get; set; }
954+
955+
protected override void OnInitialized()
956+
{
957+
GridData = new List<OrdersDetails>
958+
{
959+
new OrdersDetails { OrderID = 1001, CustomerID = "Nancy", Freight = 80, ProductName = "Laptop", OrderDate = DateTime.Now.AddDays(-1), ShipCity = "Reims", ShipCountry = "France", Status = "Delivered", Location = "France", Email = "[email protected]", DeliveryDays = "5-7 days" },
960+
new OrdersDetails { OrderID = 1002, CustomerID = "Andrew", Freight = 120, ProductName = "Smartphone", OrderDate = DateTime.Now.AddDays(3), ShipCity = "Munster", ShipCountry = "Germany", Status = "Pending", Location = "Germany", Email = "[email protected]" , DeliveryDays = "3-4 days"},
961+
new OrdersDetails { OrderID = 1003, CustomerID = "Janet", Freight = 180, ProductName = "Tablet", OrderDate = DateTime.Now.AddDays(-3), ShipCity = "Charleroi", ShipCountry = "Belgium", Status = "Cancelled", Location = "Belgium", Email = "[email protected]" , DeliveryDays = "1-2 days"},
962+
new OrdersDetails { OrderID = 1004, CustomerID = "Margaret", Freight = 60, ProductName = "Monitor", OrderDate = DateTime.Now.AddDays(-4), ShipCity = "Lyon", ShipCountry = "France", Status = "Delivered", Location = "France", Email = "[email protected]" , DeliveryDays = "5-7 days"},
963+
new OrdersDetails { OrderID = 1005, CustomerID = "Steven", Freight = 130, ProductName = "Keyboard", OrderDate = DateTime.Now.AddDays(4), ShipCity = "Delhi", ShipCountry = "India", Status = "Pending", Location = "India", Email = "[email protected]" , DeliveryDays = "3-4 days"},
964+
new OrdersDetails { OrderID = 1006, CustomerID = "Michael", Freight = 220, ProductName = "Mouse", OrderDate = DateTime.Now.AddDays(-6), ShipCity = "Tokyo", ShipCountry = "Japan", Status = "Delivered", Location = "Japan", Email = "[email protected]" , DeliveryDays = "1-2 days" },
965+
new OrdersDetails { OrderID = 1007, CustomerID = "Robert", Freight = 90, ProductName = "Printer", OrderDate = DateTime.Now.AddDays(-7), ShipCity = "Toronto", ShipCountry = "Canada", Status = "Cancelled", Location = "Canada", Email = "[email protected]" , DeliveryDays = "5-7 days"},
966+
new OrdersDetails { OrderID = 1008, CustomerID = "Laura", Freight = 160, ProductName = "Camera", OrderDate = DateTime.Now.AddDays(1), ShipCity = "Sydney", ShipCountry = "Australia", Status = "Pending", Location = "Australia", Email = "[email protected]", DeliveryDays = "1-2 days" },
967+
new OrdersDetails { OrderID = 1009, CustomerID = "Anne", Freight = 90, ProductName = "Laptop", OrderDate = DateTime.Now.AddDays(-9), ShipCity = "Reims", ShipCountry = "France", Status = "Delivered", Location = "France", Email = "[email protected]" ,DeliveryDays = "5-7 days" },
968+
};
969+
}
970+
private string GetStatusMessage(string status, DateTime? orderDate)
971+
{
972+
return status switch
973+
{
974+
"Cancelled" => "This item has been cancelled and will not be delivered.",
975+
"Pending" => $"<strong>Expected Delivery Date: </strong> {orderDate?.ToShortDateString()}",
976+
"Delivered" => $"<strong>Delivered Date: </strong> {orderDate?.ToShortDateString()}",
977+
_ => "<strong>Status Unknown</strong>"
978+
};
979+
}
980+
private string GetDeliveryType(double freight)
981+
{
982+
if (freight <= 100.00)
983+
return "Standard Delivery";
984+
else if (freight <= 150.00)
985+
return "Express Delivery";
986+
else
987+
return "Premium Delivery";
988+
}
989+
public class OrdersDetails
990+
{
991+
public int? OrderID { get; set; }
992+
public string? CustomerID { get; set; }
993+
public DateTime? OrderDate { get; set; }
994+
public double Freight { get; set; }
995+
public string? ShipCity { get; set; }
996+
public string? ShipCountry { get; set; }
997+
public string? Status { get; set; }
998+
public string? Location { get; set; }
999+
public string? ProductName { get; set; }
1000+
public string? Email { get; set; }
1001+
public string? DeliveryDays { get; set; }
1002+
}
1003+
}
1004+
1005+
{% endhighlight %}
1006+
{% endtabs %}
1007+
1008+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDryjujMCPDfWrVi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
1009+
1010+
> By default, custom tooltips will be displayed if the `ShowTooltip` property is set to **true**.
1011+
7671012
### Display custom tooltip for columns
7681013

7691014
The Syncfusion Blazor DataGrid provides a feature to display custom tooltips for its columns using the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started). This allows you to provide additional information about the columns when the user hovers over them.

‎blazor/datagrid/grouping.md‎

Lines changed: 104 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Grouping in Blazor DataGrid | Syncfusion
4-
description: Checkout and learn here all about Grouping in Syncfusion Blazor DataGrid and much more details.
4+
description: Checkout and learn here all about Grouping in Syncfusion Blazor DataGrid component and much more details.
55
platform: Blazor
66
control: DataGrid
77
documentation: ug
@@ -466,6 +466,109 @@ public class OrderData
466466

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

469+
## Persist grouped row expand or collapse state
470+
471+
The Syncfusion Blazor DataGrid offers the ability to persist the expand or collapse state of grouped rows across various data operations such as paging, sorting, filtering, and editing. By default, these operations reset the grouped rows to their initial collapsed or expanded state.
472+
To retain the current state of grouped rows and ensure a consistent user experience, set the [GridGroupSettings.PersistGroupState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_PersistGroupState) property to **true**. This also applies when using external grouping methods like [ExpandAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExpandAllGroupAsync) and [CollapseAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CollapseAllGroupAsync).
473+
474+
The following example demonstrates how to dynamically enable or disable the `PersistGroupState` property in the DataGrid.
475+
476+
{% tabs %}
477+
{% highlight razor tabtitle="Index.razor" %}
478+
479+
@using Syncfusion.Blazor.Grids
480+
@using Syncfusion.Blazor.Buttons
481+
482+
<div style="display:flex;gap: 5px;">
483+
<label> Enable or disable grouped row state persistence</label>
484+
<SfSwitch OffLabel="OFF" OnLabel="ON" ValueChange="Change" TChecked="bool?"></SfSwitch>
485+
</div>
486+
487+
<SfGrid @ref="Grid" DataSource="@GridData" AllowGrouping="true" Height="315px" AllowSorting="true">
488+
<GridGroupSettings Columns="@Initial" PersistGroupState=@IsPersist></GridGroupSettings>
489+
<GridColumns>
490+
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
491+
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
492+
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
493+
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
494+
</GridColumns>
495+
</SfGrid>
496+
497+
@code {
498+
public List<OrderData> GridData { get; set; }
499+
SfGrid<OrderData>? Grid { get; set; }
500+
501+
private bool IsPersist { get; set; } = true;
502+
private string[] Initial = (new string[] { "CustomerID", "ShipCity" });
503+
504+
protected override void OnInitialized()
505+
{
506+
GridData = OrderData.GetAllRecords();
507+
}
508+
509+
private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool?> args)
510+
{
511+
if (args.Checked == true)
512+
{
513+
IsPersist = true;
514+
}
515+
else
516+
{
517+
IsPersist = false;
518+
}
519+
}
520+
}
521+
522+
{% endhighlight %}
523+
524+
{% highlight c# tabtitle="OrderData.cs" %}
525+
526+
public class OrderData
527+
{
528+
public static List<OrderData> Orders = new List<OrderData>();
529+
public OrderData(){}
530+
531+
public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName)
532+
{
533+
this.OrderID = OrderID;
534+
this.CustomerID = CustomerID;
535+
this.ShipCity = ShipCity;
536+
this.ShipName = ShipName;
537+
}
538+
539+
public static List<OrderData> GetAllRecords()
540+
{
541+
if (Orders.Count() == 0)
542+
{
543+
int code = 10;
544+
for (int i = 1; i < 2; i++)
545+
{
546+
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
547+
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
548+
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
549+
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
550+
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
551+
Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
552+
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
553+
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
554+
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
555+
code += 5;
556+
}
557+
}
558+
return Orders;
559+
}
560+
561+
public int? OrderID { get; set; }
562+
public string CustomerID { get; set; }
563+
public string ShipCity { get; set; }
564+
public string ShipName { get; set; }
565+
}
566+
567+
{% endhighlight %}
568+
{% endtabs %}
569+
570+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNroDvrRpDAvxclV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
571+
469572
## Sort grouped columns in descending order during initial grouping
470573

471574
By default, grouped columns are sorted in ascending order. However, you can sort them in descending order during initial grouping by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) in the `GridSortSettings` of the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) property.

0 commit comments

Comments
 (0)