Skip to content

Commit f5f7843

Browse files
farveensulthanafarveensulthana
authored
Merge pull request #5999 from syncfusion-content/954877-How-to-section
954877: Modified the content based on the provided correction.
2 parents a507581 + 9b8d717 commit f5f7843

26 files changed

+440
-1039
lines changed

‎blazor-toc.html

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2013,46 +2013,22 @@
20132013
</ul>
20142014
</li>
20152015
<li>How To
2016-
<ul>
2016+
<ul>
20172017
<li>
20182018
<a href="/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli">Getting Started-Client side using CLI</a>
20192019
</li>
20202020
<li>
20212021
<a href="/blazor/datagrid/how-to/server-side-using-cli">Getting Started-Server side using CLI</a>
20222022
</li>
2023-
<li>
2024-
<a href="/blazor/datagrid/how-to/change-datasource-dynamically">Change datasource dynamically</a>
2025-
</li>
2026-
<li>
2027-
<a href="/blazor/datagrid/how-to/calculate-column-value-based-on-other-columns">Calculate column value based on other columns</a>
2028-
</li>
20292023
<li>
20302024
<a href="/blazor/datagrid/how-to/using-dictionary-values-in-grid-datasource">Using dictionary values in datagrid datasource</a>
20312025
</li>
20322026
<li>
20332027
<a href="/blazor/datagrid/how-to/upgrade-application-to-latest-version">Upgrade Application To Latest Version</a>
20342028
</li>
2035-
<li>
2036-
<a href="/blazor/datagrid/how-to/custom-toolbar-items-with-text-name-same-as-default-toolbar-items">Custom toolbar items with text name same as default toolbar items</a>
2037-
</li>
20382029
<li>
20392030
<a href="/blazor/datagrid/how-to/render-grid-inside-tab-with-specific-height">Render DataGrid inside the Tab with specific height</a>
20402031
</li>
2041-
<li>
2042-
<a href="/blazor/datagrid/how-to/provide-custom-data-source-and-enable-filter-option-for-drop-down-list">Provide custom data source and enabling filtering for DropDownList</a>
2043-
</li>
2044-
<li>
2045-
<a href="/blazor/datagrid/how-to/cascading-dropdownlist-with-grid-editing">Cascading DropDownList with DataGrid editing</a>
2046-
</li>
2047-
<li>
2048-
<a href="/blazor/datagrid/how-to/editing-with-template-column">Editing with template column</a>
2049-
</li>
2050-
<li>
2051-
<a href="/blazor/datagrid/how-to/hide-grid-header">Hide DataGrid Header</a>
2052-
</li>
2053-
<li>
2054-
<a href="/blazor/datagrid/how-to/display-custom-tool-tip-in-grid-cell">Display Custom Tooltip in DataGrid cell</a>
2055-
</li>
20562032
<li>
20572033
<a href="/blazor/datagrid/how-to/grid-styling">Styling and appearance</a>
20582034
</li>
@@ -2065,30 +2041,15 @@
20652041
<li>
20662042
<a href="/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template">Use custom helper inside the loop with templates</a>
20672043
</li>
2068-
<li>
2069-
<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>
2070-
</li>
2071-
<li>
2072-
<a href="/blazor/datagrid/how-to/customize-filter-choice-count-in-excel-filter-dialog">Customize filter choice items count for Excel filter dialog</a>
2073-
</li>
2074-
<li>
2075-
<a href="/blazor/datagrid/how-to/custom-delete-confirmation-dialog">Custom delete confirmation dialog</a>
2076-
</li>
20772044
<li>
20782045
<a href="/blazor/datagrid/how-to/create-custom-grid-component">Create custom Grid component</a>
20792046
</li>
20802047
<li>
20812048
<a href="/blazor/datagrid/how-to/effectively-add-range-of-items-to-observable-collection">Effectively add a range of items into ObservableCollection</a>
20822049
</li>
2083-
<li>
2084-
<a href="/blazor/datagrid/how-to/hide-command-column-based-on-record-detail">Hide command column in record based on record detail</a>
2085-
</li>
20862050
<li>
20872051
<a href="/blazor/datagrid/how-to/define-events-programmatically">Define the GridEvents programmatically in DataGrid</a>
20882052
</li>
2089-
<li>
2090-
<a href="/blazor/datagrid/how-to/hide-detail-template-icon-when-record-details-has-no-record">Hide detail template icon when record details has no record</a>
2091-
</li>
20922053
<li>
20932054
<a href="/blazor/datagrid/how-to/css-isolation-for-grid">CSS Isolation for DataGrid</a>
20942055
</li>

‎blazor/datagrid/column-template.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -735,6 +735,66 @@ In the following code, checkbox is rendered based on **Discontinued** field valu
735735

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

738+
### Calculate column value based on other columns in Blazor DataGrid
739+
740+
In the Syncfusion Blazor DataGrid, it is often necessary to display a value that is not directly available in the underlying data source but is instead derived from existing column values. For example, in financial or inventory applications, users may want to show a total or calculated value such as the sum of two cost fields in a separate column. This can be done using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property.
741+
742+
The `Template` allows customizing how a column's content is rendered, and it provides access to the current row's data through the **context** parameter. This makes it possible to define inline expressions or logic that compute values based on other fields in the same row.
743+
744+
In the example below, a new column called **FinalCost** is created to display the sum of the **ManfCost** and **LabCost** columns. This column does not bind to a field in the model but instead calculates the value dynamically within the template. The **context** is cast to the appropriate model type (Order), and the sum is computed and displayed in a <div> element.
745+
746+
{% tabs %}
747+
{% highlight razor tabtitle="Index.razor" %}
748+
@using Syncfusion.Blazor.Grids
749+
750+
<SfGrid DataSource="@Orders" AllowPaging="true">
751+
<GridPageSettings PageSize="8"></GridPageSettings>
752+
<GridColumns>
753+
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Center" Width="120"></GridColumn>
754+
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" TextAlign="TextAlign.Center" Width="120"></GridColumn>
755+
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type=ColumnType.Date TextAlign="TextAlign.Center" Width="120"></GridColumn>
756+
<GridColumn Field=@nameof(Order.ManfCost) HeaderText="Manufacturing Cost" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>
757+
<GridColumn Field=@nameof(Order.LabCost) HeaderText="Labor Cost" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>
758+
<GridColumn Field=@nameof(Order.FinalCost) HeaderText="Final price" Format="C2" TextAlign="TextAlign.Center" Width="120">
759+
<Template>
760+
@{
761+
var value = (context as Order);
762+
var finalAmount = value.ManfCost + value.LabCost;
763+
<div>$@finalAmount</div>
764+
}
765+
</Template>
766+
</GridColumn>
767+
</GridColumns>
768+
</SfGrid>
769+
770+
@code{
771+
public List<Order> Orders { get; set; }
772+
protected override void OnInitialized()
773+
{
774+
Orders = Enumerable.Range(1, 25).Select(x => new Order()
775+
{
776+
OrderID = 1000 + x,
777+
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
778+
ManfCost = 10 * x,
779+
LabCost = 3 * x,
780+
OrderDate = DateTime.Now.AddDays(-x),
781+
}).ToList();
782+
}
783+
public class Order
784+
{
785+
public int? OrderID { get; set; }
786+
public string CustomerID { get; set; }
787+
public DateTime? OrderDate { get; set; }
788+
public int? ManfCost { get; set; }
789+
public int? LabCost { get; set; }
790+
public double? FinalCost { get; set; }
791+
}
792+
}
793+
{% endhighlight %}
794+
{% endtabs %}
795+
796+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVoNfKNztPbnpjL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
797+
738798
## How to get the row object by clicking on the template element
739799

740800
The Grid component allows you to retrieve the row object of the selected record when clicking on a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) element. This feature can be useful when you need to perform custom actions based on the selected record.

‎blazor/datagrid/command-column-editing.md

Lines changed: 84 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,4 +204,87 @@ public class OrderDetails
204204

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

207-
> The Grid component does not support adding a new record using the command column. Because, the command column, along with the command buttons, will be rendered only after the record is created. As a result, Grid only supported edit, delete, cancel, and update options in the command column.
207+
> The Grid component does not support adding a new record using the command column. Because, the command column, along with the command buttons, will be rendered only after the record is created. As a result, Grid only supported edit, delete, cancel, and update options in the command column.
208+
209+
## Hide the command column button in a specific record
210+
211+
In the Syncfusion Blazor DataGrid, command columns are used to perform CRUD operations on records, such as editing or deleting. Sometimes, you may want to hide the command buttons for specific records based on certain conditions. This can be done by using the [`RowDataBound`](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event, which is triggered every time a row is created or updated in the Grid.
212+
213+
This is demonstrated in the following steps where the `RowDataBound` event is triggered when a record is created. Based on the record details, you can add a specific class name to that row and hide the command buttons using CSS styles.
214+
215+
* Use the `RowDataBound` event of the Grid to access each row's data at the time of rendering.
216+
* Inside the event, check the value of the **Verified** column for the current record.
217+
* Based on the value of the **Verified** column, if Verified is **false**, only the **Edit** button will be shown; otherwise **Delete** button will be shown.
218+
* In order to hide buttons (**display: none** style to the buttons), CSS class is applied to the row inside the `RowDataBound` event based on the record condition using `addClass` method, and corresponding CSS rules are defined to hide the respective command buttons.
219+
220+
{% tabs %}
221+
{% highlight razor tabtitle="Index.razor" %}
222+
@using Syncfusion.Blazor.Grids
223+
224+
<SfGrid DataSource="@Orders" AllowPaging="true" Height="315">
225+
<GridEvents RowDataBound="RowBound" TValue="Order"></GridEvents>
226+
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
227+
<GridColumns>
228+
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
229+
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
230+
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn>
231+
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
232+
<GridColumn HeaderText="Manage Records" Width="150">
233+
<GridCommandColumns>
234+
<GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn>
235+
<GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></GridCommandColumn>
236+
<GridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-update", CssClass = "e-flat" })"></GridCommandColumn>
237+
<GridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-cancel-icon", CssClass = "e-flat" })"></GridCommandColumn>
238+
</GridCommandColumns>
239+
</GridColumn>
240+
</GridColumns>
241+
</SfGrid>
242+
<style>
243+
/*to remove the edit button alone*/
244+
.e-removeEditcommand .e-unboundcell .e-unboundcelldiv button.e-Editbutton {
245+
display: none;
246+
}
247+
/*to remove the delete button alone*/
248+
.e-removeDeletecommand .e-unboundcell .e-unboundcelldiv button.e-Deletebutton {
249+
display: none;
250+
}
251+
</style>
252+
@code{
253+
public List<Order> Orders { get; set; }
254+
public void RowBound(RowDataBoundEventArgs<Order> Args)
255+
{
256+
if (Args.Data.Verified)
257+
{
258+
Args.Row.AddClass(new string[] { "e-removeEditcommand" });
259+
}
260+
else
261+
{
262+
Args.Row.AddClass(new string[] { "e-removeDeletecommand" });
263+
}
264+
}
265+
protected override void OnInitialized()
266+
{
267+
Orders = Enumerable.Range(1, 75).Select(x => new Order()
268+
{
269+
OrderID = 1000 + x,
270+
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
271+
Freight = 2.1 * x,
272+
OrderDate = DateTime.Now.AddDays(-x),
273+
Verified = (new bool[] { true, false })[new Random().Next(2)],
274+
ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
275+
}).ToList();
276+
}
277+
public class Order
278+
{
279+
public int? OrderID { get; set; }
280+
public string CustomerID { get; set; }
281+
public DateTime? OrderDate { get; set; }
282+
public double? Freight { get; set; }
283+
public bool Verified { get; set; }
284+
public string ShipCountry { get; set; }
285+
}
286+
}
287+
{% endhighlight %}
288+
{% endtabs %}
289+
290+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLetprbTsENCfsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

‎blazor/datagrid/how-to/calculate-column-value-based-on-other-columns.md

Lines changed: 0 additions & 65 deletions
This file was deleted.

0 commit comments

Comments
 (0)