Skip to content

Commit 98901b3

Browse files
marin-bratanovmarin-bratanov
committed
docs(grid): example for Editable toggle
1 parent 2810603 commit 98901b3

File tree

1 file changed

+234
-0
lines changed

1 file changed

+234
-0
lines changed

‎knowledge-base/grid-change-editable-attribute-update-create.md‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
---
2+
title: Dynamically control column attributes during update or create. (Editable = true/false)
3+
description: How to change a column Editable for new or old items - during update or create
4+
type: how-to
5+
page_title: Change column Editable attribute during update or create
6+
slug: grid-change-editable-attribute-update-create
7+
position:
8+
tags:
9+
ticketid: 1428138
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Grid for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
Can I dynamically change column attributes during update and create? Specifically, I would like to make it editable during "create" and not editable during "update". How can I modify column attributes programmatically?
26+
27+
## Solution
28+
There are two general ways to do this:
29+
30+
* Use an [editor template](https://docs.telerik.com/blazor-ui/components/grid/templates#edit-template) and add logic to it that renders an actual editor only when needed (for example, the edited item has no ID, so it is a Create operation for a new item).
31+
* Bind the `Editable` property of the column to logic that returns `true|false` as needed.
32+
33+
In the two examples below, the `Name` column uses the `Editable` property, and the `Role` column uses the editor template.
34+
35+
>caption Example 1: use editor template and its item to bind the Editable field
36+
37+
````CSHTML
38+
@using Telerik.Blazor.Components.Grid
39+
@using Telerik.Blazor.Components.DropDownList
40+
41+
@CurrentlyEditedEmployee?.ID
42+
43+
<TelerikGrid Data=@MyData EditMode="inline" Pageable="true" Height="500px">
44+
<TelerikGridColumns>
45+
<TelerikGridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" /> @* hardcoded editable *@
46+
<TelerikGridColumn Field=@nameof(SampleData.Name) Editable="@( CurrentlyEditedEmployee?.ID > 0 )" Title="Name" /> @* bound to the currently edited item. Requires at least one editor template so it populates the variable used in the logic *@
47+
<TelerikGridColumn Field=@nameof(SampleData.Role) Title="Position">
48+
<EditorTemplate>
49+
@{
50+
CurrentlyEditedEmployee = context as SampleData;
51+
if (CurrentlyEditedEmployee.ID == 0) // default value for the field => new model
52+
{
53+
<TelerikDropDownList Data="@Roles" @bind-Value="CurrentlyEditedEmployee.Role" Width="120px" PopupHeight="auto"></TelerikDropDownList>
54+
}
55+
else
56+
{
57+
<span>old model, you cannot edit here</span>
58+
}
59+
}
60+
</EditorTemplate>
61+
</TelerikGridColumn>
62+
<TelerikGridCommandColumn>
63+
<TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
64+
<TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
65+
<TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
66+
</TelerikGridCommandColumn>
67+
</TelerikGridColumns>
68+
<TelerikGridEvents>
69+
<EventsManager OnUpdate="@UpdateHandler" OnCreate="@CreateHandler"></EventsManager>
70+
</TelerikGridEvents>
71+
<TelerikGridToolBar>
72+
<TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton>
73+
</TelerikGridToolBar>
74+
</TelerikGrid>
75+
76+
@code {
77+
public SampleData CurrentlyEditedEmployee { get; set; }
78+
79+
public void UpdateHandler(GridCommandEventArgs args)
80+
{
81+
SampleData item = (SampleData)args.Item;
82+
83+
//perform actual data source operations here
84+
//if you have a context added through an @inject statement, you could call its SaveChanges() method
85+
//myContext.SaveChanges();
86+
87+
var matchingItem = MyData.FirstOrDefault(c => c.ID == item.ID);
88+
89+
if (matchingItem != null)
90+
{
91+
matchingItem.Name = item.Name;
92+
matchingItem.Role = item.Role;
93+
}
94+
}
95+
96+
public void CreateHandler(GridCommandEventArgs e)
97+
{
98+
SampleData itm = e.Item as SampleData;
99+
itm.ID = MyData.Count + 1; // make sure an ID is available for the inserted item, this is what this logic uses
100+
MyData.Insert(0, itm);
101+
}
102+
103+
protected override void OnInitialized()
104+
{
105+
MyData = new List<SampleData>();
106+
107+
for (int i = 0; i < 50; i++)
108+
{
109+
MyData.Add(new SampleData()
110+
{
111+
ID = i,
112+
Name = "name " + i,
113+
Role = Roles[i % Roles.Count]
114+
});
115+
}
116+
}
117+
118+
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
119+
public class SampleData
120+
{
121+
public int ID { get; set; }
122+
public string Name { get; set; }
123+
public string Role { get; set; }
124+
}
125+
126+
public List<SampleData> MyData { get; set; }
127+
128+
public static List<string> Roles = new List<string> { "Manager", "Employee", "Contractor" };
129+
}
130+
````
131+
132+
>caption Example 2: Toggle the Editable property by using a flag you can set from the grid events. Does not require an editor template (even though it includes one for comparison).
133+
134+
````CSHTML
135+
@using Telerik.Blazor.Components.Grid
136+
@using Telerik.Blazor.Components.DropDownList
137+
138+
@CurrentlyEditedEmployee?.ID
139+
<br />
140+
@isEditable
141+
142+
<TelerikGrid Data=@MyData EditMode="inline" Pageable="true" Height="500px">
143+
<TelerikGridColumns>
144+
<TelerikGridColumn Field=@nameof(SampleData.ID) Title="ID" />
145+
<TelerikGridColumn Field=@nameof(SampleData.Name) Editable="@isEditable" Title="Name" />
146+
<TelerikGridColumn Field=@nameof(SampleData.Role) Title="Position">
147+
<EditorTemplate>
148+
@{
149+
CurrentlyEditedEmployee = context as SampleData;
150+
if (CurrentlyEditedEmployee.ID == 0) // default value for the field => new model
151+
{
152+
<TelerikDropDownList Data="@Roles" @bind-Value="CurrentlyEditedEmployee.Role" Width="120px" PopupHeight="auto"></TelerikDropDownList>
153+
}
154+
else
155+
{
156+
<span>old model, you cannot edit here</span>
157+
}
158+
}
159+
</EditorTemplate>
160+
</TelerikGridColumn>
161+
<TelerikGridCommandColumn>
162+
<TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
163+
<TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
164+
<TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
165+
</TelerikGridCommandColumn>
166+
</TelerikGridColumns>
167+
<TelerikGridEvents>
168+
<EventsManager OnEdit="@OnEdit" OnCancel="@OnCancel" OnUpdate="@UpdateHandler"></EventsManager>
169+
</TelerikGridEvents>
170+
<TelerikGridToolBar>
171+
<TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton>
172+
</TelerikGridToolBar>
173+
</TelerikGrid>
174+
175+
@code {
176+
void OnEdit(GridCommandEventArgs e)
177+
{
178+
isEditable = false;
179+
}
180+
void OnCancel(GridCommandEventArgs e)
181+
{
182+
isEditable = true;
183+
}
184+
bool isEditable { get; set; } = true;
185+
186+
public SampleData CurrentlyEditedEmployee { get; set; }
187+
188+
public void UpdateHandler(GridCommandEventArgs args)
189+
{
190+
isEditable = true; // this is the flag that we use for the Editable property
191+
192+
SampleData item = (SampleData)args.Item;
193+
194+
//perform actual data source operations here
195+
//if you have a context added through an @inject statement, you could call its SaveChanges() method
196+
//myContext.SaveChanges();
197+
198+
var matchingItem = MyData.FirstOrDefault(c => c.ID == item.ID);
199+
200+
if (matchingItem != null)
201+
{
202+
matchingItem.Name = item.Name;
203+
matchingItem.Role = item.Role;
204+
}
205+
}
206+
207+
protected override void OnInitialized()
208+
{
209+
MyData = new List<SampleData>();
210+
211+
for (int i = 0; i < 50; i++)
212+
{
213+
MyData.Add(new SampleData()
214+
{
215+
ID = i,
216+
Name = "name " + i,
217+
Role = Roles[i % Roles.Count]
218+
});
219+
}
220+
}
221+
222+
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
223+
public class SampleData
224+
{
225+
public int ID { get; set; }
226+
public string Name { get; set; }
227+
public string Role { get; set; }
228+
}
229+
230+
public List<SampleData> MyData { get; set; }
231+
232+
public static List<string> Roles = new List<string> { "Manager", "Employee", "Contractor" };
233+
}
234+
````

0 commit comments

Comments
 (0)