syncfusion
/
blazor-docs
зеркало из https://github.com/syncfusion/blazor-docs.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Latest source merged from Syncfusion

This commit is contained in:
pipeline 2021-09-30 14:40:17 +05:30
Родитель b670884c78
Коммит c69059df4c
6 изменённых файлов: 521 добавлений и 547 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

58
blazor-toc.html
Просмотреть файл

@ -434,12 +434,18 @@
<li>
<a href="/blazor/autocomplete/style">Style and appearance</a>
</li>
<li>
<a href="/blazor/autocomplete/virtualization">Virtualization</a>
</li>
<li>
<a href="/blazor/autocomplete/native-events">Native Events</a>
</li>
<li>
<a href="/blazor/autocomplete/accessibility">Accessibility</a>
</li>
<li>
<a href="/blazor/autocomplete/events">Events</a>
</li>
</ul>
</li>
<li>Avatar
@ -604,6 +610,9 @@
<li>
<a href="/blazor/calendar/events">Events</a>
</li>
<li>
<a href="/blazor/calendar/special-dates">Events</a>
</li>
<li>How To
<ul>
<li>
@ -644,7 +653,7 @@
<li>Charts
<ul>
<li>
<a href="/blazor/chart/getting-started-server">Getting Started (Server)</a>
<a href="/blazor/chart/getting-started">Getting Started (Server)</a>
</li>
<li>
<a href="/blazor/chart/getting-started-wasm">Getting Started (WebAssembly)</a>
@ -1024,12 +1033,21 @@
<li>
<a href="/blazor/combobox/style">Style and appearance</a>
</li>
<li>
<a href="/blazor/combobox/virtualization">Virtualization</a>
</li>
<li>
<a href="/blazor/combobox/custom-value">Custom Value</a>
</li>
<li>
<a href="/blazor/combobox/native-events">Native Events</a>
</li>
<li>
<a href="/blazor/combobox/accessibility">Accessibility</a>
</li>
<li>
<a href="/blazor/combobox/events">Events</a>
</li>
<li>How To
<ul>
<li>
@ -1210,6 +1228,9 @@
<li>
<a href="/blazor/datagrid/print">Print</a>
</li>
<li>
<a href="/blazor/datagrid/adaptive-layout">Adaptive Layout</a>
</li>
<li>
<a href="/blazor/datagrid/state-management">State Management</a>
</li>
@ -1380,6 +1401,12 @@
<li>
<a href="/blazor/datepicker/events">Events</a>
</li>
<li>
<a href="/blazor/datepicker/week-number">Week Number</a>
</li>
<li>
<a href="/blazor/datepicker/special-dates">Special Dates</a>
</li>
<li>How To
<ul>
<li>
@ -1424,6 +1451,9 @@
<li>
<a href="/blazor/daterangepicker/events">Events</a>
</li>
<li>
<a href="/blazor/daterangepicker/week-number">Events</a>
</li>
<li>How To
<ul>
<li>
@ -1465,6 +1495,12 @@
<li>
<a href="/blazor/datetime-picker/events">Events</a>
</li>
<li>
<a href="/blazor/datetime-picker/week-number">Week Number</a>
</li>
<li>
<a href="/blazor/datetime-picker/special-dates">Special Dates</a>
</li>
<li>How To
<ul>
<li>
@ -1722,7 +1758,7 @@
<li>
<a href="/blazor/diagram-component/shapes">Shapes</a>
</li>
<li>Bpmn Shapes
<!-- <li>Bpmn Shapes
<ul>
<li>
<a href="/blazor/diagram-component/bpmn-shapes/bpmn-shapes">BPMN Shapes</a>
@ -1752,7 +1788,7 @@
<a href="/blazor/diagram-component/bpmn-shapes/bpmn-connectors">BPMN Connectors</a>
</li>
</ul>
</li>
</li> -->
<li>Connectors
<ul>
<li> <a href="/blazor/diagram-component/connectors/connectors">Actions of connectors</a></li>
@ -1975,8 +2011,10 @@
<li> <a href="/blazor/dropdown-list/filtering">Filtering</a></li>
<li> <a href="/blazor/dropdown-list/templates">Templates</a></li>
<li> <a href="/blazor/dropdown-list/style">Style and appearance</a></li>
<li> <a href="/blazor/dropdown-list/virtualization">Virtualization</a></li>
<li> <a href="/blazor/dropdown-list/localization">Localization</a></li>
<li> <a href="/blazor/dropdown-list/accessibility">Accessibility</a></li>
<li> <a href="/blazor/dropdown-list/events">Events</a></li>
<li>How To
<ul> <li> <a href="/blazor/dropdown-list/how-to/tooltip">DropDownList options with tooltip</a></li> </ul>
</li>
@ -2027,6 +2065,7 @@
<li> <a href="/blazor/gantt-chart/managing-tasks">Managing Tasks</a></li>
<li> <a href="/blazor/gantt-chart/task-dependencies">Task Dependencies</a></li>
<li> <a href="/blazor/gantt-chart/sorting">Sorting</a></li>
<li> <a href="/blazor/gantt-chart/scrolling">Scrolling</a></li>
<li> <a href="/blazor/gantt-chart/context-menu">Context Menu</a></li>
<li> <a href="/blazor/gantt-chart/baseline">Baseline</a></li>
<li> <a href="/blazor/gantt-chart/time-line">Time Line</a></li>
@ -2042,6 +2081,7 @@
<li> <a href="/blazor/gantt-chart/tool-bar">Toolbar</a></li>
<li> <a href="/blazor/gantt-chart/excel-export">Excel Export</a></li>
<li> <a href="/blazor/gantt-chart/data-markers">Data Markers</a></li>
<li> <a href="/blazor/gantt-chart/webassembly-performance">WebAssembly Performance</a></li>
<li> <a href="/blazor/gantt-chart/accessibility">Accessibility</a></li>
<li> <a href="/blazor/gantt-chart/globalization">Globalization</a></li>
<li> <a href="/blazor/gantt-chart/touch-interaction">Touch Interaction</a></li>
@ -2050,7 +2090,7 @@
<ul>
<li> <a href="/blazor/gantt-chart/how-to/hide-chart-part">Hide chart part</a></li>
<li> <a href="/blazor/gantt-chart/how-to/open-add-edit-dialog-dynamically">Open Add Edit Dialog Dynamically</a></li>
<li> <a href="/blazor/gantt-chart/how-to/web-assembly">WebAssembly Gantt Chart</a></li>
<li> <a href="/blazor/gantt-chart/how-to/blazor-webassembly-gantt-using-visual-studio">WebAssembly Gantt Chart</a></li>
</ul>
</li>
<li> <a href="/blazor/gantt-chart/events">Events</a></li>
@ -2111,6 +2151,7 @@
<li>Kanban
<ul>
<li> <a href="/blazor/kanban/getting-started">Getting Started</a></li>
<li> <a href="/blazor/kanban/data-binding">Data Binding</a></li>
<li> <a href="/blazor/kanban/columns">Columns</a></li>
<li> <a href="/blazor/kanban/cards">Cards</a></li>
<li> <a href="/blazor/kanban/swimlane">Swimlane</a></li>
@ -2259,10 +2300,13 @@
<li> <a href="/blazor/multiselect-dropdown/grouping">Grouping</a></li>
<li> <a href="/blazor/multiselect-dropdown/filtering">Filtering</a></li>
<li> <a href="/blazor/multiselect-dropdown/custom-value">Custom Value</a></li>
<li> <a href="/blazor/multiselect-dropdown/checkbox-grouping">Grouping with CheckBox</a></li>
<li> <a href="/blazor/multiselect-dropdown/checkbox">CheckBox</a></li>
<li> <a href="/blazor/multiselect-dropdown/style">Style and appearance</a></li>
<li> <a href="/blazor/multiselect-dropdown/virtualization">Virtualization</a></li>
<li> <a href="/blazor/multiselect-dropdown/localization">Localization</a></li>
<li> <a href="/blazor/multiselect-dropdown/accessibility">Accessibility</a></li>
<li> <a href="/blazor/multiselect-dropdown/events">Events</a></li>
<li>How To
<ul>
<li> <a href="/blazor/multiselect-dropdown/how-to/tooltip">DropDownList options with tooltip</a></li>
@ -2606,6 +2650,7 @@
<li> <a href="/blazor/scheduler/crud-actions">CRUD actions</a></li>
<li> <a href="/blazor/scheduler/virtual-scrolling">Virtual Scrolling</a></li>
<li> <a href="/blazor/scheduler/editor-template">Editor Window Customization</a></li>
<li> <a href="/blazor/scheduler/timezone">Timezone</a></li>
<li> <a href="/blazor/scheduler/views">Views</a></li>
<li> <a href="/blazor/scheduler/resources">Resources and Grouping</a></li>
<li> <a href="/blazor/scheduler/header-rows">Timeline Header Rows</a></li>
@ -2719,14 +2764,17 @@
<li> <a href="/blazor/splitter/getting-started">Getting Started</a></li>
<li> <a href="/blazor/splitter/pane-sizing">Pane Sizing</a></li>
<li> <a href="/blazor/splitter/pane-content">Pane Content</a></li>
<li> <a href="/blazor/splitter/pane-settings">Pane Settings</a></li>
<li> <a href="/blazor/splitter/split-panes">Split Panes</a></li>
<li> <a href="/blazor/splitter/expand-and-collapse">Expand and Collapse</a></li>
<li> <a href="/blazor/splitter/two-way-binding">Two way Binding</a></li>
<li> <a href="/blazor/splitter/resizing">Resize</a></li>
<li> <a href="/blazor/splitter/state-management">State Management</a></li>
<li> <a href="/blazor/splitter/different-layouts">Different Layouts</a></li>
<li> <a href="/blazor/splitter/resize-icon-template">Resize Icon Template</a></li>
<li> <a href="/blazor/splitter/style">Style and appearance</a></li>
<li> <a href="/blazor/splitter/events">Events</a></li>
<li> <a href="/blazor/splitter/accessibility">Accessibility</a></li>
</ul>
</li>
<li>Stock Chart
@ -3029,7 +3077,7 @@
</ul>
</li>
<li>Release Notes
<ul><li>2021 Volume 2 - 19.2.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.2.62">19.2.62</a></li><li><a href="/blazor/release-notes/19.2.60">19.2.60</a></li><li><a href="/blazor/release-notes/19.2.59">19.2.59</a></li><li><a href="/blazor/release-notes/19.2.57">19.2.57</a></li><li><a href="/blazor/release-notes/19.2.56">19.2.56</a></li><li><a href="/blazor/release-notes/19.2.51">19.2.51</a></li><li><a href="/blazor/release-notes/19.2.49">19.2.49</a></li><li><a href="/blazor/release-notes/19.2.48">19.2.48</a></li><li><a href="/blazor/release-notes/19.2.47">19.2.47</a></li><li><a href="/blazor/release-notes/19.2.46">19.2.46</a></li></ul></li><li><a href="/blazor/release-notes/19.2.55">19.2.55 Service Pack Release</a></li><li><a href="/blazor/release-notes/19.2.44">19.2.44 Main Release</a></li></ul></li><li>2021 volume 1 - 19.1.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.1.69">19.1.69</a></li><li><a href="/blazor/release-notes/19.1.67">19.1.67</a></li><li><a href="/blazor/release-notes/19.1.66">19.1.66</a></li><li><a href="/blazor/release-notes/19.1.65">19.1.65</a></li><li><a href="/blazor/release-notes/19.1.64">19.1.64</a></li><li><a href="/blazor/release-notes/19.1.59">19.1.59</a></li><li><a href="/blazor/release-notes/19.1.58">19.1.58</a></li><li><a href="/blazor/release-notes/19.1.57">19.1.57</a></li><li><a href="/blazor/release-notes/19.1.56">19.1.56</a></li><li><a href="/blazor/release-notes/19.1.55">19.1.55</a></li></ul></li><li><a href="/blazor/release-notes/19.1.63">19.1.63 Service Pack Release</a></li><li><a href="/blazor/release-notes/19.1.54">19.1.54 Main release</a></li></ul></li>
<ul><li>2021 volume 3 - v19.3.0.*<ul><li><a href="/blazor/release-notes/19.3.43">19.3.43 Main Release</a></li></ul></li><li>2021 Volume 2 - 19.2.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.2.62">19.2.62</a></li><li><a href="/blazor/release-notes/19.2.60">19.2.60</a></li><li><a href="/blazor/release-notes/19.2.59">19.2.59</a></li><li><a href="/blazor/release-notes/19.2.57">19.2.57</a></li><li><a href="/blazor/release-notes/19.2.56">19.2.56</a></li><li><a href="/blazor/release-notes/19.2.51">19.2.51</a></li><li><a href="/blazor/release-notes/19.2.49">19.2.49</a></li><li><a href="/blazor/release-notes/19.2.48">19.2.48</a></li><li><a href="/blazor/release-notes/19.2.47">19.2.47</a></li><li><a href="/blazor/release-notes/19.2.46">19.2.46</a></li></ul></li><li><a href="/blazor/release-notes/19.2.55">19.2.55 Service Pack Release</a></li><li><a href="/blazor/release-notes/19.2.44">19.2.44 Main Release</a></li></ul></li><li>2021 volume 1 - 19.1.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.1.69">19.1.69</a></li><li><a href="/blazor/release-notes/19.1.67">19.1.67</a></li><li><a href="/blazor/release-notes/19.1.66">19.1.66</a></li><li><a href="/blazor/release-notes/19.1.65">19.1.65</a></li><li><a href="/blazor/release-notes/19.1.64">19.1.64</a></li><li><a href="/blazor/release-notes/19.1.59">19.1.59</a></li><li><a href="/blazor/release-notes/19.1.58">19.1.58</a></li><li><a href="/blazor/release-notes/19.1.57">19.1.57</a></li><li><a href="/blazor/release-notes/19.1.56">19.1.56</a></li><li><a href="/blazor/release-notes/19.1.55">19.1.55</a></li></ul></li><li><a href="/blazor/release-notes/19.1.63">19.1.63 Service Pack Release</a></li><li><a href="/blazor/release-notes/19.1.54">19.1.54 Main release</a></li></ul></li>
<li>2020 volume 4 - 18.4.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/18.4.49">18.4.49</a></li><li><a href="/blazor/release-notes/18.4.48">18.4.48</a></li><li><a href="/blazor/release-notes/18.4.47">18.4.47</a></li><li><a href="/blazor/release-notes/18.4.46">18.4.46</a></li><li><a href="/blazor/release-notes/18.4.44">18.4.44</a></li><li><a href="/blazor/release-notes/18.4.43">18.4.43</a></li><li><a href="/blazor/release-notes/18.4.42">18.4.42</a></li><li><a href="/blazor/release-notes/18.4.41">18.4.41</a></li><li><a href="/blazor/release-notes/18.4.35">18.4.35</a></li><li><a href="/blazor/release-notes/18.4.34">18.4.34</a></li><li><a href="/blazor/release-notes/18.4.33">18.4.33</a></li><li><a href="/blazor/release-notes/18.4.32">18.4.32</a></li><li><a href="/blazor/release-notes/18.4.31">18.4.31</a></li></ul></li><li><a href="/blazor/release-notes/18.4.39">18.4.39 Service Pack Release</a></li><li><a href="/blazor/release-notes/18.4.30">18.4.30 Main Release</a></li></ul></li>
<li>2020 volume 3 - 18.3.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/18.3.53">18.3.53</a></li><li><a href="/blazor/release-notes/18.3.52">18.3.52</a></li><li><a href="/blazor/release-notes/18.3.51">18.3.51</a></li><li><a href="/blazor/release-notes/18.3.50">18.3.50</a></li><li><a href="/blazor/release-notes/18.3.48">18.3.48</a></li><li><a href="/blazor/release-notes/18.3.44">18.3.44</a></li><li><a href="/blazor/release-notes/18.3.42">18.3.42</a></li><li><a href="/blazor/release-notes/18.3.41">18.3.41</a></li><li><a href="/blazor/release-notes/18.3.40">18.3.40</a></li><li><a href="/blazor/release-notes/18.3.38">18.3.38</a></li></ul></li><li><a href="/blazor/release-notes/18.3.47">18.3.47 Service Pack Release</a></li><li><a href="/blazor/release-notes/18.3.35">18.3.35 Main release</a></li></ul></li>
<li>2020 volume 2 - 18.2.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/18.2.59">18.2.59</a></li><li><a href="/blazor/release-notes/18.2.58">18.2.58</a></li><li><a href="/blazor/release-notes/18.2.57">18.2.57</a></li><li><a href="/blazor/release-notes/18.2.56">18.2.56</a></li><li><a href="/blazor/release-notes/18.2.55">18.2.55</a></li><li><a href="/blazor/release-notes/18.2.54">18.2.54</a></li><li><a href="/blazor/release-notes/18.2.48">18.2.48</a></li><li><a href="/blazor/release-notes/18.2.47">18.2.47</a></li><li><a href="/blazor/release-notes/18.2.46">18.2.46</a></li><li><a href="/blazor/release-notes/18.2.45">18.2.45</a></li></ul></li><li><a href="/blazor/release-notes/18.2.44">18.2.44 Main Release</a></li></ul></li>

649
blazor/gantt-chart/appearance-and-customization.md
Просмотреть файл

@ -42,62 +42,20 @@ Height of child taskbars and parent taskbars can be customized by using `Taskbar
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30 },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = "4", Progress = 40 },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30 },
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40,
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30
}
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 30 },
new TaskData() { TaskId = 7, TaskName = "List materials",StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 40 },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 04), Duration = "0", Progress = 30 }
})
}
};
@ -107,36 +65,41 @@ Height of child taskbars and parent taskbars can be customized by using `Taskbar
}
```
![Alt text](images/taskbarHeight.png)
![Customizing Taskbar Height in Blazor Gantt Chart](images/blazor-gantt-chart-taskbar-height.png)
> The `TaskbarHeight` property accepts only pixel value.
### Taskbar Background
The default taskbar UI can be replaced with custom styles. The following code example shows customizing the taskbar UI in the Gantt Chart component.
In the Gantt Chart component, the appearance can be customized based on the Hierarchy using the `GetHierarchicalData` method with the custom styles. So, the method `GetHierarchicalData` helps the user to do the customization and access the internal properties of Gantt. The following code example shows how to customize Gantt Chart Rows using Gantt properties as `level` and `hasChildRecords` from `GetHierarchicalData` method in `QueryChartRowInfo` event of Gantt.
```cshtml
@using Syncfusion.Blazor.Gantt
<SfGantt DataSource="@TaskCollection" Height="450px" Width="900px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate"
Duration="Duration" Progress="Progress" Child="SubTasks">
<SfGantt @ref="Gantt" DataSource="@TaskCollection" Height="450px" Width="700px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
</GanttTaskFields>
<GanttEvents TValue="TaskData" QueryChartRowInfo="GanttChartRowInfo"></GanttEvents>
</SfGantt>
<style>
.e-gantt-child-taskbar {
background-color: red !important;
}
.e-gantt-parent-taskbar {
background-color: green !important;
}
</style>
@code{
SfGantt<TaskData> Gantt;
public List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
private void GanttChartRowInfo(QueryChartRowInfoEventArgs<TaskData> args)
{
dynamic data = Gantt.GetHierarchicalData(args.Data.TaskId);
if (data.level == 0 && data.hasChildRecords == true)
{
args.Row.AddClass(new string[] { "customize-parent" });
}
else
{
args.Row.AddClass(new string[] { "customize-child" });
}
}
public class TaskData
{
public int TaskId { get; set; }
@ -145,77 +108,35 @@ The default taskbar UI can be replaced with custom styles. The following code ex
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public List<TaskData> SubTasks { get; set; }
public int? ParentId { get; set; }
}
public static List <TaskData> GetTaskCollection() {
public static List<TaskData> GetTaskCollection()
{
List<TaskData> Tasks = new List<TaskData>() {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "3",
Progress = 30,
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40,
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30
}
})
}
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21) },
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30, ParentId = 1 },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = "4", Progress = 40, ParentId = 1 },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30, ParentId = 1 },
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21) },
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 30, ParentId = 5 },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 40, ParentId = 5 },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 04), Duration = "0", Progress = 30, ParentId = 5 }
};
return Tasks;
}
}
<style>
.customize-parent .e-gantt-parent-taskbar {
background-color: green !important;
}
.customize-child .e-gantt-child-taskbar {
background-color: red !important;
}
</style>
```
![Alt text](images/conditionFormat.png)
![Changing Taskbar Background in Blazor Gantt Chart](images/blazor-gantt-chart-taskbar-background.png)
### Taskbar Template
@ -342,84 +263,14 @@ You can design your own taskbars to view the tasks in Gantt Chart Chart by using
public static List<TaskbarData> TaskTemplateData()
{
List<TaskbarData> TaskDataCollection = new List<TaskbarData> {
new TaskbarData()
{
TaskId = 1,
TaskName = "Product concept",
StartDate = new DateTime(2018, 03, 05, 18, 0, 0),
EndDate = new DateTime(2018, 03, 05, 18, 15, 0),
},
new TaskbarData()
{
TaskId = 2,
TaskName = "Oscar moments",
StartDate = new DateTime(2018, 03, 05, 18, 30, 0),
EndDate = new DateTime(2018, 03, 05, 18, 45, 0),
Winner = "",
Performance = "90th Academy awards kicks-off and Jimmy kimmel hosts the show",
ParentId=1
},
new TaskbarData()
{
TaskId = 3,
TaskName = "Actor in a supporting role",
StartDate = new DateTime(2018, 03, 05, 18, 36, 0),
EndDate = new DateTime(2018, 03, 05, 18, 42, 0),
Predecessor = "1",
Winner = "Sam Rockwell",
Movie = "Three Billboards Outside Ebbing, Missouri.",
ParentId=1
},
new TaskbarData()
{
TaskId = 4,
TaskName = "Hair and makeup",
StartDate = new DateTime(2018, 03, 05, 18, 33, 0),
EndDate = new DateTime(2018, 03, 05, 18, 40, 0),
Predecessor = "2",
Movie = "Darkest Hour",
ParentId=1
},
new TaskbarData()
{
TaskId = 5,
TaskName = "Product release",
StartDate = new DateTime(2018, 03, 05, 18, 41, 0),
EndDate = new DateTime(2018, 03, 05, 18, 52, 0),
},
new TaskbarData()
{
TaskId = 6,
TaskName = "Costume design",
StartDate = new DateTime(2018, 03, 05, 18, 59, 0),
EndDate = new DateTime(2018, 03, 05, 19, 10, 0),
Predecessor = "3",
Winner = "Mark Bridges",
Movie = "Phantom Thread",
ParentId = 5
},
new TaskbarData()
{
TaskId = 7,
TaskName = "Documentary feature",
StartDate = new DateTime(2018, 03, 05, 19, 11, 0),
EndDate = new DateTime(2018, 03, 05, 19, 15, 0),
Predecessor = "4",
Winner = "Bryan Fogel",
Movie = "Icarus",
ParentId = 5
},
new TaskbarData()
{
TaskId = 8,
TaskName = "Best sound editing and sound mixing",
StartDate = new DateTime(2018, 03, 05, 19, 16, 0),
EndDate = new DateTime(2018, 03, 05, 19, 23, 0),
Predecessor = "5",
Winner = "Richard King and Alex Gibson",
Movie = "Dunkirk",
ParentId = 5
},
new TaskbarData() { TaskId = 1, TaskName = "Product concept", StartDate = new DateTime(2018, 03, 05, 18, 0, 0), EndDate = new DateTime(2018, 03, 05, 18, 15, 0) },
new TaskbarData() { TaskId = 2, TaskName = "Oscar moments", StartDate = new DateTime(2018, 03, 05, 18, 30, 0), EndDate = new DateTime(2018, 03, 05, 18, 45, 0), Winner = "", Performance = "90th Academy awards kicks-off and Jimmy kimmel hosts the show", ParentId=1 },
new TaskbarData() { TaskId = 3, TaskName = "Actor in a supporting role", StartDate = new DateTime(2018, 03, 05, 18, 36, 0), EndDate = new DateTime(2018, 03, 05, 18, 42, 0), Predecessor = "1",Winner = "Sam Rockwell", Movie = "Three Billboards Outside Ebbing, Missouri.", ParentId=1 },
new TaskbarData() { TaskId = 4, TaskName = "Hair and makeup", StartDate = new DateTime(2018, 03, 05, 18, 33, 0), EndDate = new DateTime(2018, 03, 05, 18, 40, 0), Predecessor = "2", Movie = "Darkest Hour", ParentId=1 },
new TaskbarData() { TaskId = 5, TaskName = "Product release", StartDate = new DateTime(2018, 03, 05, 18, 41, 0), EndDate = new DateTime(2018, 03, 05, 18, 52, 0) },
new TaskbarData() { TaskId = 6, TaskName = "Costume design", StartDate = new DateTime(2018, 03, 05, 18, 59, 0), EndDate = new DateTime(2018, 03, 05, 19, 10, 0), Predecessor = "3", Winner = "Mark Bridges", Movie = "Phantom Thread", ParentId = 5 },
new TaskbarData() { TaskId = 7, TaskName = "Documentary feature", StartDate = new DateTime(2018, 03, 05, 19, 11, 0), EndDate = new DateTime(2018, 03, 05, 19, 15, 0), Predecessor = "4", Winner = "Bryan Fogel", Movie = "Icarus", ParentId = 5 },
new TaskbarData() { TaskId = 8, TaskName = "Best sound editing and sound mixing", StartDate = new DateTime(2018, 03, 05, 19, 16, 0), EndDate = new DateTime(2018, 03, 05, 19, 23, 0), Predecessor = "5", Winner = "Richard King and Alex Gibson", Movie = "Dunkirk", ParentId = 5 }
};
return TaskDataCollection;
}
@ -456,9 +307,9 @@ You can design your own taskbars to view the tasks in Gantt Chart Chart by using
</style>
```
![Alt text](images/template.png)
![Blazor Gantt Chart with Taskbar Template](images/blazor-gantt-chart-taskbar-template.png)
## Task Labels
## Task labels
The Gantt Chart component maps any data source fields to task labels using the `GanttLabelSettings.LeftLabel`, `GanttLabelSettings.RightLabel`, and `GanttLabelSettings.TaskLabel` properties. You can customize the task labels with templates using `GanttLabelSettings.LeftLabelTemplate`, `GanttLabelSettings.RightLabelTemplate` and `GanttLabelSettings.TaskLabelTemplate`
@ -501,62 +352,20 @@ The Gantt Chart component maps any data source fields to task labels using the `
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 02), Duration = "3", Progress = 30 },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = "4", Progress = 40 },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30 },
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40,
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30
}
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 30 },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04),Duration = "3", Progress = 40 },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 04), Duration = "0", Progress = 30 }
})
}
};
@ -571,7 +380,7 @@ The Gantt Chart component maps any data source fields to task labels using the `
</style>
```
![Alt text](images/tasklabelTemplate.png)
![Blazor Gantt Chart with Task Label](images/blazor-gantt-chart-task-label.png)
## Connector lines
@ -605,67 +414,20 @@ The width and background color of connector lines in Gantt Chart can be customiz
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
Predecessor = "2"
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
Predecessor = "3"
},
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30 },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = "4", Progress = 40, Predecessor = "2" },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30, Predecessor = "3" },
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
Predecessor = "4"
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40,
Predecessor = "6"
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
Predecessor = "7"
},
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 30, Predecessor = "4" },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04),Duration = "3", Progress = 40, Predecessor = "6" },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 04), Duration = "0", Progress = 30, Predecessor = "7" }
})
}
};
@ -675,7 +437,7 @@ The width and background color of connector lines in Gantt Chart can be customiz
}
```
![Alt text](images/dependencyFormatting.png)
![Customizing Connector Lines in Blazor Gantt Chart](images/blazor-gantt-chart-connector-line-customization.png)
## Customize rows and cells
@ -748,62 +510,19 @@ While rendering the Tree Grid part in Gantt Chart, the `RowDataBound` and `Query
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30 },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = "4", Progress = 40 },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30 },
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40,
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30
}
new TaskData() { TaskId = 6,TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04),Duration = "3",Progress = 30 },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04),Duration = "3", Progress = 40 },
new TaskData() { TaskId = 8, TaskName = "Estimation approval",StartDate = new DateTime(2019, 04, 04),Duration = "0", Progress = 30 }
})
}
};
@ -813,7 +532,7 @@ While rendering the Tree Grid part in Gantt Chart, the `RowDataBound` and `Query
}
```
![Alt text](images/rowCell.png)
![Customizing Rows and Cells in Blazor Gantt Chart](images/blazor-gantt-chart-row-cell-customization.png)
## Grid lines
@ -855,63 +574,15 @@ The following options are available in the Gantt Chart component for rendering t
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02),EndDate = new DateTime(2019, 04, 21), SubTasks = (new List <TaskData> () {
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 02),Duration = "0", Progress = 30 },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02),Duration = "4", Progress = 40 },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02),Duration = "0", Progress = 30 }})
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40,
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
},
})
new TaskData() {TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02),EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () { new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 30 },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04),Duration = "3", Progress = 40 },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 04),Duration = "0", Progress = 30 }})
}
};
@ -920,7 +591,7 @@ The following options are available in the Gantt Chart component for rendering t
}
```
![Alt text](images/gridLines.png)
![Hiding Grid Lines in Blazor Gantt Chart](images/blazor-gantt-chart-hide-grid-lines.png)
## Splitter
@ -960,63 +631,15 @@ Gantt Chart component consists of both Tree Grid part and Chart part. Splitter i
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02),EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () { new TaskData() { TaskId = 2, TaskName = "Identify Site location",StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30 },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02),Duration = "4", Progress = 40 },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02),Duration = "0", Progress = 30 }})
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40,
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
},
})
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02),EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () { new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 30 },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04),Duration = "3", Progress = 40 },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 04),Duration = "0", Progress = 30 }})
}
};
@ -1025,7 +648,7 @@ Gantt Chart component consists of both Tree Grid part and Chart part. Splitter i
}
```
![Alt text](images/changeSplitter.png)
![Changing Splitter Position in Blazor Gantt Chart](images/blazor-gantt-chart-splitter-position.png)
### Change splitter position dynamically
@ -1097,63 +720,17 @@ The following code example shows how to use this method.
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
new TaskData() {
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 2,
TaskName = "Identify Site location",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30 },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = "4", Progress = 40 },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30 }})
},
new TaskData() {
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = "4",
Progress = 40,
},
new TaskData() {
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = "0",
Progress = 30,
},
})
},
new TaskData() {
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () {
new TaskData() {
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 30,
},
new TaskData() {
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = "3",
Progress = 40,
},
new TaskData() {
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 04),
Duration = "0",
Progress = 30,
},
})
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02),EndDate = new DateTime(2019, 04, 21),
SubTasks = (new List <TaskData> () { new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 30 },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04),Duration = "3", Progress = 40 },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2019, 04, 04),Duration = "0", Progress = 30 }})
}
};
@ -1162,6 +739,6 @@ The following code example shows how to use this method.
}
```
![Alt text](images/splitterMethods.gif)
![Changing Splitter Position in Blazor Gantt Chart](images/blazor-gantt-chart-with-splitter.png)
> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to knows how to render and configure the gantt.
> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities) to knows how to render and configure the gantt.

Двоичные данные
blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 36 KiB

113
blazor/gantt-chart/webassembly-performance.md Normal file
Просмотреть файл

@ -0,0 +1,113 @@
---
layout: post
title: WebAssembly Performance in Blazor Gantt Component | Syncfusion
description: Checkout and learn here all about WebAssembly Performance in Syncfusion Blazor Gantt component and more.
platform: Blazor
control: Gantt Chart
documentation: ug
---
# WebAssembly Performance in Blazor Gantt Component
This section provides performance guidelines for using Syncfusion Gantt component efficiently in Blazor WebAssembly application. The general framework Blazor WebAssembly performance best practice/guidelines can be found [here](https://docs.microsoft.com/en-us/aspnet/core/blazor/webassembly-performance-best-practices).
> You can refer to our Getting Started with [Blazor Server-Side Gantt](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio-2019/) and [Blazor WebAssembly Gantt](https://blazor.syncfusion.com/documentation/gantt-chart/how-to/blazor-webassembly-gantt-using-visual-studio/) documentation pages for configuration specifications.
## Avoid unnecessary component renders
**PreventRender** method help you to avoid unnecessary re-rendering of the Gantt component. This method internally overrides the **ShouldRender** method of the gantt to prevent rendering.
In the following example:
* **PreventRender** method is called in the **ButtonHandler**. Able to change the value by clicking **Prevent Render** button.
* While doing zooming action, Gantt chart component will not re-render if prevent render value as true. Chart will get updated if prevent render as false.
```cshtml
@using Syncfusion.Blazor.Gantt
@using Syncfusion.Blazor.Grids
<button @onclick="ButtonHandler">Prevent Renderer</button>
<label>@PreventRender</label>
<SfGantt @ref="Gantt"
DataSource="@TaskCollection"
Height="450px"
Width="750px"
Toolbar="@(new List<string>() {"ZoomIn", "ZoomOut", "ZoomToFit"})"
AllowReordering="true"
ShowColumnMenu="true"
AllowSelection="true"
EnableContextMenu="true"
AllowFiltering="true"
AllowSorting="true"
AllowResizing="true"
EnablePredecessorValidation="true">
<GanttTaskFields Id="TaskId"
Name="TaskName"
StartDate="StartDate"
EndDate="EndDate"
Duration="Duration"
Progress="Progress"
Dependency="Predecessor"
Child="SubTasks">
</GanttTaskFields>
<GanttSelectionSettings Mode="SelectionMode.Row" Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GanttSelectionSettings>
<GanttEditSettings AllowTaskbarEditing="true"
AllowEditing="true"
AllowAdding="true"
AllowDeleting="true"
Mode="Syncfusion.Blazor.Gantt.EditMode.Auto"
ShowDeleteConfirmDialog="true">
</GanttEditSettings>
</SfGantt>
@code{
public SfGantt<TaskData> Gantt;
public bool PreventRender { get; set; }
public List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.TaskCollection = GetTaskCollection();
}
public void ButtonHandler()
{
PreventRender = !PreventRender;
Gantt.PreventRender(PreventRender);
}
public class TaskData
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Duration { get; set; }
public int Progress { get; set; }
public string Predecessor { get; set; }
public List<TaskData> SubTasks { get; set; }
}
public static List<TaskData> GetTaskCollection()
{
List<TaskData> Tasks = new List<TaskData>()
{
new TaskData() {TaskId = 1,TaskName = "Project initiation",StartDate = new DateTime(2019, 04, 02),EndDate = new DateTime(2019, 04, 21),SubTasks = (new List <TaskData> () {new TaskData() {TaskId = 2,TaskName = "Identify Site location",StartDate = new DateTime(2019, 04, 02),Duration = "0",Progress = 30},new TaskData() {TaskId = 3,TaskName = "Perform soil test",StartDate = new DateTime(2019, 04, 02),Duration = "4",Progress = 40},new TaskData() {TaskId = 4,TaskName = "Soil test approval",StartDate = new DateTime(2019, 04, 02),Duration = "0",Progress = 30,Predecessor = "2"}})},
new TaskData() {TaskId = 5,TaskName = "Project estimation",StartDate = new DateTime(2019, 04, 02),EndDate = new DateTime(2019, 04, 21),SubTasks = (new List <TaskData> () {new TaskData() {TaskId = 6,TaskName = "Develop floor plan for estimation",StartDate = new DateTime(2019, 04, 04),Duration = "3",Progress = 30},new TaskData() {TaskId = 7,TaskName = "List materials",StartDate = new DateTime(2019, 04, 04),Duration = "3",Progress = 40,Predecessor = "4"},new TaskData() {TaskId = 8,TaskName = "Estimation approval",StartDate = new DateTime(2019, 04, 04),Duration = "0",Progress = 30,Predecessor = "6"}})},
new TaskData() {TaskId = 9,TaskName = "Project initiation",StartDate = new DateTime(2019, 04, 02),EndDate = new DateTime(2019, 04, 21),SubTasks = (new List <TaskData> () {new TaskData() {TaskId = 10,TaskName = "Identify Site location",StartDate = new DateTime(2019, 04, 02),Duration = "0",Progress = 30,},new TaskData() {TaskId = 11,TaskName = "Perform soil test",StartDate = new DateTime(2019, 04, 02),Duration = "4",Progress = 40,},})}
};
return Tasks;
}
}
```
![Blazor Gantt Chart with PreventRender](images/preventrender.gif)
### Notes
* **PreventRender** method accepts boolean argument that accepts true or false to disable or enable rendering respectively.
* **PreventRender** method can be used only after gantt component completed initial rendering. Calling this method during initial rendering will not have any effect.

47
blazor/multiselect-dropdown/custom-value.md
Просмотреть файл

@ -9,7 +9,9 @@ documentation: ug
# Custom Value in Blazor MultiSelect Dropdown Component
The MultiSelect allows the users to add a new non-present option to the component value when [AllowCustomValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-1.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_1_AllowCustomValue) is enabled. while selecting the new custom value, the `CustomValueSelection` event will be triggered.
The MultiSelect allows the user to select and tag the typed custom value that is not present in the data source when you set the [AllowCustomValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-1.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_1_AllowCustomValue) as true. The selected custom value is added to the suggestion list alone. It will not affect the original data source. The `CustomValueSpecifier` event will trigger when you select or tag the typed custom value.
> The `Value` field, `Text` field, and `Value` must be of `string` type when you enable the custom value. For other types, you must provide the custom data for the typed custom value in the `CustomValueSpecifier` event. Please find the details on [Value as non-string type](https://blazor.syncfusion.com/documentation/multiselect-dropdown/custom-value#value-as-non-string-type) section.
The following sample demonstrates configuration of custom value support with the MultiSelect component.
@ -43,4 +45,45 @@ The following sample demonstrates configuration of custom value support with the
The output will be as follows.
![MultiSelect](./images/custom_value.png)
![Blazor MultiSelect with custom value](./images/custom_value.png)
## Value as non-string type
By default, the typed custom value is updated to both the Value and Text field of the custom data. If the TValue type is a non-`string` type, then you have to provide the custom data for the typed custom value in the `CustomValueSpecifier` event like given below.
In the `CustomValueSpecifier` event, you will get the typed custom value in the `Text` argument of the event. Based on that text value, you should form the data for the custom value and set it to the `NewData` argument of the event.
The following sample demonstrates configuration of custom value in `CustomValueSpecifier` event.
```cshtml
@using Syncfusion.Blazor.DropDowns
<SfMultiSelect TValue="int[]" TItem="Games" Placeholder="Favorite Sports" AllowCustomValue=true DataSource="@LocalData">
<MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
<MultiSelectEvents TValue="int[]" TItem="Games" CustomValueSpecifier="@CustomValueHandler"></MultiSelectEvents>
</SfMultiSelect>
@code {
public class Games
{
public int ID { get; set; }
public string Text { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= 1, Text= "American Football" },
new Games() { ID= 2, Text= "Badminton" },
new Games() { ID= 3, Text= "Basketball" },
new Games() { ID= 4, Text= "Cricket" },
new Games() { ID= 5, Text= "Football" },
new Games() { ID= 6, Text= "Golf" },
new Games() { ID= 7, Text= "Hockey" },
new Games() { ID= 8, Text= "Rugby"},
new Games() { ID= 9, Text= "Snooker" },
new Games() { ID= 10, Text= "Tennis"},
};
private void CustomValueHandler(CustomValueEventArgs<Games> args)
{
System.Random random = new System.Random();
args.NewData = new Games() { ID = random.Next(100), Text = args.Text };
}
}
```

193
blazor/scheduler/timezone.md Normal file
Просмотреть файл

@ -0,0 +1,193 @@
---
layout: post
title: Timezone in Blazor Scheduler Component | Syncfusion
description: This section includes the timezone topics explaining how to render the appointments in different timezones.
platform: Blazor
control: Scheduler
documentation: ug
---
# Timezone in Blazor Scheduler
The Scheduler renders events based on current system time zone of server in server side application and in WASM application the events are rendered based on UTC timezone by default.
You can change the timezone of the scheduler by setting [Timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_Timezone) property. For more information, please refer to the [section](#display-appointments-based-on-Scheduler-time-zone)
.
You can also set timezone for each appointment (events) through [StartTimezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.FieldStartTimezone.html) and [EndTimezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.FieldEndTimezone.html) properties which can be defined as separate fields within the event fields collection. For more information, please refer to the [section](#create-appointments-in-different-time-zones).
You can also set the timezone for both the scheduler `Timezone` property and as well as the event's `StartTimezone` and `EndTimezone` properties. For more information, please refer to the [section](#display-appointments-based-on-client’s-time-zone).
>**NOTE**
* The given value for the Timezone property for both the Scheduler and the appointments should be in the [IANA](https://www.iana.org/time-zones) format.
* The WASM application has supported the limited [time zones](https://github.com/dotnet/runtime/issues/44840#issuecomment-764991667) in .Net5. But in .Net6, it supported the all [time zones](https://github.com/dotnet/runtime/pull/50650).
## Create appointments in different time zones
You can create appointments at different time zones using the `StartTimeZone` and `EndTimeZone` properties. An appointment’s start time and end time are calculated based on the given time zone information.
In the following code example, the appointments time zone is Europe Time (UTC+03:00), and the application is running in UTC time zone(here the Blazor Server application is hosted in UTC time zone and the Blazor WASM application's default time zone is UTC). In this scenario, the appointment will be displayed at 6 AM.
```csharp
@using Syncfusion.Blazor.Schedule
<SfSchedule TValue="AppointmentData" Width="100%" Height="550px" @bind-SelectedDate="@CurrentDate">
<ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
<ScheduleViews>
<ScheduleView Option="View.Day"></ScheduleView>
<ScheduleView Option="View.Week"></ScheduleView>
<ScheduleView Option="View.WorkWeek"></ScheduleView>
<ScheduleView Option="View.Month"></ScheduleView>
<ScheduleView Option="View.Agenda"></ScheduleView>
</ScheduleViews>
</SfSchedule>
@code{
DateTime CurrentDate = new DateTime(2020, 3, 10);
List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData {
Id = 1,
Subject = "Meeting",
StartTime = new DateTime(2020, 3, 9, 9, 0, 0) ,
EndTime = new DateTime(2020, 3, 9, 11, 0, 0),
StartTimezone = "Europe/Moscow",
EndTimezone = "Europe/Moscow"
}
};
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string Description { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
public Nullable<int> RecurrenceID { get; set; }
public string StartTimezone { get; set; }
public string EndTimezone { get; set; }
}
}
```
>**NOTE**
* If the recurring appointment is converted to another time zone, then the whole sequence will be recalculated according to the new time zone information.
* If an all-day appointment is created, it's start time and end time will be set to 12 A.M. and 12 A.M. by default, so time zone is not applicable for all-day appointments.
* Scheduler supports daylight saving time.
* The time zone support is applicable for custom appointments too, so map the corresponding property.
* Use [TimeZone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_Timezone) for custom appointments by mapping the [StartTimeZone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.FieldStartTimezone.html) and [EndTimeZone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.FieldEndTimezone.html) custom properties.
## Display Appointments based on client’s time zone
Display the appointments based on the client’s local time zone in scheduler. For example, consider a scenario that you are in North Carolina(America/New_York) and you want to set up a meeting at 10 A.M. on North Carolina time. You have colleagues in London and Chennai, and they also need to participate. The time for this meeting will be 3 P.M. (15:00) in London and 8.30 P.M. in Chennai. When each view your Scheduler, you need to see the appointment displayed relative to your local time zones. It can be achieved by getting browser's timezone and set it's value to the scheduler time zone and appointment’s time zone to Eastern Standard Time (America/New_York) [as you are in North Carolina(America/New_York) and it’s time zone is Eastern Standard Time].
```csharp
@using Syncfusion.Blazor.Schedule
@inject IJSRuntime JSRuntime
<SfSchedule TValue="AppointmentData" Width="100%" Height="550px" @bind-SelectedDate="@CurrentDate" Timezone="@TimezoneValue">
<ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
<ScheduleViews>
<ScheduleView Option="View.Day"></ScheduleView>
<ScheduleView Option="View.Week"></ScheduleView>
<ScheduleView Option="View.WorkWeek"></ScheduleView>
<ScheduleView Option="View.Month"></ScheduleView>
<ScheduleView Option="View.Agenda"></ScheduleView>
</ScheduleViews>
</SfSchedule>
@code{
public DateTime CurrentDate { get; set; } = new DateTime(2021, 1, 10);
string TimezoneValue;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
TimezoneValue = await JSRuntime.InvokeAsync<string>("eval", "(function(){try { return ''+ Intl.DateTimeFormat().resolvedOptions().timeZone; } catch(e) {} return 'UTC';}())");
StateHasChanged();
}
}
List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2021, 1, 11, 10, 0, 0) , EndTime = new DateTime(2021, 1 , 11, 11, 0, 0),StartTimezone = "America/New_York",
EndTimezone = "America/New_York" }
};
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string Description { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
public Nullable<int> RecurrenceID { get; set; }
public string StartTimezone { get; set; }
public string EndTimezone { get; set; }
}
}
```
## Display appointments based on Scheduler time zone
Set the specific time zone to schedule using the `TimeZone` property of scheduler. On this scenario, the appointments will be displayed in UTC time when the `StartTimeZone` and `EndTimeZone` properties are set to null. The appointments will be displayed in UTC time based on the given scheduler time zone.
In the following code example, the Scheduler time zone is Europe Time (UTC+03:00), and the application is running in UTC time zone(here the Blazor Server application is hosted in UTC time zone and the Blazor WASM application's default time zone is UTC). In this scenario, the appointment will be displayed at 12 PM.
```csharp
@using Syncfusion.Blazor.Schedule
<SfSchedule TValue="AppointmentData" Width="100%" Height="550px" @bind-SelectedDate="@CurrentDate" Timezone="Europe/Moscow">
<ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
<ScheduleViews>
<ScheduleView Option="View.Day"></ScheduleView>
<ScheduleView Option="View.Week"></ScheduleView>
<ScheduleView Option="View.WorkWeek"></ScheduleView>
<ScheduleView Option="View.Month"></ScheduleView>
<ScheduleView Option="View.Agenda"></ScheduleView>
</ScheduleViews>
</SfSchedule>
@code{
DateTime CurrentDate = new DateTime(2020, 3, 10);
List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2020, 3, 9, 9, 0, 0) , EndTime = new DateTime(2020, 3, 9, 11, 0, 0) }
};
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string Description { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
public Nullable<int> RecurrenceID { get; set; }
public string StartTimezone { get; set; }
public string EndTimezone { get; set; }
}
}
```
## Display appointments at same time everywhere regardless of client’s time zone
Display the appointments at the same time everywhere without considering the time zone while setting the `TimeZone` property of the scheduler, the `StartTimeZone` and `EndTimeZone` properties to null. The appointments will be displayed based on the given `StartTime` and `EndTime` of appointment everywhere without considering the time zone.
## Updating StartTime and EndTime after drag and drop appointment based on time zone
After rescheduling an appointment using drag and drop, appointment’s start and end time value will be updated based on scheduler time zone and appointment’s time zone.
For an example, consider the local time zone is India Standard Time, if you drag an appointment from 9 AM and drop this on 1 PM and the scheduler’s `TimeZone` is not set and the appointment’s `StartTimeZone` and `EndTimeZone` has set as AUS Central Standard Time (Australia/Darwin) then appointment’s start time and end time value will be converted from Local time zone to appointment time zone and the appointment’s start time will be saved at 5 PM.
If you set scheduler’s `TimeZone` as AUS Central Standard Time (Australia/Darwin) and the appointment’s `StartTimeZone` and `EndTimeZone` as Central Standard Time (America/Mexico_City) then the appointment’s start time and end time value has converted from scheduler’s time zone to appointment time zone and the appointment’s start time will be saved at 8.30 PM.
If you set scheduler’s TimeZone as AUS Central Standard Time (Australia/Darwin) and appointment’s time zone was not set then the appointment’s start time and end time value converted from scheduler time zone to UTC time zone and the appointment’s start time will be saved at 9 AM.