From 0bfec2af36641aaf0509e59d2ccb6fefb6b348e5 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 25 Apr 2025 15:59:41 +0530 Subject: [PATCH 01/16] Documentation(954494) - Revamp How to topic in blazor platform --- blazor-toc.html | 10 +- ...lper-function-inside-loop-with-template.md | 126 ++++++++++++++ .../customize-empty-grid-display-message.md | 97 ++++++++--- .../datagrid/how-to/enable-or-disable-grid.md | 160 +++++++++++++----- .../resize-grid-in-various-dimension.md | 120 +++++++++++++ 5 files changed, 447 insertions(+), 66 deletions(-) create mode 100644 blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md create mode 100644 blazor/datagrid/how-to/resize-grid-in-various-dimension.md diff --git a/blazor-toc.html b/blazor-toc.html index b87822b9cb..2d5a3bdf9d 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2063,7 +2063,13 @@ Styling and appearance
  • - Customize empty grid display message + Customize the empty record template +
    • +
  • + Resize the Grid in various dimension +
    • +
  • + Use custom helper inside the loop with templates
  • Saving a new row at a particular index of the grid page @@ -2096,7 +2102,7 @@ Use radio button instead of checkbox in single selection mode of Grid
  • - Enable or Disable the Grid Component + Enable/Disable Grid and its actions
    • diff --git a/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md b/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md new file mode 100644 index 0000000000..adbff0cd5f --- /dev/null +++ b/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md @@ -0,0 +1,126 @@ +--- +layout: post +title: Use custom helper inside the loop with templates in Blazor DataGrid | Syncfusion +description: Learn here all about Place cancel icon in search bar in Syncfusion Blazor Grid. +platform: Blazor +control: DataGrid +documentation: ug +--- + +# Use custom helper inside the loop with templates in Blazor DataGrid + +The Syncfusion Blazor DataGrid allows you to use custom helpers inside the loop with [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?#Syncfusion_Blazor_Grids_GridColumn_Template) property of a column. This feature enables you to create complex templates that can incorporate additional helper functions. + +The customer rating column includes a custom template defined using `Template`. Inside this template, iterates through the item array and generates `` tag, displayed as stars using the CSS below: + +```css +.e-grid .rating .star:before { + content: '★'; +} + +.e-grid .rating .star { + font-size: 132%; + color: lightgrey; +} +``` + +The class is dynamically assigned based on the result of the `isRatingGreater` method, highlighting the star using the CSS below: + +```css +.e-grid .rating .star.checked { + color: #ffa600; +} +``` + +This is demonstrated in the following example. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + +@code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = Order.GetAllRecords(); + } + + private bool IsRatingGreater(int dataRating, int comparisonValue) + { + return dataRating >= comparisonValue; + } +} + +{% endhighlight %} +{% highlight c# tabtitle="Order.cs" %} + +public class Order +{ + public int OrderID { get; set; } + public string CustomerID { get; set; } + public int Rating { get; set; } + + public static List GetAllRecords() + { + return new List + { + new Order { OrderID = 1001, CustomerID = "ALFKI", Rating = 3 }, + new Order { OrderID = 1002, CustomerID = "ANATR", Rating = 5 }, + new Order { OrderID = 1003, CustomerID = "ANTON", Rating = 2 }, + new Order { OrderID = 1004, CustomerID = "AROUT", Rating = 4 }, + new Order { OrderID = 1005, CustomerID = "BERGS", Rating = 1 }, + new Order { OrderID = 1006, CustomerID = "BLAUS", Rating = 5 }, + new Order { OrderID = 1007, CustomerID = "BLONP", Rating = 3 }, + new Order { OrderID = 1008, CustomerID = "BOLID", Rating = 2 }, + new Order { OrderID = 1009, CustomerID = "BONAP", Rating = 4 }, + new Order { OrderID = 1010, CustomerID = "BOTTM", Rating = 3 }, + new Order { OrderID = 1011, CustomerID = "BSBEV", Rating = 5 }, + new Order { OrderID = 1012, CustomerID = "CACTU", Rating = 1 }, + new Order { OrderID = 1013, CustomerID = "CENTC", Rating = 4 } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLeXzrApyBafWHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/how-to/customize-empty-grid-display-message.md b/blazor/datagrid/how-to/customize-empty-grid-display-message.md index fc23626efd..03ef6325eb 100644 --- a/blazor/datagrid/how-to/customize-empty-grid-display-message.md +++ b/blazor/datagrid/how-to/customize-empty-grid-display-message.md @@ -1,44 +1,101 @@ --- layout: post -title: Customize empty display message in Blazor DataGrid | Syncfusion -description: Learn here all about customizing empty grid display message in Syncfusion Blazor DataGrid component and more. +title: Customize the Empty Record Template in the Blazor DataGrid | Syncfusion +description: Learn here all about Customize the Empty Record Template in Syncfusion Blazor DataGrid. platform: Blazor control: DataGrid documentation: ug --- -# Customize Empty Grid Display Message in Blazor DataGrid Component +# Customize the empty record template in Blazor DataGrid -You can customize the message shown when rendering an empty grid by using the `EmptyRecordTemplate` feature. +The empty record template feature in the Grid allows you to use custom content such as images, text, or other components, when the Grid doesn't contain any records to display. This feature replaces the default message of 'No records to display' typically shown in the Grid. -This is demonstrated in the following sample code, +To activate this feature, set the `EmptyRecordTemplate` feature of the Grid. The `EmptyRecordTemplate` feature expects the HTML element or a function that returns the HTML element. + +In the following example, an image and text have been rendered as a template to indicate that the Grid has no data to display. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Data +@using System.ComponentModel.DataAnnotations - + + + - Custom no record message +
    + No record + There is no data available to display at the moment. +
    - - - - + + + + +     -@code{ - public List Orders { get; set; } +@code { + private SfGrid Grid; + public List Orders { get; set; } = new(); + public string ImageUrl = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE5OTZfMjQxKSI+CjxyZWN0IHg9Ii0xLjAyNDkiIHk9IjguNTcwNTYiIHdpZHRoPSIzNy4wMTU2IiBoZWlnaHQ9IjM3Ljc2MjMiIHJ4PSI3IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTUgLTEuMDI0OSA4LjU3MDU2KSIgZmlsbD0iI0VGRjNGOSIvPgo8cGF0aCBkPSJNMzcuODIzMSA3LjUxMTIzTDM4LjE4MDMgOC4wNzI1NEwzOC43NDE2IDguNDI5NzdMMzguMTgwMyA4Ljc4N0wzNy44MjMxIDkuMzQ4MzFMMzcuNDY1OSA4Ljc4N0wzNi45MDQ1IDguNDI5NzdMMzcuNDY1OSA4LjA3MjU0TDM3LjgyMzEgNy41MTEyM1oiIHN0cm9rZT0iIzY1RkE4NiIgc3Ryb2tlLXdpZHRoPSIwLjQ1OTI3IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMC40OTY0IDM4LjA1MjdWMzkuODg5OE05LjU3Nzg4IDM4Ljk3MTNIMTEuNDE1IiBzdHJva2U9IiM1RjdCRjgiIHN0cm9rZS13aWR0aD0iMC40NTkyNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxwYXRoIGQ9Ik04IDExQzggOS4zNDMxNCA5LjM0MzE1IDggMTEgOEgzMEMzMS42NTY5IDggMzMgOS4zNDMxNSAzMyAxMVYzMC4wMDAxQzMzIDMxLjY1NjkgMzEuNjU2OCAzMy4wMDAxIDMwIDMzLjAwMDFMMTEgMzIuOTk5OUM5LjM0MzEzIDMyLjk5OTkgOCAzMS42NTY4IDggMjkuOTk5OVYxMVoiIGZpbGw9IndoaXRlIiBzdHJva2U9IiNBM0IyQzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8Y2lyY2xlIGN4PSI0LjEzMzM4IiBjeT0iMzAuMzkzMiIgcj0iMC45MTg1NCIgc3Ryb2tlPSIjRUY1ODU4IiBzdHJva2Utd2lkdGg9IjAuNDU5MjciLz4KPHBhdGggZD0iTTkgMTVIMzIiIHN0cm9rZT0iI0EzQjJDOCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPGNpcmNsZSBjeD0iMjgiIGN5PSIyOCIgcj0iOSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzRDNTY2NiIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0yOCAyM1YyOCIgc3Ryb2tlPSIjNEM1NjY2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8Y2lyY2xlIGN4PSIyOCIgY3k9IjMyIiByPSIxLjUiIGZpbGw9IiM0QzU2NjYiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8xOTk2XzI0MSI+CjxyZWN0IHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K"; + public List ToolbarItems = new() { "Add", "Edit", "Delete", "Update", "Cancel" }; +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); - public class Order + public OrderDetails(int orderId, string customerId, string shipCity, string shipName, double freight, DateTime orderDate, string shipCountry) { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + this.OrderID = orderId; + this.CustomerID = customerId; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.Freight = freight; + this.OrderDate = orderDate; + this.ShipCountry = shipCountry; } + + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, new DateTime(2024, 1, 5), "France")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, new DateTime(2024, 1, 7), "Germany")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, new DateTime(2024, 1, 10), "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, new DateTime(2024, 1, 12), "France")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, new DateTime(2024, 1, 14), "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, new DateTime(2024, 1, 16), "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, new DateTime(2024, 1, 18), "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, new DateTime(2024, 1, 20), "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora", 13.97, new DateTime(2024, 1, 22), "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", 81.91, new DateTime(2024, 1, 24), "Venezuela")); + } + return order; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public string ShipCountry { get; set; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVojzBpJtpAwxhe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/how-to/enable-or-disable-grid.md b/blazor/datagrid/how-to/enable-or-disable-grid.md index 969f245d4a..4528b29314 100644 --- a/blazor/datagrid/how-to/enable-or-disable-grid.md +++ b/blazor/datagrid/how-to/enable-or-disable-grid.md @@ -1,79 +1,151 @@ --- layout: post -title: Enable or Disable the Blazor Grid | Syncfusion -description: Learn here all about how to enable or disable the entire Syncfusion Blazor DataGrid component and more. +title: Enable or Disable the Blazor DataGrid | Syncfusion +description: Learn here all about how to enable or disable the entire Syncfusion Blazor DataGrid and more. platform: Blazor control: DataGrid documentation: ug --- -# Enable or Disable the Grid Component +# Enable disable Grid and its actions in Blazor DataGrid -You can enable or disable the Grid component by adding the attributes for the Grid and applying the style accordingly. +You can enable/disable the Grid and its actions by applying/removing corresponding CSS styles. -In the following sample, the `SfRadioButton` is rendered: Using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfRadioButton-1.html#Syncfusion_Blazor_Buttons_SfRadioButton_1_ValueChange) event of the `SfRadioButton`, you can enable or disable the Grid component. +To enable/disable the Grid and its actions, follow the given steps: + +**Step 1**: Create CSS class with custom style to override the default style of Grid. + +```css + .disablegrid { + pointer-events: none; + opacity: 0.4; + } + .wrapper { + cursor: not-allowed; + } + +``` + +**Step 2**: Add/Remove the CSS class to the Grid in the click event handler of Button. ```cshtml + private void ToggleGrid() + { + if (GridWrapperClass.Contains("disablegrid")) + { + GridWrapperClass = ""; + } + else + { + GridWrapperClass = "wrapper disablegrid"; + } + } +``` + +In the below demo, the button click will enable/disable the Grid and its actions. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons - - +Enable/Disable Grid + +
    + + + + + + + + + +
    - - - - - - - -@code{ - private string stringChecked = "No"; - public void OnChange(ChangeArgs Args, string val) +@code { + private SfGrid Grid; + public List Orders { get; set; } + private List Toolbar = new() { "Add", "Edit", "Delete", "Update", "Cancel" }; + private string GridWrapperClass = ""; + protected override void OnInitialized() + { + Orders = OrderDetails.GetAllRecords(); + } + private void ToggleGrid() { - if (val == "Yes") + if (GridWrapperClass.Contains("disablegrid")) { - GridAttributes["disable"] = "yes"; + GridWrapperClass = ""; } - else if (val == "No") + else { - GridAttributes["disable"] = "no"; + GridWrapperClass = "wrapper disablegrid"; } } +} - private Dictionary GridAttributes { get; set; } = new Dictionary(); - public List Orders { get; set; } +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} - protected override void OnInitialized() +public class OrderDetails +{ + public static List order = new List(); + + public OrderDetails(int orderId, string customerId, string shipCity, string shipName,double freight, DateTime orderDate, string shipCountry) { - GridAttributes.Add("disable", "no"); - Orders = Enumerable.Range(1, 1000).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(); + this.OrderID = orderId; + this.CustomerID = customerId; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.Freight = freight; + this.OrderDate = orderDate; + this.ShipCountry = shipCountry; } - public class Order + public static List GetAllRecords() { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, new DateTime(2024, 1, 5), "France")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, new DateTime(2024, 1, 7), "Germany")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, new DateTime(2024, 1, 10), "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, new DateTime(2024, 1, 12), "France")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, new DateTime(2024, 1, 14), "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, new DateTime(2024, 1, 16), "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, new DateTime(2024, 1, 18), "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, new DateTime(2024, 1, 20), "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora", 13.97, new DateTime(2024, 1, 22), "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", 81.91, new DateTime(2024, 1, 24), "Venezuela")); + } + return order; } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public string ShipCountry { get; set; } } -``` -![Enable or Disable the Blazor DataGrid](../images/enable-or-disable-the-blazor-datagrid.gif) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLSZTBAfLsZcZfE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md new file mode 100644 index 0000000000..d54ed309fe --- /dev/null +++ b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md @@ -0,0 +1,120 @@ +--- +layout: post +title: Resize the Grid in various dimension in in Blazor DataGrid | Syncfusion +description: Learn here all about Resize the Grid in various dimension in Syncfusion Blazor Grid. +platform: Blazor +control: DataGrid +documentation: ug +--- + +# Resize the Grid in various dimension in Blazor DataGrid + +The Syncfusion Blazor Grid offers a friendly way to resize the Grid, allowing you to adjust its width and height for improved data visualization. + +To resize the Grid externally, you can use an external button to modify the width of the parent element that contains the Grid. This will effectively resize the Grid along with its parent container. + +The following example demonstrates how to resize the Grid on external button click based on input. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + +
    +
    + + +
    +
    + + +
    +
    + Resize +
    +
    + +
    + + + + + + + + +
    + +@code { + private SfGrid Grid; + public List Orders { get; set; } + private SfNumericTextBox WidthTextBox; + private SfNumericTextBox HeightTextBox; + + private string ParentStyle; + + protected override void OnInitialized() + { + Orders = OrderDetails.GetAllRecords(); + } + + private void ResizeGrid() + { + var width = WidthTextBox?.Value ?? 400; + var height = HeightTextBox?.Value ?? 200; + ParentStyle = $"padding: 5px 5px; width: {width}px; height: {height}px;"; + } + +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + + public OrderDetails(int orderId, string customerId, string shipCity, string shipName, double freight, DateTime orderDate, string shipCountry) + { + this.OrderID = orderId; + this.CustomerID = customerId; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.Freight = freight; + this.OrderDate = orderDate; + this.ShipCountry = shipCountry; + } + + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, new DateTime(2024, 1, 5), "France")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, new DateTime(2024, 1, 7), "Germany")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, new DateTime(2024, 1, 10), "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, new DateTime(2024, 1, 12), "France")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, new DateTime(2024, 1, 14), "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, new DateTime(2024, 1, 16), "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, new DateTime(2024, 1, 18), "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, new DateTime(2024, 1, 20), "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora", 13.97, new DateTime(2024, 1, 22), "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", 81.91, new DateTime(2024, 1, 24), "Venezuela")); + } + return order; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVeDJrpLMwucNtH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file From a603a4b2f3add1f37d2c640854d1491edb30cf70 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 25 Apr 2025 17:09:30 +0530 Subject: [PATCH 02/16] Updated the md file --- .../custom-helper-function-inside-loop-with-template.md | 2 +- .../datagrid/how-to/customize-empty-grid-display-message.md | 2 +- blazor/datagrid/how-to/enable-or-disable-grid.md | 2 +- blazor/datagrid/how-to/resize-grid-in-various-dimension.md | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md b/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md index adbff0cd5f..823384009a 100644 --- a/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md +++ b/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md @@ -1,7 +1,7 @@ --- layout: post title: Use custom helper inside the loop with templates in Blazor DataGrid | Syncfusion -description: Learn here all about Place cancel icon in search bar in Syncfusion Blazor Grid. +description: Learn here all about Place cancel icon in search bar in Syncfusion Blazor DataGrid. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/how-to/customize-empty-grid-display-message.md b/blazor/datagrid/how-to/customize-empty-grid-display-message.md index 03ef6325eb..5cdcdbf5ce 100644 --- a/blazor/datagrid/how-to/customize-empty-grid-display-message.md +++ b/blazor/datagrid/how-to/customize-empty-grid-display-message.md @@ -9,7 +9,7 @@ documentation: ug # Customize the empty record template in Blazor DataGrid -The empty record template feature in the Grid allows you to use custom content such as images, text, or other components, when the Grid doesn't contain any records to display. This feature replaces the default message of 'No records to display' typically shown in the Grid. +The empty record template feature in the Syncfusion Blazor DataGrid allows you to use custom content such as images, text, or other components, when the Grid doesn't contain any records to display. This feature replaces the default message of 'No records to display' typically shown in the Grid. To activate this feature, set the `EmptyRecordTemplate` feature of the Grid. The `EmptyRecordTemplate` feature expects the HTML element or a function that returns the HTML element. diff --git a/blazor/datagrid/how-to/enable-or-disable-grid.md b/blazor/datagrid/how-to/enable-or-disable-grid.md index 4528b29314..76b7a2e3e7 100644 --- a/blazor/datagrid/how-to/enable-or-disable-grid.md +++ b/blazor/datagrid/how-to/enable-or-disable-grid.md @@ -9,7 +9,7 @@ documentation: ug # Enable disable Grid and its actions in Blazor DataGrid -You can enable/disable the Grid and its actions by applying/removing corresponding CSS styles. +You can enable/disable the Syncfusion Blazor DataGrid and its actions by applying/removing corresponding CSS styles. To enable/disable the Grid and its actions, follow the given steps: diff --git a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md index d54ed309fe..0d123abc7a 100644 --- a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md +++ b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md @@ -1,7 +1,7 @@ --- layout: post title: Resize the Grid in various dimension in in Blazor DataGrid | Syncfusion -description: Learn here all about Resize the Grid in various dimension in Syncfusion Blazor Grid. +description: Learn here all about Resize the Grid in various dimension in Syncfusion Blazor DataGrid. platform: Blazor control: DataGrid documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Resize the Grid in various dimension in Blazor DataGrid -The Syncfusion Blazor Grid offers a friendly way to resize the Grid, allowing you to adjust its width and height for improved data visualization. +The Syncfusion Blazor DataGrid offers a friendly way to resize the Grid, allowing you to adjust its width and height for improved data visualization. To resize the Grid externally, you can use an external button to modify the width of the parent element that contains the Grid. This will effectively resize the Grid along with its parent container. From b62f4d71d24129a89b06df6f5ead057112e3bce9 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Tue, 29 Apr 2025 18:57:55 +0530 Subject: [PATCH 03/16] Update the md file --- .../datagrid/how-to/access-public-methods.md | 92 +++++++--- .../blazor-webassembly-data-grid-using-cli.md | 34 ++-- ...ebassembly-datagrid-using-visual-studio.md | 40 ++--- .../how-to/custom-control-in-grid-toolbar.md | 92 ++++++---- blazor/datagrid/how-to/grid-customization.md | 157 ++++++++---------- .../how-to/group-column-chooser-items.md | 104 +++++++----- .../how-to/prevent-default-grid-action.md | 77 ++++++--- .../select-grid-rows-based-on-condition.md | 112 +++++++------ .../datagrid/how-to/server-side-using-cli.md | 34 ++-- 9 files changed, 442 insertions(+), 300 deletions(-) diff --git a/blazor/datagrid/how-to/access-public-methods.md b/blazor/datagrid/how-to/access-public-methods.md index 6e9045bb49..10cf7f328c 100644 --- a/blazor/datagrid/how-to/access-public-methods.md +++ b/blazor/datagrid/how-to/access-public-methods.md @@ -1,19 +1,21 @@ --- layout: post -title: Access public methods in Blazor DataGrid Component | Syncfusion -description: Learn here all about Access public methods in datagrid in Syncfusion Blazor DataGrid component and more. +title: Access public methods in Blazor DataGrid | Syncfusion +description: Learn here all about Access public methods in Grid in Syncfusion Blazor DataGrid and more. platform: Blazor control: DataGrid documentation: ug --- -# Access public methods in Blazor DataGrid Component +# Access public methods in Blazor DataGrid -You can access the public methods available in the DataGrid component by using its reference defined in the component initialization. +The Syncfusion Blazor DataGrid allows you to access its public methods by using a component reference defined during initialization. -This is demonstrated in the following sample code where the [Print](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Print) method of the datagrid component is invoked on button click using the datagrid reference, +This is demonstrated in the following sample code where the [Print](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Print) method of the Grid is invoked on button click using the Grid reference. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Grids @@ -29,38 +31,80 @@ This is demonstrated in the following sample code where the [Print](https://help     -@code{ +@code { private SfGrid DefaultGrid; public List Employees { get; set; } protected override void OnInitialized() { - Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData() - { - EmployeeID = x, - FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)], - LastName = (new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" })[new Random().Next(5)], - Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager", - "Inside Sales Coordinator" })[new Random().Next(4)], - HireDate = DateTime.Now.AddDays(-x), - }).ToList(); + Employees = EmployeeData.GetAllRecords(); } public async Task Print() { await this.DefaultGrid.Print(); } +} + +{% endhighlight %} +{% highlight c# tabtitle="EmployeeData.cs" %} - public class EmployeeData +public class EmployeeData +{ + public static List Employees = new List(); + + public EmployeeData() { } + + public EmployeeData(int EmployeeID, string FirstName, string LastName, string Title, string Country, string City, DateTime HireDate) { - public int? EmployeeID { get; set; } - public string FirstName { get; set; } - public string LastName { get; set; } - public string Title { get; set; } - public DateTime? HireDate { get; set; } + this.EmployeeID = EmployeeID; + this.FirstName = FirstName; + this.LastName = LastName; + this.Title = Title; + this.Country = Country; + this.City = City; + this.HireDate = HireDate; } + + public static List GetAllRecords() + { + if (Employees.Count == 0) + { + var firstNames = new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" }; + var lastNames = new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" }; + var titles = new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager", "Inside Sales Coordinator" }; + var countries = new string[] { "USA", "UK", "UAE", "NED", "BER" }; + var cities = new string[] { "New York", "London", "Dubai", "Amsterdam", "Berlin" }; + + Random random = new Random(); + for (int i = 1; i <= 5; i++) + { + Employees.Add(new EmployeeData( + i, + firstNames[random.Next(firstNames.Length)], + lastNames[random.Next(lastNames.Length)], + titles[random.Next(titles.Length)], + countries[random.Next(countries.Length)], + cities[random.Next(cities.Length)], + DateTime.Now.AddDays(-random.Next(1000, 5000)) + )); + } + } + return Employees; + } + + public int EmployeeID { get; set; } + public string? FirstName { get; set; } + public string? LastName { get; set; } + public string? Title { get; set; } + public string? Country { get; set; } + public string? City { get; set; } + public DateTime HireDate { get; set; } } -``` +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLSNfrFpzrqCjzn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> Similarly all the public methods of the DataGrid can be invoked. The available public methods can be found in this [link](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). +N> Similarly all the public methods of the Grid can be invoked. The available public methods can be found in this [link](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). diff --git a/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md b/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md index cf16ad6dba..7800f43c99 100644 --- a/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md +++ b/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Blazor DataGrid in WebAssembly | Syncfusion -description: Checkout the documentation for getting started with Blazor WebAssembly App and Syncfusion Blazor DataGrid Component in Visual Studio using .NET CLI and more. +description: Checkout the documentation for getting started with Blazor WebAssembly App and Syncfusion Blazor DataGrid in Visual Studio using .NET CLI and more. platform: Blazor control: DataGrid documentation: ug @@ -9,9 +9,9 @@ documentation: ug -# Blazor DataGrid Component in WebAssembly App using CLI +# Blazor DataGrid in WebAssembly App using CLI -This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor DataGrid component using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet/8.0). +This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor DataGrid using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet/8.0). ## Prerequisites @@ -50,7 +50,7 @@ dotnet new blazorwasm -o BlazorApp -ho N> If you have installed multiple SDK versions and need any specific framework version (net6.0/net7.0) project, then add -f flag along with dotnet new blazorwasm comment. Refer [here](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new#blazorwasm) for the available options. -## Install Syncfusion® Blazor packages in the App +## Install Syncfusion Blazor packages in the App To Add `Syncfusion.Blazor.Grid` NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. @@ -63,9 +63,9 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. -## Register Syncfusion® Blazor Service +## Register Syncfusion Blazor Service Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. @@ -76,7 +76,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %} @@ -113,9 +113,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor DataGrid component +## Add Blazor DataGrid -Add the Syncfusion® Blazor DataGrid component in the **~/Pages/Index.razor** file. +Add the Syncfusion Blazor DataGrid in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -155,11 +155,11 @@ dotnet run {% endhighlight %} {% endtabs %} -![Blazor DataGrid Component](../images/blazor-datagrid-component.png) +![Blazor DataGrid](../images/blazor-datagrid-component.png) ## Defining row data -To bind data for the DataGrid component, you can assign a IEnumerable object to the [dataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. You can assign the data source through the `OnInitialized` life cycle of the page. +To bind data for the Syncfusion Blazor DataGrid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. You can assign the data source through the `OnInitialized` life cycle of the page. {% tabs %} {% highlight razor %} @@ -195,7 +195,7 @@ To bind data for the DataGrid component, you can assign a IEnumerable object to The columns are automatically generated when columns declaration is empty or undefined while initializing the datagrid. -The DataGrid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component. In `GridColumn` component we have properties to customize columns. +The Syncfusion Blazor DataGrid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). In `GridColumn` we have properties to customize columns. Let’s check the properties used here: @@ -221,7 +221,7 @@ Let’s check the properties used here: ## Enable paging -The paging feature enables users to view the datagrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component. +The Syncfusion Blazor DataGrid allows to view records in a paged format. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings). {% tabs %} {% highlight razor %} @@ -241,7 +241,7 @@ The paging feature enables users to view the datagrid record in a paged view. It ## Enable sorting -The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings) component. +The Syncfusion Blazor DataGrid allows you to sort records in a desired order. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings). {% tabs %} {% highlight razor %} @@ -261,7 +261,7 @@ The sorting feature enables you to order the records. It can be enabled by setti ## Enable filtering -The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) component. +The Syncfusion Blazor DataGrid allows you to filter records and display a reduced set of data based on specific criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). {% tabs %} {% highlight razor %} @@ -281,7 +281,7 @@ The filtering feature enables you to view reduced amount of records based on fil ## Enable grouping -The grouping feature enables you to view the datagrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component. +The Syncfusion Blazor DataGrid allows you to view records in a grouped format. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings). {% tabs %} {% highlight razor %} @@ -299,7 +299,7 @@ The grouping feature enables you to view the datagrid record in a grouped view. {% endhighlight %} {% endtabs %} -![Blazor DataGrid Component](../images/blazor-datagrid.gif) +![Blazor DataGrid](../images/blazor-datagrid.gif) ## See also diff --git a/blazor/datagrid/how-to/blazor-webassembly-datagrid-using-visual-studio.md b/blazor/datagrid/how-to/blazor-webassembly-datagrid-using-visual-studio.md index 2d3ecda472..a6c57b4b7f 100644 --- a/blazor/datagrid/how-to/blazor-webassembly-datagrid-using-visual-studio.md +++ b/blazor/datagrid/how-to/blazor-webassembly-datagrid-using-visual-studio.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Stared with Blazor DataGrid in WebAssembly | Syncfusion -description: Checkout the documentation for getting started with Blazor WebAssembly App and Syncfusion Blazor DataGrid Component in Visual Studio and much more. +description: Checkout the documentation for getting started with Blazor WebAssembly App and Syncfusion Blazor DataGrid in Visual Studio and much more. platform: Blazor control: DataGrid documentation: ug @@ -9,9 +9,9 @@ documentation: ug -# Blazor DataGrid Component in WebAssembly App using Visual Studio +# Blazor DataGrid in WebAssembly App using Visual Studio -This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor DataGrid component using [Visual Studio](https://visualstudio.microsoft.com/vs/). +This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor DataGrid using [Visual Studio](https://visualstudio.microsoft.com/vs/). ## Prerequisites @@ -19,11 +19,11 @@ This article provides a step-by-step instructions for building Blazor WebAssembl ## Create a Blazor WebAssembly App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install Syncfusion® Blazor Grid and Themes NuGet in the App +## Install Syncfusion Blazor DataGrid and Themes NuGet in the App -To add `Blazor DataGrid` component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add `Blazor DataGrid` in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -35,9 +35,9 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. -## Register Syncfusion® Blazor Service +## Register Syncfusion Blazor Service Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. @@ -50,7 +50,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %} @@ -87,9 +87,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor DataGrid Component +## Add Blazor DataGrid -Add the Syncfusion® Blazor DataGrid component in the **~/Pages/Index.razor** file. +Add the Syncfusion Blazor DataGrid in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -119,13 +119,13 @@ Add the Syncfusion® Blazor DataGrid compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Grid in your default web browser. -![Blazor DataGrid Component](../images/blazor-datagrid-component.png) +![Blazor DataGrid](../images/blazor-datagrid-component.png) ## Defining row data -To bind data for the DataGrid component, you can assign a IEnumerable object to the [dataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. You can assign the data source through the `OnInitialized` life cycle of the page. +To bind data for the Syncfusion Blazor DataGrid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. You can assign the data source through the `OnInitialized` life cycle of the page. {% tabs %} {% highlight razor %} @@ -161,7 +161,7 @@ To bind data for the DataGrid component, you can assign a IEnumerable object to The columns are automatically generated when columns declaration is empty or undefined while initializing the datagrid. -The DataGrid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component. In `GridColumn` component we have properties to customize columns. +The Syncfusion Blazor DataGrid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). In `GridColumn` we have properties to customize columns. Let’s check the properties used here: @@ -187,7 +187,7 @@ Let’s check the properties used here: ## Enable paging -The paging feature enables users to view the datagrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to `true`. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component. +The Syncfusion Blazor DataGrid allows to view records in a paged format. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to `true`. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings). {% tabs %} {% highlight razor %} @@ -207,7 +207,7 @@ The paging feature enables users to view the datagrid record in a paged view. It ## Enable sorting -The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as `true`. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings) component. +The Syncfusion Blazor DataGrid allows you to sort records in a desired order. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as `true`. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings). {% tabs %} {% highlight razor %} @@ -227,7 +227,7 @@ The sorting feature enables you to order the records. It can be enabled by setti ## Enable filtering -The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as `true`. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) component. +The Syncfusion Blazor DataGrid allows you to filter records and display a reduced set of data based on specific criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as `true`. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). {% tabs %} {% highlight razor %} @@ -247,7 +247,7 @@ The filtering feature enables you to view reduced amount of records based on fil ## Enable grouping -The grouping feature enables you to view the datagrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as `true`. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component. +The Syncfusion Blazor DataGrid allows you to view records in a grouped format. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as `true`. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings). {% tabs %} {% highlight razor %} @@ -265,7 +265,7 @@ The grouping feature enables you to view the datagrid record in a grouped view. {% endhighlight %} {% endtabs %} -![Blazor DataGrid Component](../images/blazor-datagrid.gif) +![Blazor DataGrid](../images/blazor-datagrid.gif) ## See also diff --git a/blazor/datagrid/how-to/custom-control-in-grid-toolbar.md b/blazor/datagrid/how-to/custom-control-in-grid-toolbar.md index fb8af6c23f..8889253178 100644 --- a/blazor/datagrid/how-to/custom-control-in-grid-toolbar.md +++ b/blazor/datagrid/how-to/custom-control-in-grid-toolbar.md @@ -7,13 +7,15 @@ control: DataGrid documentation: ug --- -# Custom Control in Datagrid Toolbar in Blazor DataGrid Component +# Custom Control in Datagrid Toolbar in Blazor DataGrid -You can render custom controls inside the datagrid's toolbar area. This can be achieved by initializing the custom controls within the Template property of the Toolbar component. This toolbar component is defined inside the datagrid component. +The Syncfusion Blazor DataGrid allows you to render custom controls inside its toolbar area. This can be achieved by initializing the custom controls within the `Template` property of the Toolbar component. This toolbar component is defined inside the Grid. -This is demonstrated in the following sample code where Autocomplete component is rendered inside the DataGrid's toolbar and is used for performing search operation on the datagrid, +This is demonstrated in the following sample code where [Autocomplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) component is rendered inside the Grid's toolbar and is used for performing search operation on the Grid. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.DropDowns @@ -36,8 +38,8 @@ This is demonstrated in the following sample code where Autocomplete component i - + @@ -45,47 +47,77 @@ This is demonstrated in the following sample code where Autocomplete component i public class CustomerDetails { public string Name { get; set; } - public int Id { get; set; } } List Customers = new List { - new CustomerDetails() { Name = "ALFKI", Id = 1 }, - new CustomerDetails() { Name = "ANANTR", Id = 2 }, - new CustomerDetails() { Name = "ANTON", Id = 3 }, - new CustomerDetails() { Name = "BLONP", Id = 4 }, - new CustomerDetails() { Name = "BOLID", Id = 5 } + new CustomerDetails() { Name = "VINET", Id = 1 }, + new CustomerDetails() { Name = "TOMSP", Id = 2 }, + new CustomerDetails() { Name = "HANAR", Id = 3 }, + new CustomerDetails() { Name = "VICTE", Id = 4 }, + new CustomerDetails() { Name = "SUPRD", Id = 5 } }; private SfGrid Grid; public List Orders { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).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(); + Orders = Order.GetAllRecords(); } public async Task OnSearch(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) { - await this.Grid.Search(args.Value); - } - - public class Order - { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + await this.Grid.SearchAsync(args.Value); } } -``` -The following GIF represents the search operation performed on the datagrid using the Autocomplete component rendered in the toolbar, +{% endhighlight %} +{% highlight c# tabtitle="Order.cs" %} + + public class Order + { + public static List Orders = new List(); + + public Order(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.ShipCountry = shipCountry; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new Order(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France")); + Orders.Add(new Order(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany")); + Orders.Add(new Order(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil")); + Orders.Add(new Order(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France")); + Orders.Add(new Order(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium")); + Orders.Add(new Order(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil")); + Orders.Add(new Order(10254, "VICTE", 22.98, "Bern", "Chop-suey Chinese", "Switzerland")); + Orders.Add(new Order(10255, "TOMSP", 148.33, "Genève", "Richter Supermarkt", "Switzerland")); + Orders.Add(new Order(10256, "HANAR", 13.97, "Resende", "Wellington Import Export", "Brazil")); + Orders.Add(new Order(10257, "VINET", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela")); + + } + + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public string ShipCountry { get; set; } + } + +{% endhighlight %} +{% endtabs %} -![Blazor DataGrid with Custom ToolBar](../images/blazor-datagrid-custom-toolbar.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthoNTLFzGxGrdMg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/how-to/grid-customization.md b/blazor/datagrid/how-to/grid-customization.md index 95c9cda831..3e23c992b9 100644 --- a/blazor/datagrid/how-to/grid-customization.md +++ b/blazor/datagrid/how-to/grid-customization.md @@ -1,19 +1,21 @@ --- layout: post -title: DataGrid customization in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about DataGrid customization in Syncfusion Blazor DataGrid component and more. +title: DataGrid customization in Blazor DataGrid | Syncfusion +description: Checkout and learn here all about DataGrid customization in Syncfusion Blazor DataGrid and more. platform: Blazor control: DataGrid documentation: ug --- -# DataGrid Customization in Blazor DataGrid Component +# DataGrid Customization in Blazor DataGrid -It is possible to customize the default styles of the DataGrid component. This can be achieved by adding class dynamically to the columns using the `AddClass` method of the [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Query) event. Then the required styles are added to this class. +The Syncfusion Blazor DataGrid allows you to customize the default styles of the Grid by dynamically applying CSS classes to its cells. This can be achieved by adding class dynamically to the columns using the `AddClass` method of the [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Query) event. Then the required styles are added to this class. -This is demonstrated in the following sample code, +The following sample code demonstrates this customization approach: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Grids @@ -22,8 +24,8 @@ This is demonstrated in the following sample code, - + @@ -42,99 +44,76 @@ This is demonstrated in the following sample code, @code{ + private SfGrid Grid; public List Orders { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 12 * 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; } + Orders = Order.GetAllRecords(); } - public void QueryCellInfoHandler(QueryCellInfoEventArgs args) { - if (args.Data.Freight > 40) - { - args.Cell.AddClass(new string[] { "above-40" }); - } - else if (args.Data.Freight > 20 && args.Data.Freight <= 40) - { - args.Cell.AddClass(new string[] { "above-20" }); - } - else - { - args.Cell.AddClass(new string[] { "below-20" }); - } + public void QueryCellInfoHandler(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs args) { + if (args.Data.Freight > 40) + { + args.Cell.AddClass(new string[] { "above-40" }); } -} -``` - - - -The following image represents customized datagrid columns, -![Customizing Blazor DataGrid Columns](../images/blazor-datagrid-column-customization.png) +{% endhighlight %} +{% highlight c# tabtitle="Order.cs" %} + + public class Order + { + public static List Orders = new List(); + + public Order(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.ShipCountry = shipCountry; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new Order(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France")); + Orders.Add(new Order(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany")); + Orders.Add(new Order(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil")); + Orders.Add(new Order(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France")); + Orders.Add(new Order(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium")); + Orders.Add(new Order(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil")); + Orders.Add(new Order(10254, "VICTE", 22.98, "Bern", "Chop-suey Chinese", "Switzerland")); + Orders.Add(new Order(10255, "TOMSP", 148.33, "Genève", "Richter Supermarkt", "Switzerland")); + Orders.Add(new Order(10256, "HANAR", 13.97, "Resende", "Wellington Import Export", "Brazil")); + Orders.Add(new Order(10257, "VINET", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela")); + + } + + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public string ShipCountry { get; set; } + } + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrSDJruhcTxMXei?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/datagrid/how-to/group-column-chooser-items.md b/blazor/datagrid/how-to/group-column-chooser-items.md index 99a1054585..a8a7d7d432 100644 --- a/blazor/datagrid/how-to/group-column-chooser-items.md +++ b/blazor/datagrid/how-to/group-column-chooser-items.md @@ -9,15 +9,18 @@ documentation: ug # How to Group the Column Chooser Items -The [GridColumnChooserItemGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html) component helps to segregate the column chooser items as group. You can define column's group name by using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html#Syncfusion_Blazor_Grids_GridColumnChooserItemGroup_Title) property of GridColumnChooserItemGroup directive. +The [GridColumnChooserItemGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html) allows you to organize column chooser items into logical groups. You can define column's group name by using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html#Syncfusion_Blazor_Grids_GridColumnChooserItemGroup_Title) property of `GridColumnChooserItemGroup` directive. -The following code example demonstrates the default column chooser items as group. +The following example demonstrates how to group column chooser items using the default settings. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```csharp @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons +@using Playground.User - +