Skip to content

Commit 8eeebe1

Browse files
ntachevadimodi
ntacheva
and
dimodi
authored
Edit popup customization (#807)
* docs(grid): Edit popup customization [draft] * docs(grid,treelist,scheduler,gantt)popup edit customization * chore(gantt)reverting popup customizatin section * chore(treelist):fox * Update components/grid/editing/popup.md Co-authored-by: Dimo Dimov <[email protected]> * chore(common):update addressing the feedback * chore(common): update config.yml plus wording fixes Co-authored-by: Dimo Dimov <[email protected]>
1 parent da5b6b7 commit 8eeebe1

File tree

7 files changed

+505
-1
lines changed

7 files changed

+505
-1
lines changed

‎_config.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,9 @@ navigation:
181181
"*components/scheduler/appointments":
182182
title: "Appointments"
183183
position: 2
184+
"*components/scheduler/editing":
185+
title: "Editing"
186+
position: 3
184187
"*components/scheduler/views":
185188
title: "Views"
186189
position: 5

‎_contentTemplates/common/popup-edit-customization.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
#popup-settings
2+
Parameter | Type | Description
3+
---------|----------|---------
4+
`Class` | `string` | CSS class of the edit popup
5+
`Title` | `string` | The title of the edit popup
6+
`Width` | `string` | The Width of the edit popup
7+
`MaxWidth` | `string` | The maximum width of the window
8+
`MinWidth` | `string` | The minimum width of the window
9+
`Height` | `string` | The height of edit popup
10+
`MaxHeight` | `string` | The maximum height of the window
11+
`MinHeight` | `string` | The minimum height of the window
12+
13+
>tip The min/max options for the width and height apply to the initial rendering of the window and not browser resizing.
14+
#end
15+
16+
#edit-form-settings
17+
Parameter | Type | Description
18+
---------|----------|---------
19+
`ButtonsLayout` | `FormButtonsLayout` <br/> (`End`) | The horizontal alignment of the buttons. Takes a member of the `FormButtonsLayout` enum: <br/> - `Start` <br/> - `End` <br/> - `Center` <br/> - `Stretched`
20+
`Columns` | `int` | The count of the columns
21+
`ColumnSpacing` | `int` | The column spacing
22+
`Orientation` | `FormOrientation` <br/> (`Vertical`) | The orientation of the form. Takes a member of the `FormOrientation` enum: <br/> - `Horizontal` <br/> - `Vertical`
23+
#end

‎components/grid/editing/popup.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,13 @@ position: 2
1010

1111
# Grid PopUp Editing
1212

13+
In this article:
14+
15+
* [Basics](#basics)
16+
* [Customization](#customization)
17+
18+
## Basics
19+
1320
Popup editing lets the user click an [Edit command button]({%slug components/grid/columns/command%}) on the row, and a popup shows up with all its editable columns open up for changes. They can then click the `Save` button in the dialog to submit the changes to the model. This fires the `OnUpdate` event of the grid where your code receives the updated model so you can work with the data (for example, to call the appropriate method of your service).
1421

1522
In a similar fashion, the `Cancel`, `Delete` command buttons and the `Add` toolbar button fire events on the grid to let you handle the data source operations.
@@ -181,6 +188,76 @@ The PopUp editing mode supports [validation]({%slug common-features/input-valida
181188

182189
>note It is up to the data access logic to save the data once it is changed in the data collection, or to revert changes. The example above showcases the events that allow you to do that. In a real application, the code for handling data operations may be entirely different.
183190
191+
## Customization
192+
193+
The Grid exposes options to customize the edit popup and its form. Define the desired configuration in the `GridPopupEditSettings` and `GridPopupEditFormSettings` tags under the `GridSettings` tag.
194+
195+
### Popup Customization
196+
197+
The `GridPopupEditSettings` nested tag exposes the following parameters to allow popup customization:
198+
199+
@[template](/_contentTemplates/common/popup-edit-customization.md#popup-settings)
200+
201+
### Edit Form Customization
202+
203+
The `GridPopupEditFormSettings` nested tag exposes the following parameters to allow edit form customization:
204+
205+
@[template](/_contentTemplates/common/popup-edit-customization.md#edit-form-settings)
206+
207+
>caption Customize the popup edit form
208+
209+
````CSHTML
210+
@*The snippet focuses on the popup edit form customization. CRUD events are not handled for brevity*@
211+
212+
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="500px">
213+
<GridSettings>
214+
<GridPopupEditSettings MaxWidth="600px"
215+
MaxHeight="300px"
216+
Class="custom-popup">
217+
</GridPopupEditSettings>
218+
<GridPopupEditFormSettings Orientation="@FormOrientation.Horizontal"
219+
ButtonsLayout="FormButtonsLayout.Center"
220+
Columns="2">
221+
</GridPopupEditFormSettings>
222+
</GridSettings>
223+
<GridToolBar>
224+
<GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
225+
</GridToolBar>
226+
<GridColumns>
227+
<GridColumn Field=@nameof(SampleData.Id) />
228+
<GridColumn Field=@nameof(SampleData.Name) />
229+
<GridColumn Field=@nameof(SampleData.Team) />
230+
<GridColumn Field=@nameof(SampleData.HireDate) />
231+
<GridCommandColumn>
232+
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
233+
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
234+
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
235+
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
236+
</GridCommandColumn>
237+
</GridColumns>
238+
</TelerikGrid>
239+
240+
@code {
241+
242+
// in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
243+
public class SampleData
244+
{
245+
public int Id { get; set; }
246+
public string Name { get; set; }
247+
public string Team { get; set; }
248+
public DateTime HireDate { get; set; }
249+
}
250+
251+
public List<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
252+
{
253+
Id = x,
254+
Name = "name " + x,
255+
Team = "team " + x % 5,
256+
HireDate = DateTime.Now.AddDays(-x).Date
257+
}).ToList();
258+
}
259+
````
260+
184261
## See Also
185262

186263
* [Live Demo: Grid PopUp Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup)

‎components/scheduler/editing/delete-confirmation-dialog.md

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
---
2+
title: Delete Confirmation Dialog
3+
page_title: Scheduler - Delete Confirmation Dialog
4+
description: Delete Confirmation Dialog in the Scheduler for Blazor.
5+
slug: scheduler-delete-confirmation-dialog
6+
tags: telerik,blazor,scheduler,appointment,appointments,edit,editing,delete,confirmation,dialog
7+
published: True
8+
position: 5
9+
---
10+
11+
# Delete Confirmation Dialog
12+
13+
The delete confirmation dialog triggers before event deletion. You can enable it by setting the `ConfirmDelete` parameter of the Scheduler to `true`. The default texts of the dialog are exposed in the [localization]({%slug globalization-localization%}) messages of the component, and you can customize them.
14+
15+
>important This dialog displays only for **single** events, **not** for recurring. The built-in delete confirmation dialog for recurring events is **not** changed.
16+
17+
>caption Delete Confirmation dialog appearance
18+
19+
![](images/scheduler-delete-confirmation.gif)
20+
21+
>caption Enabling of the Delete Confirmation Dialog
22+
23+
````CSHTML
24+
@* Scheduler with enabled Delete Confirmation Dialog *@
25+
26+
<TelerikScheduler Data="@Appointments"
27+
OnDelete="@DeleteAppointment" AllowDelete="true"
28+
@bind-Date="@StartDate" Height="500px" @bind-View="@CurrView" ConfirmDelete="true">
29+
<SchedulerViews>
30+
<SchedulerDayView StartTime="@DayStart" />
31+
<SchedulerWeekView StartTime="@DayStart" />
32+
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
33+
</SchedulerViews>
34+
</TelerikScheduler>
35+
36+
@code {
37+
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
38+
public DateTime StartDate { get; set; } = new DateTime(2019, 12, 2);
39+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);
40+
41+
List<SchedulerAppointment> Appointments { get; set; }
42+
43+
async Task DeleteAppointment(SchedulerDeleteEventArgs args)
44+
{
45+
SchedulerAppointment item = (SchedulerAppointment)args.Item;
46+
47+
await MyService.Delete(item);
48+
49+
await GetSchedulerData();
50+
}
51+
52+
public class SchedulerAppointment
53+
{
54+
public Guid Id { get; set; }
55+
public string Title { get; set; }
56+
public string Description { get; set; }
57+
public DateTime Start { get; set; }
58+
public DateTime End { get; set; }
59+
public bool IsAllDay { get; set; }
60+
public string RecurrenceRule { get; set; }
61+
public List<DateTime> RecurrenceExceptions { get; set; }
62+
public Guid? RecurrenceId { get; set; }
63+
64+
public SchedulerAppointment()
65+
{
66+
Id = Guid.NewGuid();
67+
}
68+
}
69+
70+
async Task GetSchedulerData()
71+
{
72+
Appointments = await MyService.Read();
73+
}
74+
75+
protected override async Task OnInitializedAsync()
76+
{
77+
await GetSchedulerData();
78+
}
79+
80+
public static class MyService
81+
{
82+
private static List<SchedulerAppointment> _data { get; set; } = new List<SchedulerAppointment>()
83+
{
84+
new SchedulerAppointment
85+
{
86+
Title = "Board meeting",
87+
Description = "Q4 is coming to a close, review the details.",
88+
Start = new DateTime(2019, 12, 5, 10, 00, 0),
89+
End = new DateTime(2019, 12, 5, 11, 30, 0)
90+
},
91+
92+
new SchedulerAppointment
93+
{
94+
Title = "Vet visit",
95+
Description = "The cat needs vaccinations and her teeth checked.",
96+
Start = new DateTime(2019, 12, 2, 11, 30, 0),
97+
End = new DateTime(2019, 12, 2, 12, 0, 0)
98+
},
99+
100+
new SchedulerAppointment
101+
{
102+
Title = "Planning meeting",
103+
Description = "Kick off the new project.",
104+
Start = new DateTime(2019, 12, 6, 9, 30, 0),
105+
End = new DateTime(2019, 12, 6, 12, 45, 0)
106+
},
107+
108+
new SchedulerAppointment
109+
{
110+
Title = "Trip to Hawaii",
111+
Description = "An unforgettable holiday!",
112+
IsAllDay = true,
113+
Start = new DateTime(2019, 11, 27),
114+
End = new DateTime(2019, 12, 05)
115+
},
116+
117+
new SchedulerAppointment
118+
{
119+
Title = "Morning run",
120+
Description = "Some time to clear the head and exercise.",
121+
Start = new DateTime(2019, 11, 27, 9, 0, 0),
122+
End = new DateTime(2019, 11, 27, 9, 30, 0),
123+
RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR"
124+
}
125+
};
126+
127+
public static async Task<List<SchedulerAppointment>> Read()
128+
{
129+
return await Task.FromResult(_data);
130+
}
131+
132+
public static async Task Delete(SchedulerAppointment itemToDelete)
133+
{
134+
if (itemToDelete.RecurrenceId != null)
135+
{
136+
// a recurrence exception was deleted, you may want to update
137+
// the rest of the data source - find an item where theItem.Id == itemToDelete.RecurrenceId
138+
// and remove the current exception date from the list of its RecurrenceExceptions
139+
}
140+
141+
if (!string.IsNullOrEmpty(itemToDelete.RecurrenceRule) && itemToDelete.RecurrenceExceptions?.Count > 0)
142+
{
143+
// a recurring appointment was deleted that had exceptions, you may want to
144+
// delete or update any exceptions from the data source - look for
145+
// items where theItem.RecurrenceId == itemToDelete.Id
146+
}
147+
148+
_data.Remove(itemToDelete);
149+
}
150+
}
151+
}
152+
````
153+
154+
155+
## See Also
156+
157+
* [Data Binding]({%slug scheduler-appointments-databinding%})
158+
* [Live Demo: Appointment Editing](https://demos.telerik.com/blazor-ui/scheduler/appointment-editing)
159+
* [Custom Edit Form](https://github.com/telerik/blazor-ui/tree/master/scheduler/custom-edit-form)

‎components/scheduler/edit-appointments.md renamed to ‎components/scheduler/editing/edit-appointments.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Edit Appointments in the Scheduler for Blazor.
55
slug: scheduler-appointments-edit
66
tags: telerik,blazor,scheduler,appointment,appointments,edit,editing
77
published: True
8-
position: 3
8+
position: 0
99
---
1010

1111
# Edit Appointments

‎components/scheduler/editing/edit-popup-customization.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Edit Popup Customization
3+
page_title: Scheduler - Edit Popup Customization
4+
description: Edit Popup Customization in the Scheduler for Blazor.
5+
slug: scheduler-edit-popup-customization
6+
tags: telerik,blazor,scheduler,edit,popup,customization
7+
published: True
8+
position: 10
9+
---
10+
11+
# Edit Popup Customization
12+
13+
The Scheduler allows customization of the edit popup and its form. You can define your desired configuration in the `SchedulerPopupEditSettings` and `SchedulerPopupEditFormSettings` tags under the `SchedulerSettings` tag.
14+
15+
### Popup Customization
16+
17+
The `SchedulerPopupEditSettings` nested tag exposes the following parameters to allow popup customization:
18+
19+
@[template](/_contentTemplates/common/popup-edit-customization.md#popup-settings)
20+
21+
### Edit Form Customization
22+
23+
The `SchedulerPopupEditFormSettings` nested tag exposes the following parameters to allow edit form customization:
24+
25+
@[template](/_contentTemplates/common/popup-edit-customization.md#edit-form-settings)
26+
27+
>caption Customize the popup edit form
28+
29+
````CSHTML
30+
@*The snippet focuses on the popup edit form customization. CRUD events are not handled for brevity*@
31+
32+
<TelerikScheduler Data="@Appointments"
33+
@bind-Date="@StartDate"
34+
@bind-View="@CurrView"
35+
AllowCreate="true"
36+
AllowUpdate="true"
37+
Height="600px"
38+
Width="800px">
39+
40+
<SchedulerSettings>
41+
<SchedulerPopupEditSettings Width="600px"
42+
MinWidth="500px"
43+
Title="Edit Event"
44+
Class="custom-popup">
45+
</SchedulerPopupEditSettings>
46+
<SchedulerPopupEditFormSettings ButtonsLayout="FormButtonsLayout.Stretched">
47+
</SchedulerPopupEditFormSettings>
48+
</SchedulerSettings>
49+
<SchedulerViews>
50+
<SchedulerWeekView StartTime="@DayStart" />
51+
</SchedulerViews>
52+
</TelerikScheduler>
53+
54+
@code {
55+
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
56+
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
57+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
58+
59+
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
60+
{
61+
new SchedulerAppointment
62+
{
63+
Title = "Vet visit",
64+
Description = "The cat needs vaccinations and her teeth checked.",
65+
Start = new DateTime(2019, 11, 26, 11, 30, 0),
66+
End = new DateTime(2019, 11, 26, 12, 0, 0)
67+
},
68+
69+
new SchedulerAppointment
70+
{
71+
Title = "Planning meeting",
72+
Description = "Kick off the new project.",
73+
Start = new DateTime(2019, 11, 25, 9, 30, 0),
74+
End = new DateTime(2019, 11, 25, 12, 45, 0)
75+
},
76+
77+
new SchedulerAppointment
78+
{
79+
Title = "Trip to Hawaii",
80+
Description = "An unforgettable holiday!",
81+
IsAllDay = true,
82+
Start = new DateTime(2019, 11, 27),
83+
End = new DateTime(2019, 12, 07)
84+
}
85+
};
86+
87+
public class SchedulerAppointment
88+
{
89+
public string Title { get; set; }
90+
public string Description { get; set; }
91+
public DateTime Start { get; set; }
92+
public DateTime End { get; set; }
93+
public bool IsAllDay { get; set; }
94+
}
95+
}
96+
````
97+
98+
99+
## See Also
100+
101+
* [Data Binding]({%slug scheduler-appointments-databinding%})
102+
* [Live Demo: Appointment Editing](https://demos.telerik.com/blazor-ui/scheduler/appointment-editing)
103+
* [Custom Edit Form](https://github.com/telerik/blazor-ui/tree/master/scheduler/custom-edit-form)

0 commit comments

Comments
 (0)