Skip to content

Commit 2d2488c

Browse files
authored
Update toolbar.md
1 parent c370b63 commit 2d2488c

File tree

1 file changed

+26
-55
lines changed

1 file changed

+26
-55
lines changed

components/grid/toolbar.md

Lines changed: 26 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ The [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview) provides se
3636
| Sort | `GridToolBarSortTool` | A toggle button that opens a list of the sortable columns. Click a column to sort by it. On mobile devices, the popup renders as an `ActionSheet`. The tool also exposes an `Icon` parameter that allows you to override the default icon. |
3737
| SearchBox | `GridToolBarSearchBoxTool` | A [searchbox that filters multiple string columns](slug:grid-searchbox) simultaneously. |
3838

39+
The `Edit` command tool is disabled if there is no selected Grid row. The `Save` and `Cancel` commands are disabled when there is no row in edit mode.
40+
3941
### Layout Tools
4042

4143
| Tool Name | Tool Tag | Description |
@@ -84,45 +86,16 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
8486
<TelerikButton OnClick="@OnToolbarCustomClick">Custom Grid Tool</TelerikButton>
8587
</GridToolBarCustomTool>
8688
87-
<GridToolBarAddTool>
88-
Add a product
89-
</GridToolBarAddTool>
90-
91-
<GridToolBarCsvExportTool>
92-
Export to CSV
93-
</GridToolBarCsvExportTool>
94-
95-
<GridToolBarExcelExportTool>
96-
Export to Excel
97-
</GridToolBarExcelExportTool>
98-
99-
<GridToolBarFilterTool>
100-
Filter
101-
</GridToolBarFilterTool>
102-
103-
<GridToolBarSortTool>
104-
Sort
105-
</GridToolBarSortTool>
106-
107-
<GridToolBarGroupTool>
108-
Group
109-
</GridToolBarGroupTool>
110-
111-
<GridToolBarEditTool>
112-
Edit
113-
</GridToolBarEditTool>
114-
115-
<GridToolBarSaveEditTool>
116-
Save
117-
</GridToolBarSaveEditTool>
118-
119-
<GridToolBarCancelEditTool>
120-
Cancel
121-
</GridToolBarCancelEditTool>
122-
123-
<GridToolBarDeleteTool>
124-
Delete
125-
</GridToolBarDeleteTool>
89+
<GridToolBarAddTool>Add a product</GridToolBarAddTool>
90+
<GridToolBarCsvExportTool>Export to CSV</GridToolBarCsvExportTool>
91+
<GridToolBarExcelExportTool>Export to Excel</GridToolBarExcelExportTool>
92+
<GridToolBarFilterTool>Filter</GridToolBarFilterTool>
93+
<GridToolBarSortTool>Sort</GridToolBarSortTool>
94+
<GridToolBarGroupTool>Group</GridToolBarGroupTool>
95+
<GridToolBarEditTool>Edit</GridToolBarEditTool>
96+
<GridToolBarSaveEditTool>Save</GridToolBarSaveEditTool>
97+
<GridToolBarCancelEditTool>Cancel</GridToolBarCancelEditTool>
98+
<GridToolBarDeleteTool>Delete</GridToolBarDeleteTool>
12699
127100
<GridToolBarSpacerTool />
128101
@@ -141,7 +114,7 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
141114
</TelerikGrid>
142115
143116
@code {
144-
private List<Person> GridData { get; set; }
117+
private List<Person> GridData { get; set; } = new();
145118
private IEnumerable<Person> SelectedPeople { get; set; } = Enumerable.Empty<Person>();
146119
147120
private void OnToolbarCustomClick()
@@ -151,59 +124,57 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
151124
152125
protected override void OnInitialized()
153126
{
154-
var data = new List<Person>();
155127
var rand = new Random();
156128
157129
for (int i = 0; i < 50; i++)
158130
{
159-
data.Add(new Person()
131+
GridData.Add(new Person()
160132
{
161133
EmployeeId = i,
162134
Name = "Employee " + i.ToString(),
163135
HireDate = DateTime.Now.Date.AddDays(-(i * 2)),
164136
AgeInYears = 20
165137
});
166138
}
167-
GridData = new List<Person>(data);
168139
}
169140
170141
private void CreateItem(GridCommandEventArgs args)
171142
{
172-
var argsItem = args.Item as Person;
143+
var createdItem = (Person)args.Item;
173144
174-
argsItem.EmployeeId = GridData.Count + 1;
145+
createdItem.EmployeeId = GridData.Count + 1;
175146
176-
GridData.Insert(0, argsItem);
147+
GridData.Insert(0, createdItem);
177148
}
178149
179150
private void UpdateItem(GridCommandEventArgs args)
180151
{
181-
var argsItem = args.Item as Person;
182-
var itemForEdit = GridData.FirstOrDefault(i => i.EmployeeId == argsItem.EmployeeId);
152+
var updatedItem = (Person)args.Item;
153+
var itemForEdit = GridData.FirstOrDefault(i => i.EmployeeId == updatedItem.EmployeeId);
183154
184155
if (itemForEdit != null)
185156
{
186-
itemForEdit.AgeInYears = argsItem.AgeInYears;
187-
itemForEdit.HireDate = argsItem.HireDate;
188-
itemForEdit.Name = argsItem.Name;
157+
itemForEdit.AgeInYears = updatedItem.AgeInYears;
158+
itemForEdit.HireDate = updatedItem.HireDate;
159+
itemForEdit.Name = updatedItem.Name;
189160
}
190161
}
191162
192163
private void DeleteItem(GridCommandEventArgs args)
193164
{
194-
var argsItem = args.Item as Person;
165+
var deletedItem = (Person)args.Item;
195166
196-
if (GridData.Contains(argsItem))
167+
if (GridData.Contains(deletedItem))
197168
{
198-
GridData.Remove(argsItem);
169+
GridData.Remove(deletedItem);
199170
}
200171
}
201172
202173
public class Person
203174
{
204175
public int? EmployeeId { get; set; }
205176
206-
public string Name { get; set; }
177+
public string Name { get; set; } = string.Empty;
207178
208179
public int? AgeInYears { get; set; }
209180

0 commit comments

Comments
 (0)