Skip to content

Commit b2a2416

Browse files
svdimitrntacheva
svdimitr
and
ntacheva
authored
[3.1] Docs: Customization of Editor Fields (#801)
* chore(editor-fields): add the customization of editor fields * chore(filter-fields): add docs on customizing filter fields * Update components/grid/filter/overview.md Co-authored-by: Nadezhda Tacheva <[email protected]> * Update components/treelist/filter/overview.md Co-authored-by: Nadezhda Tacheva <[email protected]> * Update components/gantt/gantt-tree/filter/overview.md Co-authored-by: Nadezhda Tacheva <[email protected]> * chore(gantt): editor type attribute Co-authored-by: Nadezhda Tacheva <[email protected]>
1 parent 20a1fa8 commit b2a2416

File tree

7 files changed

+945
-0
lines changed

7 files changed

+945
-0
lines changed

‎components/form/overview.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,57 @@ The following data types are supported out-of-the box and they use the following
178178

179179
* `bool` - [Telerik CheckBox]({%slug checkbox-overview%})
180180

181+
### Customize the Automatically Generated Fields
182+
183+
You can customize the automatically generated field by providing the `EditorType` attribute, exposed on the `<FormItem>`, or by using the [FormItem Template]({%slug form-formitems-template%}). The `EditorType` attribute accepts a member of the `FormEditorType` enum:
184+
185+
| Field data type | FormEditorType enum members |
186+
|-----------------|------------------------------------------|
187+
| **Text** | `FormEditorType.TextArea`<br> `FormEditorType.TextBox` |
188+
| **Boolean** | `FormEditorType.CheckBox`<br> `FormEditorType.Switch` |
189+
| **DateTime** | `FormEditorType.DatePicker`<br> `FormEditorType.DateTimePicker`<br> `FormEditorType.TimePicker` |
190+
191+
192+
````CSHTML
193+
@* The usage of the EditorType parameter *@
194+
195+
@using System.ComponentModel.DataAnnotations
196+
197+
<TelerikForm Model="@person">
198+
<FormValidation>
199+
<DataAnnotationsValidator></DataAnnotationsValidator>
200+
</FormValidation>
201+
<FormItems>
202+
<FormItem Field="@nameof(Person.Id)" LabelText="Id"></FormItem>
203+
<FormItem Field="@nameof(Person.FirstName)"
204+
EditorType="@FormEditorType.TextArea"
205+
LabelText="First name">
206+
</FormItem>
207+
<FormItem Field="@nameof(Person.LastName)"
208+
EditorType="@FormEditorType.TextArea"
209+
LabelText="Last name">
210+
</FormItem>
211+
<FormItem Field="@nameof(Person.DOB)"
212+
EditorType="@FormEditorType.DateTimePicker"
213+
LabelText="Date of birth">
214+
</FormItem>
215+
</FormItems>
216+
</TelerikForm>
217+
218+
@code {
219+
public Person person = new Person();
220+
221+
public class Person
222+
{
223+
public int Id { get; set; } = 10;
224+
public string FirstName { get; set; } = "John";
225+
public string LastName { get; set; } = "Doe";
226+
public DateTime DOB { get; set; } = DateTime.Today.AddYears(-20);
227+
}
228+
}
229+
````
230+
231+
181232
## Data Annotation Attributes
182233

183234
The Telerik Form for Blazor supports validation through the `<DataAnnotationsValidator />`. This allows you to take advantage of all validation attributes from the <a href="https://docs.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations?view=net-5.0" target="_blank">data annotation attributes</a> list provided by .NET.

‎components/gantt/gantt-tree/editing.md

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,246 @@ List of the available events:
3939
* `OnDelete` - fires when the `Delete` command button is clicked. The event handler receives an argument of type `GanttDeleteEventArgs` that exposes the following fields:
4040

4141
* `Item` - an object you can cast to your model class to obtain the current data item.
42+
43+
44+
## Customize The Editor Fields
45+
46+
You can customize the editors rendered in the Gantt Tree by providing the `EditorType` attribute, exposed on the `<GanttColumn>`. The `EditorType` attribute accepts a member of the `GanttTreeListEditorType` enum:
47+
48+
| Field data type | GanttTreeListEditorType enum members |
49+
|-----------------|------------------------------------------|
50+
| **Text** | `GanttTreeListEditorType.TextArea`<br> `GanttTreeListEditorType.TextBox` |
51+
| **Boolean** | `GanttTreeListEditorType.CheckBox`<br> `GanttTreeListEditorType.Switch` |
52+
| **DateTime** | `GanttTreeListEditorType.DatePicker`<br> `GanttTreeEditorType.DateTimePicker`<br> `GanttTreeListEditorType.TimePicker` |
53+
54+
55+
````CSHTML
56+
@* The usage of the EditorType parameter *@
57+
58+
<TelerikGantt Data="@Data"
59+
Width="100%"
60+
Height="600px"
61+
IdField="Id"
62+
ParentIdField="ParentId"
63+
OnUpdate="@UpdateItem"
64+
OnDelete="@DeleteItem"
65+
OnCreate="@CreateItem">
66+
<GanttToolBar>
67+
<GanttCommandButton Command="Add" Icon="add">Add</GanttCommandButton>
68+
</GanttToolBar>
69+
<GanttViews>
70+
<GanttDayView></GanttDayView>
71+
<GanttWeekView></GanttWeekView>
72+
<GanttMonthView></GanttMonthView>
73+
<GanttYearView></GanttYearView>
74+
</GanttViews>
75+
<GanttColumns>
76+
<GanttColumn Field="Id"
77+
Visible="false">
78+
</GanttColumn>
79+
<GanttColumn Field="Title"
80+
Expandable="true"
81+
Width="160px"
82+
Title="Task Title">
83+
</GanttColumn>
84+
<GanttColumn Field="PercentComplete"
85+
Width="60px">
86+
</GanttColumn>
87+
<GanttColumn Field="Start"
88+
Width="100px"
89+
EditorType="@GanttTreeListEditorType.DateTimePicker"
90+
TextAlign="@ColumnTextAlign.Right">
91+
</GanttColumn>
92+
<GanttColumn Field="End"
93+
DisplayFormat="End: {0:d}"
94+
Width="100px">
95+
</GanttColumn>
96+
<GanttCommandColumn>
97+
<GanttCommandButton Command="Add" Icon="add"></GanttCommandButton>
98+
<GanttCommandButton Command="Delete" Icon="delete"></GanttCommandButton>
99+
</GanttCommandColumn>
100+
</GanttColumns>
101+
</TelerikGantt>
102+
103+
@code {
104+
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
105+
106+
class FlatModel
107+
{
108+
public int Id { get; set; }
109+
public int? ParentId { get; set; }
110+
public string Title { get; set; }
111+
public double PercentComplete { get; set; }
112+
public DateTime Start { get; set; }
113+
public DateTime End { get; set; }
114+
}
115+
116+
public int LastId { get; set; } = 1;
117+
List<FlatModel> Data { get; set; }
118+
119+
protected override void OnInitialized()
120+
{
121+
Data = new List<FlatModel>();
122+
var random = new Random();
123+
124+
for (int i = 1; i < 6; i++)
125+
{
126+
var newItem = new FlatModel()
127+
{
128+
Id = LastId,
129+
Title = "Employee " + i.ToString(),
130+
Start = new DateTime(2020, 12, 6 + i),
131+
End = new DateTime(2020, 12, 11 + i),
132+
PercentComplete = Math.Round(random.NextDouble(), 2)
133+
};
134+
135+
Data.Add(newItem);
136+
var parentId = LastId;
137+
LastId++;
138+
139+
for (int j = 0; j < 5; j++)
140+
{
141+
Data.Add(new FlatModel()
142+
{
143+
Id = LastId,
144+
ParentId = parentId,
145+
Title = " Employee " + i + " : " + j.ToString(),
146+
Start = new DateTime(2020, 12, 6 + i + j),
147+
End = new DateTime(2020, 12, 7 + i + j),
148+
PercentComplete = Math.Round(random.NextDouble(), 2)
149+
});
150+
151+
LastId++;
152+
}
153+
}
154+
155+
base.OnInitialized();
156+
}
157+
158+
private async Task CreateItem(GanttCreateEventArgs args)
159+
{
160+
var argsItem = args.Item as FlatModel;
161+
162+
argsItem.Id = LastId++;
163+
164+
if (args.ParentItem != null)
165+
{
166+
var parent = (FlatModel)args.ParentItem;
167+
168+
argsItem.ParentId = parent.Id;
169+
}
170+
171+
Data.Insert(0, argsItem);
172+
173+
CalculateParentPercentRecursive(argsItem);
174+
CalculateParentRangeRecursive(argsItem);
175+
}
176+
177+
private async Task UpdateItem(GanttUpdateEventArgs args)
178+
{
179+
var item = args.Item as FlatModel;
180+
181+
var foundItem = Data.FirstOrDefault(i => i.Id.Equals(item.Id));
182+
183+
if (foundItem != null)
184+
{
185+
var startOffset = item.Start - foundItem.Start;
186+
if (startOffset != TimeSpan.Zero)
187+
{
188+
MoveChildrenRecursive(foundItem, startOffset);
189+
}
190+
191+
foundItem.Title = item.Title;
192+
foundItem.Start = item.Start;
193+
foundItem.End = item.End;
194+
foundItem.PercentComplete = item.PercentComplete;
195+
}
196+
197+
CalculateParentPercentRecursive(foundItem);
198+
CalculateParentRangeRecursive(foundItem);
199+
}
200+
201+
private async Task DeleteItem(GanttDeleteEventArgs args)
202+
{
203+
var item = Data.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id));
204+
205+
RemoveChildRecursive(item);
206+
207+
CalculateParentPercentRecursive(item);
208+
CalculateParentRangeRecursive(item);
209+
}
210+
211+
private void RemoveChildRecursive(FlatModel item)
212+
{
213+
var children = GetChildren(item).ToList();
214+
215+
foreach (var child in children)
216+
{
217+
RemoveChildRecursive(child);
218+
}
219+
220+
Data.Remove(item);
221+
}
222+
223+
private void CalculateParentPercentRecursive(FlatModel item)
224+
{
225+
if (item.ParentId != null)
226+
{
227+
var parent = GetParent(item);
228+
229+
var children = GetChildren(parent);
230+
231+
if (children.Any())
232+
{
233+
parent.PercentComplete = children.Average(i => i.PercentComplete);
234+
235+
CalculateParentPercentRecursive(parent);
236+
}
237+
}
238+
}
239+
240+
private void CalculateParentRangeRecursive(FlatModel item)
241+
{
242+
if (item.ParentId != null)
243+
{
244+
var parent = GetParent(item);
245+
246+
var children = GetChildren(parent);
247+
248+
if (children.Any())
249+
{
250+
parent.Start = children.Min(i => i.Start);
251+
parent.End = children.Max(i => i.End);
252+
253+
CalculateParentRangeRecursive(parent);
254+
}
255+
}
256+
}
257+
258+
private void MoveChildrenRecursive(FlatModel item, TimeSpan offset)
259+
{
260+
var children = GetChildren(item);
261+
262+
foreach (var child in children)
263+
{
264+
child.Start = child.Start.Add(offset);
265+
child.End = child.End.Add(offset);
266+
267+
MoveChildrenRecursive(child, offset);
268+
}
269+
}
270+
271+
private FlatModel GetParent(FlatModel item)
272+
{
273+
return Data.FirstOrDefault(i => i.Id.Equals(item.ParentId));
274+
}
275+
276+
private IEnumerable<FlatModel> GetChildren(FlatModel item)
277+
{
278+
return Data.Where(i => item.Id.Equals(i.ParentId));
279+
}
280+
}
281+
````
42282

43283

44284
## Example

0 commit comments

Comments
 (0)