Skip to content

Commit 7b832fa

Browse files
yanisslavyordan-mitev
yanisslav
and
yordan-mitev
authored
Added articles for popup buttons and form templates (#1392)
* docs(grid, treelist): added articles for popup buttons and form templates Co-authored-by: Yordan <[email protected]>
1 parent 747d916 commit 7b832fa

File tree

4 files changed

+823
-0
lines changed

4 files changed

+823
-0
lines changed

‎components/grid/templates/popup-buttons-template.md‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
---
2+
title: Popup Buttons Template
3+
page_title: Grid Popup Buttons Template
4+
description: The button template allows you to customize the buttons in the create or edit Popup window of the Blazor Grid component.
5+
slug: grid-templates-popup-buttons
6+
tags: telerik,blazor,grid,templates,popup,buttons
7+
published: True
8+
position: 50
9+
---
10+
11+
12+
# Popup Buttons Template
13+
14+
With the `ButtonsTemplate`, you can personalize the appearance and behavior of the buttons in the create/edit Popup window of the Grid component.
15+
16+
>If a [FormTemplate]({%slug grid-templates-popup-form%}) is declared, the `ButtonsTemplate` will be ignored.
17+
18+
>caption Modifying the buttons in the create/edit Popup by using a `ButtonsTemplate`.
19+
20+
````CSHTML
21+
@using System.ComponentModel.DataAnnotations
22+
23+
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="500px"
24+
OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler">
25+
<GridToolBarTemplate>
26+
<GridCommandButton Command="Add" Icon="@FontIcon.Plus">Add Employee</GridCommandButton>
27+
</GridToolBarTemplate>
28+
<GridSettings>
29+
<GridPopupEditSettings Title="Popup Title" MaxHeight="95vh" MaxWidth="95vw"></GridPopupEditSettings>
30+
<GridPopupEditFormSettings ColumnSpacing="20px" Orientation="@FormOrientation.Horizontal" Columns="2">
31+
<ButtonsTemplate>
32+
@{
33+
<GridCommandButton Command="Save">
34+
@if (context.IsNew)
35+
{
36+
<span>Add Item</span>
37+
}
38+
else
39+
{
40+
<span>Update Item</span>
41+
}
42+
</GridCommandButton>
43+
44+
<GridCommandButton Command="Cancel">
45+
@if (context.IsNew)
46+
{
47+
<span>Cancel Add</span>
48+
}
49+
else
50+
{
51+
<span>Cancel Update</span>
52+
}
53+
</GridCommandButton>
54+
}
55+
</ButtonsTemplate>
56+
</GridPopupEditFormSettings>
57+
</GridSettings>
58+
<GridColumns>
59+
<GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
60+
<GridColumn Field=@nameof(SampleData.Name) Title="Name" />
61+
<GridCommandColumn>
62+
<GridCommandButton Command="Edit" Icon="@FontIcon.Pencil">Edit</GridCommandButton>
63+
<GridCommandButton Command="Delete" Icon="@FontIcon.Trash">Delete</GridCommandButton>
64+
</GridCommandColumn>
65+
</GridColumns>
66+
</TelerikGrid>
67+
68+
@code {
69+
void EditHandler(GridCommandEventArgs args)
70+
{
71+
SampleData item = (SampleData)args.Item;
72+
}
73+
74+
async Task UpdateHandler(GridCommandEventArgs args)
75+
{
76+
SampleData item = (SampleData)args.Item;
77+
await MyService.Update(item);
78+
await GetGridData();
79+
}
80+
81+
async Task DeleteHandler(GridCommandEventArgs args)
82+
{
83+
SampleData item = (SampleData)args.Item;
84+
await MyService.Delete(item);
85+
await GetGridData();
86+
}
87+
88+
async Task CreateHandler(GridCommandEventArgs args)
89+
{
90+
SampleData item = (SampleData)args.Item;
91+
await MyService.Create(item);
92+
await GetGridData();
93+
}
94+
95+
public class SampleData
96+
{
97+
public int ID { get; set; }
98+
99+
[Required(ErrorMessage = "The employee must have a name")]
100+
public string Name { get; set; }
101+
}
102+
103+
public List<SampleData> MyData { get; set; }
104+
105+
async Task GetGridData()
106+
{
107+
MyData = await MyService.Read();
108+
}
109+
110+
protected override async Task OnInitializedAsync()
111+
{
112+
await GetGridData();
113+
}
114+
115+
public static class MyService
116+
{
117+
private static List<SampleData> _data { get; set; } = new List<SampleData>();
118+
119+
public static async Task Create(SampleData itemToInsert)
120+
{
121+
itemToInsert.ID = _data.Count + 1;
122+
_data.Insert(0, itemToInsert);
123+
}
124+
125+
public static async Task<List<SampleData>> Read()
126+
{
127+
if (_data.Count < 1)
128+
{
129+
for (int i = 1; i < 50; i++)
130+
{
131+
_data.Add(new SampleData()
132+
{
133+
ID = i,
134+
Name = "Name " + i.ToString()
135+
});
136+
}
137+
}
138+
139+
return await Task.FromResult(_data);
140+
}
141+
142+
public static async Task Update(SampleData itemToUpdate)
143+
{
144+
var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
145+
if (index != -1)
146+
{
147+
_data[index] = itemToUpdate;
148+
}
149+
}
150+
151+
public static async Task Delete(SampleData itemToDelete)
152+
{
153+
_data.Remove(itemToDelete);
154+
}
155+
}
156+
}
157+
````
158+
159+
## See Also
160+
161+
* [Live Demo: Grid Templates](https://demos.telerik.com/blazor-ui/grid/templates)
162+
* [Live Demo: Grid Popup Edit Form Template](https://demos.telerik.com/blazor-ui/grid/popup-edit-form-template)

‎components/grid/templates/popup-form-template.md‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
---
2+
title: Popup Form Template
3+
page_title: Grid Popup Form Template
4+
description: Learn how to define a custom popup create or edit template in the Blazor Data Grid. The template allows you to customize the layout and the content of the create/edit popup.
5+
slug: grid-templates-popup-form
6+
tags: telerik,blazor,grid,templates,popup,edit,create
7+
published: True
8+
position: 50
9+
---
10+
11+
12+
# Popup Form Template
13+
14+
With the `FormTemplate` feature, you can customize the appearance and content of the create/edit Popup window of the Grid.
15+
16+
>caption Using a `FormTemplate` to modify the Edit/Create Popup window.
17+
18+
````CSHTML
19+
@using System.Collections.Generic;
20+
21+
<TelerikGrid @ref="@GridRef"
22+
Data="@GridData"
23+
EditMode="@GridEditMode.Popup"
24+
Pageable="true"
25+
Width="950px"
26+
PageSize="5"
27+
OnDelete="@DeleteItem">
28+
<GridToolBarTemplate>
29+
<GridCommandButton Command="Add" Icon="@FontIcon.Plus">Add Employee</GridCommandButton>
30+
</GridToolBarTemplate>
31+
<GridSettings>
32+
<GridPopupEditSettings MaxHeight="95vh" MaxWidth="95vw"></GridPopupEditSettings>
33+
<GridPopupEditFormSettings ColumnSpacing="20px" Orientation="@FormOrientation.Horizontal" Columns="2">
34+
<FormTemplate>
35+
@{
36+
EditItem = context.Item as Person;
37+
38+
<TelerikForm Model="@EditItem" OnValidSubmit="@OnValidSubmit">
39+
<FormItems>
40+
<FormItem Field="EmployeeId" Enabled="false"></FormItem>
41+
<FormItem Field="Name"></FormItem>
42+
<FormItem Field="AgeInYears" LabelText="Custom Age Label:"></FormItem>
43+
<FormItem Field="HireDate" LabelText="Custom Hire Date Label:"></FormItem>
44+
</FormItems>
45+
<FormButtons>
46+
<TelerikButton Icon="@nameof(FontIcon.Save)">Save</TelerikButton>
47+
<TelerikButton Icon="@nameof(FontIcon.Cancel)" ButtonType="@ButtonType.Button" OnClick="@OnCancel">Cancel</TelerikButton>
48+
</FormButtons>
49+
</TelerikForm>
50+
}
51+
</FormTemplate>
52+
</GridPopupEditFormSettings>
53+
</GridSettings>
54+
<GridColumns>
55+
<GridColumn Field=@nameof(Person.EmployeeId) Editable="false" />
56+
<GridColumn Field=@nameof(Person.Name) />
57+
<GridColumn Field=@nameof(Person.AgeInYears) Title="Age" />
58+
<GridColumn Field=@nameof(Person.HireDate) Title="Hire Date" />
59+
<GridCommandColumn>
60+
<GridCommandButton Command="Edit" Icon="@FontIcon.Pencil">Edit</GridCommandButton>
61+
<GridCommandButton Command="Delete" Icon="@FontIcon.Trash">Delete</GridCommandButton>
62+
</GridCommandColumn>
63+
</GridColumns>
64+
</TelerikGrid>
65+
66+
@code {
67+
public TelerikGrid<Person> GridRef { get; set; }
68+
public List<Person> GridData { get; set; }
69+
public Person EditItem { get; set; }
70+
private List<Person> _people;
71+
72+
public List<Person> People
73+
{
74+
get
75+
{
76+
if (_people == null)
77+
{
78+
_people = GeneratePeople(30);
79+
}
80+
81+
return _people;
82+
}
83+
}
84+
85+
protected override void OnInitialized()
86+
{
87+
LoadData();
88+
}
89+
90+
private void LoadData()
91+
{
92+
GridData = GetPeople();
93+
}
94+
95+
private void DeleteItem(GridCommandEventArgs args)
96+
{
97+
DeletePerson(args.Item as Person);
98+
99+
LoadData();
100+
}
101+
102+
private async Task OnValidSubmit()
103+
{
104+
105+
if (EditItem.EmployeeId != default)
106+
{
107+
UpdatePerson(EditItem);
108+
}
109+
else
110+
{
111+
CreatePerson(EditItem);
112+
}
113+
114+
await ExitEditAsync();
115+
116+
LoadData();
117+
}
118+
119+
private async Task OnCancel()
120+
{
121+
await ExitEditAsync();
122+
}
123+
124+
private async Task ExitEditAsync()
125+
{
126+
var state = GridRef?.GetState();
127+
state.OriginalEditItem = null;
128+
state.EditItem = null;
129+
state.InsertedItem = null;
130+
131+
await GridRef?.SetStateAsync(state);
132+
}
133+
134+
#region Service Methods
135+
public List<Person> GetPeople()
136+
{
137+
return People;
138+
}
139+
140+
public DataSourceResult GetPeople(DataSourceRequest request)
141+
{
142+
return People.ToDataSourceResult(request);
143+
}
144+
145+
public void DeletePerson(Person person)
146+
{
147+
People.Remove(person);
148+
}
149+
150+
public void UpdatePerson(Person person)
151+
{
152+
var index = People.FindIndex(i => i.EmployeeId == person.EmployeeId);
153+
if (index != -1)
154+
{
155+
People[index] = person;
156+
}
157+
}
158+
159+
public void CreatePerson(Person person)
160+
{
161+
person.EmployeeId = People.Max(x => x.EmployeeId) + 1;
162+
163+
People.Insert(0, person);
164+
}
165+
166+
private List<Person> GeneratePeople(int count, int startIndex = 0)
167+
{
168+
List<Person> result = new List<Person>();
169+
170+
for (int i = startIndex; i < startIndex + count; i++)
171+
{
172+
result.Add(new Person()
173+
{
174+
EmployeeId = i,
175+
Name = "Employee " + i.ToString(),
176+
AgeInYears = i,
177+
GraduateGrade = (i % 6) + 1,
178+
HireDate = new DateTime(2020, 6, 1).Date.AddDays(count - (i % 7)),
179+
MeetingDate = new DateTime(2020, 6, 1).Date.AddDays((i % 4)),
180+
IsOutOfOffice = i % 3 == 0 ? true : false
181+
});
182+
}
183+
184+
return result;
185+
}
186+
#endregion
187+
}
188+
````
189+
190+
## See Also
191+
192+
* [Grid Popup Buttons Template]({%slug grid-templates-popup-buttons%})
193+
* [Live Demo: Grid Templates](https://demos.telerik.com/blazor-ui/grid/templates)
194+
* [Live Demo: Grid Popup Edit Form Template](https://demos.telerik.com/blazor-ui/grid/popup-edit-form-template)

0 commit comments

Comments
 (0)