Skip to content

Commit 21b5791

Browse files
Naveen-PalanivelNaveen-Palanivel
committed
984345: Updated the UG Samples in Blazor Grid
1 parent 832f78b commit 21b5791

File tree

9 files changed

+66
-45
lines changed

9 files changed

+66
-45
lines changed

‎blazor/datagrid/adding-header-and-footer.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -697,7 +697,7 @@ The following example demonstrates how to repeat the column headers on every pag
697697
{
698698
PdfExportProperties ExportProperties = new PdfExportProperties();
699699
ExportProperties.IsRepeatHeader = true; // Repeats the Grid's header on every page in the PDF document.
700-
await this.DefaultGrid.PdfExport(ExportProperties);
700+
await this.DefaultGrid.ExportToPdfAsync(ExportProperties);
701701
}
702702
}
703703
protected override void OnInitialized()
@@ -760,4 +760,4 @@ public class OrderData
760760
{% endhighlight %}
761761
{% endtabs %}
762762

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

‎blazor/datagrid/how-to/enable-or-disable-grid.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ The following example demonstrates how to enable or disable the Grid and its act
3434
@using Syncfusion.Blazor.Grids
3535
@using Syncfusion.Blazor.Buttons
3636

37-
<SfButton CssClass="e-flat" @onclick="ToggleGrid">
37+
<SfButton CssClass="e-flat" onclick="ToggleGrid">
3838
@(isGridDisabled? "Enable Grid" : "Disable Grid")
3939
</SfButton>
4040

‎blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ Height="600" @ref="Grid">
5151
<SfComboBox TValue="string" TItem="Customer" DataSource="@Customers" @bind-Value="order.CustomerID"
5252
Placeholder="Select Customer" FloatLabelType="FloatLabelType.Always" AllowFiltering="true">
5353
<ComboBoxFieldSettings Value="CustomerID" Text="CustomerName"></ComboBoxFieldSettings>
54-
<ComboBoxEvents TValue="string" TItem="Customer" ValueChange="@(args => OnCustomerChange(args, order)" >
54+
<ComboBoxEvents TValue="string" TItem="Customer" ValueChange="args => OnCustomerChange(args, order)"></ComboBoxEvents>
5555
</SfComboBox>
5656
</div>
5757
</div>

‎blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ The following example demonstrates how to handle row selection in the Grid using
3232
<Template>
3333
@{
3434
var PrimaryVal = (context as Order);
35-
<SfRadioButton @ref="RadioButtonInstance" Name="RadioBtn "Value="@PrimaryVal.CustomerID" ValueChange="ValueChange" TChecked="string"></SfRadioButton>
35+
<SfRadioButton @ref="RadioButtonInstance" Name="RadioBtn" Value="@PrimaryVal.CustomerID" ValueChange="ValueChange" TChecked="string"></SfRadioButton>
3636
}
3737
</Template>
3838
</GridColumn>

‎blazor/datagrid/paging.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Paging in Blazor DataGrid
1111

12-
[Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) provides an option to display Syncfsion Blazor DataGrid data in segmented pages, making it easier to navigate through large datasets. This feature is particularly useful when dealing with extensive data sets.
12+
[Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) provides an option to display Syncfusion Blazor DataGrid data in segmented pages, making it easier to navigate through large datasets. This feature is particularly useful when dealing with extensive data sets.
1313

1414
To enable paging, you need to set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. This property determines whether paging is enabled or disabled for the Grid. When paging is enabled, a pager rendered at the bottom of the Grid, allowing you to navigate through different pages of data.
1515

@@ -450,6 +450,7 @@ The following example demonstrates how to render a **NumericTextBox** in the pag
450450
{% highlight razor tabtitle="Index.razor" %}
451451
@using Syncfusion.Blazor.Grids
452452
@using Syncfusion.Blazor.Inputs
453+
@using Syncfusion.Blazor.Navigations
453454

454455
<SfGrid DataSource="@GridData" @ref="Grid" AllowPaging="true">
455456
<GridPageSettings PageSize="@pageSize">
@@ -469,6 +470,7 @@ The following example demonstrates how to render a **NumericTextBox** in the pag
469470
<span> of @totalPages pages (@GridData.Count items)</span>
470471
</div>
471472
</div>
473+
</div>
472474
}
473475
</Template>
474476
</GridPageSettings>

‎blazor/datagrid/style-and-appearance/editing.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Editing customization in DataGrid | Syncfusion
4-
description: Learn here all about editing in Syncfusion Blazor DataGrid and more.
4+
description: Learn here all about editing customization in Syncfusion Blazor DataGrid component and more details.
55
platform: Blazor
66
control: DataGrid
77
documentation: ug
@@ -50,7 +50,7 @@ In this example, the **.e-gridform** class represents the editing form, and the
5050
<GridPageSettings PageSize="8"></GridPageSettings>
5151
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
5252
<GridColumns>
53-
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
53+
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
5454
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="120"></GridColumn>
5555
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
5656
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="100"></GridColumn>
@@ -126,7 +126,7 @@ public class OrderData
126126
{% endhighlight %}
127127
{% endtabs %}
128128

129-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLStyZhJXEhbeSg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
129+
{% previewsample "https://blazorplayground.syncfusion.com/embed/htLINOLffsrjCvCt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
130130

131131
## Customizing the edit dialog header element
132132

@@ -152,7 +152,7 @@ In this example, the **.e-edit-dialog** class represents the edit dialog, and th
152152
<GridPageSettings PageSize="8"></GridPageSettings>
153153
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.Grids.EditMode.Dialog"></GridEditSettings>
154154
<GridColumns>
155-
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
155+
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
156156
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="120"></GridColumn>
157157
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
158158
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="100"></GridColumn>
@@ -224,7 +224,7 @@ public class OrderData
224224
{% endhighlight %}
225225
{% endtabs %}
226226

227-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDretyNVJZGMwDNm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
227+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBetEhJzsqPbguh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
228228

229229
## Customizing the command column buttons
230230

@@ -254,7 +254,7 @@ In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** class
254254
<GridPageSettings PageSize="8"></GridPageSettings>
255255
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
256256
<GridColumns>
257-
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
257+
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
258258
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="120"></GridColumn>
259259
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>
260260
<GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="Ship Country" Width="100"></GridColumn>
@@ -337,5 +337,5 @@ public class OrderData
337337
{% endhighlight %}
338338
{% endtabs %}
339339

340-
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrItotrzWzFhlUN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
340+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrIjYBTfCdNCmvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
341341

‎blazor/datagrid/template-pdf-export.md‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -353,17 +353,21 @@ In the following example:
353353
<GridColumn Field=@nameof(ProductData.Status) HeaderText="Status" Width="180"></GridColumn>
354354
</GridColumns>
355355
</SfGrid>
356-
<style type="text/css" class="cssStyles">.detailtable td {
357-
font-size: 13px;
358-
padding: 4px;
359-
max-width: 0;
360-
overflow: hidden;
361-
text-overflow: ellipsis;
362-
white-space: nowrap;
363-
font-weight: normal;
364-
}
365356

366-
</style>@code {
357+
<style type="text/css" class="cssStyles">
358+
.detailtable td {
359+
font-size: 13px;
360+
padding: 4px;
361+
max-width: 0;
362+
overflow: hidden;
363+
text-overflow: ellipsis;
364+
white-space: nowrap;
365+
font-weight: normal;
366+
}
367+
368+
</style>
369+
370+
@code {
367371

368372
SfGrid<ProductData>DefaultGrid;
369373

‎blazor/datagrid/tool-bar.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -120,28 +120,28 @@ In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com
120120
Orders = OrderData.GetAllRecords();
121121
}
122122

123-
private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
123+
private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
124124
{
125125
if (args.Checked)
126126
{
127-
this.Grid.EnableToolbarItems(new List<string>() { "Grid_Expand", "Grid_Collapse" }, false);
127+
await this.Grid.EnableToolbarItemsAsync(new List<string>() { "Grid_Expand", "Grid_Collapse" }, false);
128128
}
129129
else
130130
{
131-
this.Grid.EnableToolbarItems(new List<string>() { "Grid_Expand", "Grid_Collapse" }, true);
131+
await this.Grid.EnableToolbarItemsAsync(new List<string>() { "Grid_Expand", "Grid_Collapse" }, true);
132132
}
133133

134134
}
135-
135+
136136
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
137137
{
138138
if (args.Item.Text == "Expand")
139139
{
140-
await this.Grid.GroupExpandAll();
140+
await this.Grid.ExpandAllGroupAsync();
141141
}
142142
if (args.Item.Text == "Collapse")
143143
{
144-
await this.Grid.GroupCollapseAll();
144+
await this.Grid.CollapseAllGroupAsync();
145145
}
146146
}
147147
}

‎blazor/datagrid/toolbar-items.md‎

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -323,11 +323,11 @@ By default, custom Toolbar Items are positioned on the **left** side of the Tool
323323
{
324324
if (args.Item.Text == "Expand all")
325325
{
326-
await this.Grid.GroupExpandAll();
326+
await this.Grid.ExpandAllGroupAsync();
327327
}
328328
if (args.Item.Text == "Collapse all")
329329
{
330-
await this.Grid.GroupCollapseAll();
330+
await this.Grid.CollapseAllGroupAsync();
331331
}
332332
}
333333
}
@@ -379,7 +379,7 @@ By default, custom Toolbar Items are positioned on the **left** side of the Tool
379379
{% endtabs %}
380380

381381

382-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVqiNBEKnOsnFxm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
382+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLIDOgtGItGVQpJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
383383

384384
## Both built-in and custom items in Toolbar
385385

@@ -496,7 +496,7 @@ In the following sample, the **Collapse All** Toolbar item is positioned on the
496496
<GridGroupSettings Columns=@GroupOption></GridGroupSettings>
497497
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings>
498498
<GridColumns>
499-
<GridColumn Field=@nameof(OrderData.EmployeeID) HeaderText="Employee ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120"></GridColumn>
499+
<GridColumn Field=@nameof(OrderData.EmployeeID) HeaderText="Employee ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Integer" Width="120"></GridColumn>
500500
<GridColumn Field=@nameof(OrderData.FirstName) HeaderText="First Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"></GridColumn>
501501
<GridColumn Field=@nameof(OrderData.Country) HeaderText="Country" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
502502
<GridColumn Field=@nameof(OrderData.PostalCode) HeaderText="PostalCode" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
@@ -518,11 +518,11 @@ In the following sample, the **Collapse All** Toolbar item is positioned on the
518518
{
519519
if (args.Item.Text == "Expand all")
520520
{
521-
await this.Grid.GroupExpandAll();
521+
await this.Grid.ExpandAllGroupAsync();
522522
}
523523
if (args.Item.Text == "Collapse all")
524524
{
525-
await this.Grid.GroupCollapseAll();
525+
await this.Grid.CollapseAllGroupAsync();
526526
}
527527
}
528528
}
@@ -628,27 +628,27 @@ This is demonstrated in the following sample code where there are custom toolbar
628628
}).ToList();
629629
}
630630

631-
public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
631+
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
632632
{
633633
if (args.Item.Text == "Add")
634634
{
635-
Grid.AddRecord();
635+
await Grid.AddRecordAsync();
636636
}
637637
if (args.Item.Text == "Edit")
638638
{
639-
Grid.StartEdit();
639+
await Grid.StartEditAsync();
640640
}
641641
if (args.Item.Text == "Delete")
642642
{
643-
Grid.DeleteRecord();
643+
await Grid.DeleteRecordAsync();
644644
}
645645
if (args.Item.Text == "Update")
646646
{
647-
Grid.EndEdit();
647+
await Grid.EndEditAsync();
648648
}
649649
if (args.Item.Text == "Cancel")
650650
{
651-
Grid.CloseEdit();
651+
await Grid.CloseEditAsync();
652652
}
653653
}
654654

@@ -674,26 +674,41 @@ You can customize the toolbar items tooltip text by adding toolbar items externa
674674
@using Syncfusion.Blazor.Grids
675675
@using Syncfusion.Blazor.Navigations
676676

677-
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar=@ToolbarItems>
677+
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar=@ToolbarItems AllowExcelExport="true" AllowPdfExport="true">
678678
<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
679+
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
679680
<GridColumns>
680681
<GridColumn Field=@nameof(OrderData.OrderID) IsPrimaryKey="true" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
681682
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
682683
<GridColumn Field=@nameof(OrderData.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
683684
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
684685
</GridColumns>
685686
</SfGrid>
686-
687687
@code {
688688
private SfGrid<OrderData> Grid;
689-
690689
public List<OrderData> Orders { get; set; }
691690
private List<object> ToolbarItems = new List<object>() {
692691
new ItemModel() { Text = "Excel",TooltipText="Export to Excel", PrefixIcon = "e-excelexport", Id = "Grid_excelexport"}, //Here Grid is SfGrid ID.
693692
new ItemModel(){ Text = "Pdf",TooltipText="Export to PDF", PrefixIcon= "e-pdfexport", Id="Grid_pdfexport"},
694693
new ItemModel(){ Text = "CSV",TooltipText="Export to CSV", PrefixIcon= "e-csvexport", Id="Grid_csvexport"},
695694
};
696695

696+
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
697+
{
698+
if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
699+
{
700+
await this.Grid.ExportToPdfAsync();
701+
}
702+
else if (args.Item.Id == "Grid_excelexport")
703+
{
704+
await Grid.ExportToExcelAsync();
705+
}
706+
else if (args.Item.Id == "Grid_csvexport")
707+
{
708+
await Grid.ExportToCsvAsync();
709+
}
710+
}
711+
697712
protected override void OnInitialized()
698713
{
699714
Orders = OrderData.GetAllRecords();
@@ -746,4 +761,4 @@ You can customize the toolbar items tooltip text by adding toolbar items externa
746761
{% endhighlight %}
747762
{% endtabs %}
748763

749-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVACXLuoSzCcoOM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
764+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVIiXZMiFpezqWu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

0 commit comments

Comments
 (0)