Skip to content

Commit 4d8e897

Browse files
marin-bratanovmarin-bratanov
committed
docs(grid): add sample CRUD operations with the local data
1 parent 1d4650d commit 4d8e897

File tree

4 files changed

+359
-271
lines changed

4 files changed

+359
-271
lines changed

‎components/grid/editing/incell.md

Lines changed: 97 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -24,86 +24,106 @@ To enable InCell editing mode, set the `EditMode` property of the grid to `incel
2424
2525
<strong>Click a cell, edit it and click outside of the cell to see the change. Editing is prevented for the first two items.</strong>
2626
27-
<TelerikGrid Data=@MyData EditMode="incell" Pageable="true" Height="200">
28-
<TelerikGridEvents>
29-
<EventsManager OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler"></EventsManager>
30-
</TelerikGridEvents>
31-
<TelerikGridToolBar>
32-
<TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton>
33-
</TelerikGridToolBar>
34-
<TelerikGridColumns>
35-
<TelerikGridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
36-
<TelerikGridColumn Field=@nameof(SampleData.Name) Title="Name" />
37-
<TelerikGridCommandColumn>
38-
<TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
39-
<TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
40-
</TelerikGridCommandColumn>
41-
</TelerikGridColumns>
27+
<TelerikGrid Data=@MyData EditMode="incell" Pageable="true">
28+
<TelerikGridEvents>
29+
<EventsManager OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler"></EventsManager>
30+
</TelerikGridEvents>
31+
<TelerikGridToolBar>
32+
<TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton>
33+
</TelerikGridToolBar>
34+
<TelerikGridColumns>
35+
<TelerikGridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
36+
<TelerikGridColumn Field=@nameof(SampleData.Name) Title="Name" />
37+
<TelerikGridCommandColumn>
38+
<TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
39+
<TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
40+
</TelerikGridCommandColumn>
41+
</TelerikGridColumns>
4242
</TelerikGrid>
4343
4444
@functions {
45-
public void EditHandler(GridCommandEventArgs args)
46-
{
47-
SampleData item = (SampleData)args.Item;
48-
49-
//prevent opening for edit based on condition
50-
if (item.ID < 3)
51-
{
52-
args.IsCancelled = true;//the general approach for cancelling an event
53-
}
54-
55-
Console.WriteLine("Edit event is fired for column " + args.Field);
56-
}
57-
58-
public void UpdateHandler(GridCommandEventArgs args)
59-
{
60-
string fieldName = args.Field;
61-
object newVal = args.Value; //you can cast this, if necessary, according to your model
62-
63-
SampleData item = (SampleData)args.Item;//you can also use the entire model
64-
65-
//perform actual data source operation here
66-
67-
//if you have a context added through an @inject statement, you could call its SaveChanges() method
68-
//myContext.SaveChanges();
69-
70-
Console.WriteLine("Update event is fired for " + args.Field + " with value " + args.Value);
71-
}
72-
73-
public void CreateHandler(GridCommandEventArgs args)
74-
{
75-
SampleData item = (SampleData)args.Item;
76-
77-
//perform actual data source operation here
78-
79-
Console.WriteLine("Create event is fired.");
80-
}
81-
82-
public void DeleteHandler(GridCommandEventArgs args)
83-
{
84-
SampleData item = (SampleData)args.Item;
85-
86-
//perform actual data source operation here
87-
88-
//if you have a context added through an @inject statement, you could call its SaveChanges() method
89-
//myContext.SaveChanges();
90-
91-
Console.WriteLine("Update event is fired.");
92-
}
93-
94-
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
95-
public class SampleData
96-
{
97-
public int ID { get; set; }
98-
public string Name { get; set; }
99-
}
100-
101-
102-
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
103-
{
104-
ID = x,
105-
Name = "name " + x
106-
});
45+
public void EditHandler(GridCommandEventArgs args)
46+
{
47+
SampleData item = (SampleData)args.Item;
48+
49+
//prevent opening for edit based on condition
50+
if (item.ID < 3)
51+
{
52+
args.IsCancelled = true;//the general approach for cancelling an event
53+
}
54+
55+
Console.WriteLine("Edit event is fired for column " + args.Field);
56+
}
57+
58+
public void UpdateHandler(GridCommandEventArgs args)
59+
{
60+
string fieldName = args.Field;
61+
object newVal = args.Value; //you can cast this, if necessary, according to your model
62+
63+
SampleData item = (SampleData)args.Item;//you can also use the entire model
64+
65+
//perform actual data source operation here
66+
67+
//if you have a context added through an @inject statement, you could call its SaveChanges() method
68+
//myContext.SaveChanges();
69+
70+
var matchingItem = MyData.FirstOrDefault(c => c.ID == item.ID);
71+
if (matchingItem != null)
72+
{
73+
matchingItem.Name = item.Name;
74+
}
75+
76+
Console.WriteLine("Update event is fired for " + args.Field + " with value " + args.Value);
77+
}
78+
79+
public void CreateHandler(GridCommandEventArgs args)
80+
{
81+
SampleData item = (SampleData)args.Item;
82+
83+
//perform actual data source operation here
84+
85+
item.ID = MyData.Count;
86+
MyData.Add(item);
87+
88+
Console.WriteLine("Create event is fired.");
89+
}
90+
91+
public void DeleteHandler(GridCommandEventArgs args)
92+
{
93+
SampleData item = (SampleData)args.Item;
94+
95+
//perform actual data source operation here
96+
97+
//if you have a context added through an @inject statement, you could call its SaveChanges() method
98+
//myContext.SaveChanges();
99+
100+
MyData.Remove(item);
101+
102+
Console.WriteLine("Delete event is fired.");
103+
}
104+
105+
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
106+
public class SampleData
107+
{
108+
public int ID { get; set; }
109+
public string Name { get; set; }
110+
}
111+
112+
public List<SampleData> MyData { get; set; }
113+
114+
protected override void OnInit()
115+
{
116+
MyData = new List<SampleData>();
117+
118+
for (int i = 0; i < 50; i++)
119+
{
120+
MyData.Add(new SampleData()
121+
{
122+
ID = i,
123+
Name = "Name " + i.ToString()
124+
});
125+
}
126+
}
107127
}
108128
````
109129

‎components/grid/editing/inline.md

Lines changed: 114 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -27,99 +27,123 @@ To enable Inline editing in the grid, set its `EditMode` property to `inline`, t
2727
<strong>Editing is cancelled for the first two records.</strong>
2828
2929
<TelerikGrid Data=@MyData EditMode="inline" Pageable="true">
30-
<TelerikGridEvents>
31-
<EventsManager OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler"></EventsManager>
32-
</TelerikGridEvents>
33-
<TelerikGridToolBar>
34-
<TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton>
35-
</TelerikGridToolBar>
36-
<TelerikGridColumns>
37-
<TelerikGridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
38-
<TelerikGridColumn Field=@nameof(SampleData.Name) Title="Name" />
39-
<TelerikGridCommandColumn>
40-
<TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
41-
<TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
42-
<TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
43-
<TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
44-
</TelerikGridCommandColumn>
45-
</TelerikGridColumns>
30+
<TelerikGridEvents>
31+
<EventsManager OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler"></EventsManager>
32+
</TelerikGridEvents>
33+
<TelerikGridToolBar>
34+
<TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton>
35+
</TelerikGridToolBar>
36+
<TelerikGridColumns>
37+
<TelerikGridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
38+
<TelerikGridColumn Field=@nameof(SampleData.Name) Title="Name" />
39+
<TelerikGridCommandColumn>
40+
<TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
41+
<TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
42+
<TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
43+
<TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
44+
</TelerikGridCommandColumn>
45+
</TelerikGridColumns>
4646
</TelerikGrid>
4747
4848
@functions {
49-
public void EditHandler(GridCommandEventArgs args)
50-
{
51-
SampleData item = (SampleData)args.Item;
52-
53-
//prevent opening for edit based on condition
54-
if (item.ID < 3)
55-
{
56-
args.IsCancelled = true;//the general approach for cancelling an event
57-
}
58-
59-
Console.WriteLine("Edit event is fired.");
60-
}
61-
62-
public void UpdateHandler(GridCommandEventArgs args)
63-
{
64-
SampleData item = (SampleData)args.Item;
65-
66-
//perform actual data source operations here
67-
68-
//if you have a context added through an @inject statement, you could call its SaveChanges() method
69-
//myContext.SaveChanges();
70-
71-
Console.WriteLine("Update event is fired.");
72-
}
73-
74-
public void DeleteHandler(GridCommandEventArgs args)
75-
{
76-
SampleData item = (SampleData)args.Item;
77-
78-
//perform actual data source operation here
79-
80-
//if you have a context added through an @inject statement, you could call its SaveChanges() method
81-
//myContext.SaveChanges();
82-
83-
Console.WriteLine("Delete event is fired.");
84-
}
85-
86-
87-
public void CreateHandler(GridCommandEventArgs args)
88-
{
89-
SampleData item = (SampleData)args.Item;
90-
91-
//perform actual data source operation here
92-
93-
Console.WriteLine("Add event is fired.");
94-
}
95-
96-
public void CancelHandler(GridCommandEventArgs args)
97-
{
98-
Console.WriteLine("Cancel event is fired.");
99-
100-
SampleData item = (SampleData)args.Item;
101-
102-
//if necessary, perform actual data source operation here (like cancel changes on a context)
103-
//if you have a context added through an @inject statement, you could use something like this to abort changes
104-
//foreach (var entry in myContext.ChangeTracker.Entries().Where(entry => entry.State == EntityState.Modified))
105-
//{
106-
// entry.State = EntityState.Unchanged;
107-
//}
108-
}
109-
110-
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
111-
public class SampleData
112-
{
113-
public int ID { get; set; }
114-
public string Name { get; set; }
115-
}
116-
117-
118-
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
119-
{
120-
ID = x,
121-
Name = "name " + x
122-
});
49+
public void EditHandler(GridCommandEventArgs args)
50+
{
51+
SampleData item = (SampleData)args.Item;
52+
53+
//prevent opening for edit based on condition
54+
if (item.ID < 3)
55+
{
56+
args.IsCancelled = true;//the general approach for cancelling an event
57+
}
58+
59+
Console.WriteLine("Edit event is fired.");
60+
}
61+
62+
public void UpdateHandler(GridCommandEventArgs args)
63+
{
64+
SampleData item = (SampleData)args.Item;
65+
66+
//perform actual data source operations here
67+
68+
//if you have a context added through an @inject statement, you could call its SaveChanges() method
69+
//myContext.SaveChanges();
70+
71+
var matchingItem = MyData.FirstOrDefault(c => c.ID == item.ID);
72+
if (matchingItem != null)
73+
{
74+
matchingItem.Name = item.Name;
75+
}
76+
77+
Console.WriteLine("Update event is fired.");
78+
}
79+
80+
public void DeleteHandler(GridCommandEventArgs args)
81+
{
82+
SampleData item = (SampleData)args.Item;
83+
84+
//perform actual data source operation here
85+
86+
//if you have a context added through an @inject statement, you could call its SaveChanges() method
87+
//myContext.SaveChanges();
88+
89+
MyData.Remove(item);
90+
91+
Console.WriteLine("Delete event is fired.");
92+
}
93+
94+
public void CreateHandler(GridCommandEventArgs args)
95+
{
96+
SampleData item = (SampleData)args.Item;
97+
98+
//perform actual data source operation here
99+
100+
//if you have a context added through an @inject statement, you could call its SaveChanges() method
101+
//myContext.SaveChanges();
102+
103+
item.ID = MyData.Count;
104+
MyData.Add(item);
105+
106+
Console.WriteLine("Create event is fired.");
107+
}
108+
109+
public void CancelHandler(GridCommandEventArgs args)
110+
{
111+
SampleData item = (SampleData)args.Item;
112+
113+
//if necessary, perform actual data source operation here (like cancel changes on a context)
114+
115+
//if you have a context added through an @inject statement, you could use something like this to abort changes
116+
//foreach (var entry in myContext.ChangeTracker.Entries().Where(entry => entry.State == EntityState.Modified))
117+
//{
118+
// entry.State = EntityState.Unchanged;
119+
//}
120+
121+
Console.WriteLine("Cancel event is fired.");
122+
}
123+
124+
125+
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
126+
public class SampleData
127+
{
128+
public int ID { get; set; }
129+
public string Name { get; set; }
130+
}
131+
132+
public List<SampleData> MyData { get; set; }
133+
134+
protected override void OnInit()
135+
{
136+
MyData = new List<SampleData>();
137+
138+
for (int i = 0; i < 50; i++)
139+
{
140+
MyData.Add(new SampleData()
141+
{
142+
ID = i,
143+
Name = "Name " + i.ToString()
144+
});
145+
}
146+
}
123147
}
124148
````
125149

0 commit comments

Comments
 (0)