diff --git a/blazor/datagrid/cell.md b/blazor/datagrid/cell.md index 68276468bb..fb2dae4d68 100644 --- a/blazor/datagrid/cell.md +++ b/blazor/datagrid/cell.md @@ -764,6 +764,251 @@ The following example demonstrates, how to set the [ClipMode](https://help.syncf The Syncfusion Blazor DataGrid allows you to display information about the Grid columns to the user when they hover over them with the mouse. +### Show tooltip + +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. +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. + +The following example demonstrates, how to set the `ShowTooltip` property in the DataGrid. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} +{% highlight c# tabtitle="Order.cs" %} + +public class OrderData + { + public static List Orders = new List(); + public OrderData() + { + + } + public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int code = 10; + for (int i = 1; i < 2; i++) + { + Orders.Add(new OrderData(10248, "VINET",new DateTime(1996,07,07), 32.38)); + Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 07), 92.38)); + Orders.Add(new OrderData(10250, "HANAR", new DateTime(1996, 07, 07), 62.77)); + Orders.Add(new OrderData(10251, "VICTE", new DateTime(1996, 07, 07), 12.38)); + Orders.Add(new OrderData(10252, "SUPRD", new DateTime(1996, 07, 07), 82.38)); + Orders.Add(new OrderData(10253, "CHOPS", new DateTime(1996, 07, 07), 31.31)); + Orders.Add(new OrderData(10254, "RICSU", new DateTime(1996, 07, 07), 22.37)); + Orders.Add(new OrderData(10255, "WELLI", new DateTime(1996, 07, 07), 44.34)); + Orders.Add(new OrderData(10256, "RICSU", new DateTime(1996, 07, 07), 31.33)); + code += 5; + } + } + return Orders; + } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } + } + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrSjFVnKuSghwyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Tooltip template + +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. + +This feature allows you to display additional information about columns when users hover over them, enhancing the clarity and usability of the DataGrid. +Tooltip customization is supported through the `TooltipTemplateContext`, which provides access to the following built-in properties: +
    +
  • Value – Displays the content of the hovered cell: the column name for header cells or the cell value for content cells.
    • +
  • RowIndex – Indicates the row number of the hovered cell. Returns -1 for header cells.
    • +
  • ColumnIndex – Indicates the column number of the hovered cell.
    • +
  • Data – Provides the full data object of the hovered row. Not available for header cells.
    • +
  • Column – Contains metadata about the column, such as the field name and formatting.
    • +
+ +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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + @{ + var tooltip = context as TooltipTemplateContext; + var order = tooltip?.RowData as OrdersDetails; + if (tooltip?.RowIndex == -1) + { + if (tooltip.Value == "Order ID") + { + @tooltip.Value: Unique number used to identify each customer order. + } + + else if (tooltip.Value == "Customer ID") + { +
+ @tooltip.Value: Displays the name of the customer who placed the order. +
+ } + else if (tooltip.Value == "Freight") + { + @tooltip.Value: Shipping cost for the order. + } + else + { + @tooltip.Value: Name of the city where the order is delivered. + } + } + + else + { + var fieldName = tooltip?.Column?.Field; +
+ @switch (fieldName) + { + case nameof(order.OrderID): +

@((MarkupString)GetStatusMessage(order.Status, order.OrderDate))

+ break; + + case nameof(OrdersDetails.CustomerID): +
+

+ EmailID: @order.Email +

+
+ break; + + case nameof(OrdersDetails.Freight): +

+ Delivery Type: + @GetDeliveryType(order.Freight) +

+ break; + + case nameof(OrdersDetails.ShipCity): + + Country: @order.ShipCountry + break; + + default: + @tooltip?.Column?.Field: @tooltip.Value + break; + } +
+ } + } + + + + + + + + + + + + +@code { + public List GridData { get; set; } + + protected override void OnInitialized() + { + GridData = new List + { + new OrdersDetails { OrderID = 1001, CustomerID = "Nancy", Freight = 80, ProductName = "Laptop", OrderDate = DateTime.Now.AddDays(-1), ShipCity = "Reims", ShipCountry = "France", Status = "Delivered", Location = "France", Email = "nancy@example.com", DeliveryDays = "5-7 days" }, + new OrdersDetails { OrderID = 1002, CustomerID = "Andrew", Freight = 120, ProductName = "Smartphone", OrderDate = DateTime.Now.AddDays(3), ShipCity = "Munster", ShipCountry = "Germany", Status = "Pending", Location = "Germany", Email = "andrew@example.com" , DeliveryDays = "3-4 days"}, + new OrdersDetails { OrderID = 1003, CustomerID = "Janet", Freight = 180, ProductName = "Tablet", OrderDate = DateTime.Now.AddDays(-3), ShipCity = "Charleroi", ShipCountry = "Belgium", Status = "Cancelled", Location = "Belgium", Email = "janet@example.com" , DeliveryDays = "1-2 days"}, + new OrdersDetails { OrderID = 1004, CustomerID = "Margaret", Freight = 60, ProductName = "Monitor", OrderDate = DateTime.Now.AddDays(-4), ShipCity = "Lyon", ShipCountry = "France", Status = "Delivered", Location = "France", Email = "margaret@example.com" , DeliveryDays = "5-7 days"}, + new OrdersDetails { OrderID = 1005, CustomerID = "Steven", Freight = 130, ProductName = "Keyboard", OrderDate = DateTime.Now.AddDays(4), ShipCity = "Delhi", ShipCountry = "India", Status = "Pending", Location = "India", Email = "steven@example.com" , DeliveryDays = "3-4 days"}, + new OrdersDetails { OrderID = 1006, CustomerID = "Michael", Freight = 220, ProductName = "Mouse", OrderDate = DateTime.Now.AddDays(-6), ShipCity = "Tokyo", ShipCountry = "Japan", Status = "Delivered", Location = "Japan", Email = "michael@example.com" , DeliveryDays = "1-2 days" }, + new OrdersDetails { OrderID = 1007, CustomerID = "Robert", Freight = 90, ProductName = "Printer", OrderDate = DateTime.Now.AddDays(-7), ShipCity = "Toronto", ShipCountry = "Canada", Status = "Cancelled", Location = "Canada", Email = "robert@example.com" , DeliveryDays = "5-7 days"}, + new OrdersDetails { OrderID = 1008, CustomerID = "Laura", Freight = 160, ProductName = "Camera", OrderDate = DateTime.Now.AddDays(1), ShipCity = "Sydney", ShipCountry = "Australia", Status = "Pending", Location = "Australia", Email = "laura@example.com", DeliveryDays = "1-2 days" }, + new OrdersDetails { OrderID = 1009, CustomerID = "Anne", Freight = 90, ProductName = "Laptop", OrderDate = DateTime.Now.AddDays(-9), ShipCity = "Reims", ShipCountry = "France", Status = "Delivered", Location = "France", Email = "anne@example.com" ,DeliveryDays = "5-7 days" }, + }; + } + private string GetStatusMessage(string status, DateTime? orderDate) + { + return status switch + { + "Cancelled" => "This item has been cancelled and will not be delivered.", + "Pending" => $"Expected Delivery Date: {orderDate?.ToShortDateString()}", + "Delivered" => $"Delivered Date: {orderDate?.ToShortDateString()}", + _ => "Status Unknown" + }; + } + private string GetDeliveryType(double freight) + { + if (freight <= 100.00) + return "Standard Delivery"; + else if (freight <= 150.00) + return "Express Delivery"; + else + return "Premium Delivery"; + } + public class OrdersDetails + { + public int? OrderID { get; set; } + public string? CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double Freight { get; set; } + public string? ShipCity { get; set; } + public string? ShipCountry { get; set; } + public string? Status { get; set; } + public string? Location { get; set; } + public string? ProductName { get; set; } + public string? Email { get; set; } + public string? DeliveryDays { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDryjujMCPDfWrVi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> By default, custom tooltips will be displayed if the `ShowTooltip` property is set to **true**. + ### Display custom tooltip for columns 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.