Skip to content

Documentation(954494) - Revamp the How-to section in blazor platform. #6018

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 20, 2025
Merged

Documentation(954494) - Revamp the How-to section in blazor platform. #6018

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4c7c476
Documentation(954494) - Revamp the How-to section in blazor platform.
Gayathri4135 May 20, 2025
c23b87f
updated the md file
Gayathri4135 May 20, 2025
1e185c5
update the md file
Gayathri4135 May 20, 2025
a392186
updated the md file
Gayathri4135 May 20, 2025
dab3fdf
updated the md file
Gayathri4135 May 20, 2025
8e440f9
update the md file
Gayathri4135 May 20, 2025
825f7dd
Merge branch 'hotfix/hotfix-v29.2.4' into 954494-How-to
Gayathri4135 May 20, 2025
a64f6bb
Update local-data.md
Gayathri4135 May 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 8 additions & 38 deletions blazor-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2019,45 +2019,9 @@
<li>
<a href="/blazor/datagrid/how-to/server-side-using-cli">Getting Started-Server side using CLI</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/blazor-webassembly-datagrid-using-visual-studio">Getting Started-Client side using Visual Studio</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/show-or-hide-columns-in-dialog-editing">Show or Hide columns in Dialog editing</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/tool-bar-with-drop-down-list">Create custom toolbar with drop-down list</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/customize-column-styles">Customize Column Styles</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/access-public-methods">Access public methods in datagrid</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/change-datasource-dynamically">Change datasource dynamically</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/custom-control-in-grid-toolbar">Custom control in datagrid toolbar</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/grid-customization">DataGrid customization</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/prevent-default-grid-action">Prevent default datagrid action</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/rowcell-index">Get index value of selected rowcell</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/select-grid-rows-based-on-condition">Select datagrid rows based on certain condition</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/customize-icon-column-menu">Customize column menu icon</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/group-column-chooser-items">Group column chooser items</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/calculate-column-value-based-on-other-columns">Calculate column value based on other columns</a>
</li>
Expand Down Expand Up @@ -2092,7 +2056,13 @@
<a href="/blazor/datagrid/how-to/grid-styling">Styling and appearance</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/customize-empty-grid-display-message">Customize empty grid display message</a>
<a href="/blazor/datagrid/how-to/customize-empty-grid-display-message">Customize the empty record template</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/resize-grid-in-various-dimension">Resize the Grid in various dimension</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template">Use custom helper inside the loop with templates</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/save-new-row-at-particular-index-in-page">Saving a new row at a particular index of the grid page</a>
Expand Down Expand Up @@ -2125,7 +2095,7 @@
<a href="/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox">Use radio button instead of checkbox in single selection mode of Grid</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/enable-or-disable-grid">Enable or Disable the Grid Component</a>
<a href="/blazor/datagrid/how-to/enable-or-disable-grid">Enable/Disable Grid and its actions</a>
</li>
</ul>
</li>
Expand Down
110 changes: 110 additions & 0 deletions blazor/datagrid/cell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,116 @@ The following example demonstrates how to add a `QueryCellInfo` event handler to

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

* Similarly, using the `QueryCellInfo` event, we can customize the appearance of the `Freight` column based on value ranges, and in this sample, each range is styled with distinct text and background colors using refined CSS:

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}

@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowPaging="true">
<GridEvents QueryCellInfo="QueryCellInfoHandler" TValue="Order"></GridEvents>
<GridPageSettings PageSize="8"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="ShipCountry" Width="130"></GridColumn>
</GridColumns>
</SfGrid>

<style>
.e-grid .e-gridcontent .e-rowcell.above-40 {
color: green;
background-color: #e8f5e9;
}

.e-grid .e-gridcontent .e-rowcell.above-20 {
color: blue;
background-color: #e3f2fd;
}

.e-grid .e-gridcontent .e-rowcell.below-20 {
color: red;
background-color: #ffebee;
}
</style>

@code{
private SfGrid<Order> Grid;
public List<Order> Orders { get; set; }

protected override void OnInitialized()
{
Orders = Order.GetAllRecords();
}

public void QueryCellInfoHandler(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs<Order> 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" });
}
}
}

{% endhighlight %}
{% highlight c# tabtitle="Order.cs" %}

public class Order
{
public static List<Order> Orders = new List<Order>();

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<Order> 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/VNroZyCqJkbikUBx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

> The [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.QueryCellInfoEventArgs-1.html) event is triggered for every cell of the grid, so it may impact the performance of the grid whether used to modify a large number of cells.

### Using CSS
Expand Down
162 changes: 161 additions & 1 deletion blazor/datagrid/column-chooser.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -708,4 +708,164 @@ The [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gri
{% endhighlight %}
{% endtabs %}

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

## Group column chooser items in Blazor DataGrid

The Syncfusion Blazor DataGrid supports grouping items in the column chooser dialog to improve usability and organization.It allows you to organize column chooser items into logical groups. This can be achieved using the [GridColumnChooserItemGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html).

To implement this:

* **Enable column chooser** – Set [ShowColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnChooser) property as **true** in the Grid and add **ColumnChooser** to the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar).

* **Use template in [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html)** – Customize the layout of chooser items using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) property.

* **Group items** – Use [GridColumnChooserItemGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html) to define logical groups with a [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html#Syncfusion_Blazor_Grids_GridColumnChooserItemGroup_Title), and render corresponding columns under each group.

* **Filter group columns** – Write helper methods to fetch grouped columns dynamically using field names.

The following example demonstrates how to group column chooser items using these steps:

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons

<SfGrid @ref="grid" TValue="Order" DataSource="@GridData" ShowColumnChooser="true" Toolbar="@( new List<string>() { "ColumnChooser"})" AllowPaging="true">
<GridColumnChooserSettings>
<Template>
@{
var ContextData = context as ColumnChooserTemplateContext;
}
@if (ShouldRenderGroup("Order Details", ContextData.Columns))
{
<GridColumnChooserItemGroup Title="Order Details">
@foreach (var column in GetGroupColumns("Order Details", ContextData.Columns))
{
<GridColumnChooserItem Column="column"></GridColumnChooserItem>
}
</GridColumnChooserItemGroup>
}
@if (ShouldRenderGroup("Ship Details", ContextData.Columns))
{
<GridColumnChooserItemGroup Title="Ship Details">
@foreach (var column in GetGroupColumns("Ship Details", ContextData.Columns))
{
<GridColumnChooserItem Column="column"></GridColumnChooserItem>
}
</GridColumnChooserItemGroup>
}
@if (ShouldRenderGroup("Date Details", ContextData.Columns))
{
<GridColumnChooserItemGroup Title="Date Details">
@foreach (var column in GetGroupColumns("Date Details", ContextData.Columns))
{
<GridColumnChooserItem Column="column"></GridColumnChooserItem>
}
</GridColumnChooserItemGroup>
}
</Template>
<FooterTemplate>
@{
var ContextFooterData = context as ColumnChooserFooterTemplateContext;
var visibles = ContextFooterData.Columns.Where(x => x.Visible).Select(x => x.HeaderText).ToArray();
var hiddens = ContextFooterData.Columns.Where(x => !x.Visible).Select(x => x.HeaderText).ToArray();
}
<SfButton IsPrimary="true" OnClick="@(async () => { await grid.ShowColumnsAsync(visibles); await grid.HideColumnsAsync(hiddens); })"> Submit</SfButton>
<SfButton @onclick="@(async () => await ContextFooterData.CancelAsync())">Abort</SfButton>
</FooterTemplate>
</GridColumnChooserSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" IsPrimaryKey="true" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.ShippedDate) HeaderText="Shipped Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Visible="false" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Visible="false" Width="150"></GridColumn>
</GridColumns>
</SfGrid>

@code
{
public List<Order> GridData { get; set; }
SfGrid<Order> grid { get; set; }
IDictionary<string, string[]> groups = new Dictionary<string, string[]>(){
{ "Order Details", new string[] { "OrderID", "CustomerID", "Freight" } }, { "Ship Details", new string[]{ "ShipCountry", "ShipCity" } }, {"Date Details", new string[]{"OrderDate", "ShippedDate"}}};
private GridColumn GetColumn(string field, List<GridColumn> columns)
{
GridColumn column = null;
if (columns.Any(x => { column = x; return x.Field == field; }))
{
return column;
}
return null;
}
private bool ShouldRenderGroup(string title, List<GridColumn> columns)
{
return groups[title].Any(x => columns.Any(y => y.Field == x));
}
private List<GridColumn> GetGroupColumns(string title, List<GridColumn> columns)
{
return columns.Where(x => groups[title].Contains(x.Field)).ToList();
}

protected override void OnInitialized()
{
GridData = Order.GetAllRecords();
}

}

{% endhighlight %}
{% highlight c# tabtitle="Order.cs" %}

public class Order
{
public static List<Order> order = new List<Order>();

public Order(int orderId, string customerId, string shipCity, string shipName, double freight, DateTime orderDate, string shipCountry, DateTime shippedDate)
{
this.OrderID = orderId;
this.CustomerID = customerId;
this.ShipCity = shipCity;
this.ShipName = shipName;
this.Freight = freight;
this.OrderDate = orderDate;
this.ShipCountry = shipCountry;
this.ShippedDate = shippedDate;
}

public static List<Order> GetAllRecords()
{
if (order.Count == 0)
{
order.Add(new Order(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, new DateTime(2024, 1, 5), "France", new DateTime(2024, 1, 10)));
order.Add(new Order(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, new DateTime(2024, 1, 7), "Germany", new DateTime(2024, 1, 13)));
order.Add(new Order(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, new DateTime(2024, 1, 10), "Brazil", new DateTime(2024, 1, 16)));
order.Add(new Order(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, new DateTime(2024, 1, 12), "France", new DateTime(2024, 1, 18)));
order.Add(new Order(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, new DateTime(2024, 1, 14), "Belgium", new DateTime(2024, 1, 20)));
order.Add(new Order(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, new DateTime(2024, 1, 16), "Brazil", new DateTime(2024, 1, 22)));
order.Add(new Order(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, new DateTime(2024, 1, 18), "Switzerland", new DateTime(2024, 1, 24)));
order.Add(new Order(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, new DateTime(2024, 1, 20), "Switzerland", new DateTime(2024, 1, 26)));
order.Add(new Order(10256, "WELLI", "Resende", "Wellington Importadora", 13.97, new DateTime(2024, 1, 22), "Brazil", new DateTime(2024, 1, 28)));
order.Add(new Order(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", 81.91, new DateTime(2024, 1, 24), "Venezuela", new DateTime(2024, 1, 30)));
}
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; }
public DateTime ShippedDate { get; set; }
}

{% endhighlight %}
{% endtabs %}

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