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

docs(common): Document breaking changes in version 7.0.0 (#2458) 

* docs(common): Document breaking changes in version 7

* doc(common): Breaking changes in v7 continued

* Mention .NET 7 support

* Fix slugs

* Update components/gantt/dependencies/editing.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>

* Update components/gantt/dependencies/overview.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>

* Update components/gantt/dependencies/overview.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>

* Update components/gantt/dependencies/overview.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>

* Update components/gantt/dependencies/overview.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>

* Update components/textarea/overview.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>

* Update knowledge-base/radiogroup-like-buttongroup.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>

* Update knowledge-base/textarea-autosize-max-height.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>

* Update upgrade/breaking-changes/7-0-0.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>

* Update upgrade/breaking-changes/7-0-0.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>

* reword hidden columns editability

* reword

---------

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
This commit is contained in:
Dimo Dimov 2024-10-25 11:02:43 +03:00 коммит произвёл GitHub
Родитель 5b16901303
Коммит 24ec9b02f3
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
25 изменённых файлов: 342 добавлений и 550 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
components/daterangepicker/overview.md
Просмотреть файл

@ -89,7 +89,7 @@ The Blazor Date Range Picker provides various parameters that allow you to confi
| `Placeholder` |`string` | The `placeholder` attribute of the two `<input />` elements. The `Placeholder` will appear if the component is bound to **nullable** DateTime objects - `DateTime?`, but will not be rendered if the component is bound to the default value of a non-nullable DateTime objects. The Placeholder value will be displayed when the input is not focused. Once the user focuses it to start typing, the Format Placeholder (default or [customized one](#format-placeholder)) will override the Placeholder to indicate the format the date should be entered in. |
| `ShowClearButton` | `bool` | Defines if the user can clear the component value through an **x** button rendered inside the input. |
| `ShowWeekNumbers` | `bool` | Sets if the popup Calendars will display week numbers according to the [ISO-8601 format](https://learn.microsoft.com/en-us/dotnet/api/system.globalization.isoweek.getweekofyear). Note that the [ISO week number may differ from the conventional .NET week number](https://learn.microsoft.com/en-us/dotnet/api/system.globalization.calendar.getweekofyear). |
| `ShowOtherMonthDays` | `bool` <br /> (`true`)| Defines whether the leading and trailing days from other months in the Calendar popup are visible in the current month view. |
| `ShowOtherMonthDays` | `bool` | Defines whether the leading and trailing days from other months in the Calendar popup are visible in the current month view. |
| `StartValue` and `EndValue` | `T` | The current values of the inputs for start and end of the range. Can be used for two-way binding. |
| `TabIndex` | `int?` | The `tabindex` attribute of both `input` HTML elements in the component. They both will have the same `tabindex`. Use it to customize the tabbing (focus) order of the inputs on your page. |
| `Title` | `string` | The title text rendered in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `Auto`]({%slug adaptive-rendering%}). |

204
components/gantt/dependencies/databind.md
Просмотреть файл

@ -6,6 +6,7 @@ slug: gantt-dependencies-databind
tags: telerik,blazor,gantt,chart,dependency,databind,data,databound
published: True
position: 5
previous_url: /components/gantt/dependencies/types
---
# Dependencies Data Binding
@ -18,10 +19,11 @@ To bind a collection of dependencies to the Gantt Chart you should use the `Data
| Feature | Type | Description |
| --- | --- | --- |
| `Data` | `IEnumerable<Object>` | The collection of dependencies. |
| `Data` | `IEnumerable<object>` | The collection of dependencies. |
| `IdField` | `string` | Unique identifier for each task. Use it for editing and hierarchy. |
| `PredecessorField` | `string` | Points to the predecessor task. |
| `SuccessorField` | `string` | Points to the successor task. |
| `TypeField` | `GanttDependencyType` enum | Points to the dependency type, which is the relationship between the two affected tasks. The supported values include `FinishFinish`, `FinishStart`, `StartStart`, and `StartFinish`. |
>note To use the Data Binding for the Gantt Dependencies you must provide all data binding features listed above.
@ -30,18 +32,15 @@ To bind a collection of dependencies to the Gantt Chart you should use the `Data
````CSHTML
@* Bind a collection to the Data parameter of GanttDependencies. *@
<TelerikGantt Data="@Data"
Width="100%"
<TelerikGantt Data="@GanttData"
Height="600px"
IdField="Id"
ParentIdField="ParentId"
IdField="@nameof(GanttFlatModel.Id)"
ParentIdField="nameof(GanttFlatModel.ParentId)"
Sortable="true"
SortMode="@SortMode.Multiple"
FilterMode="@GanttFilterMode.FilterMenu"
FilterMenuType="@FilterMenuType.Menu">
<GanttToolBarTemplate>
<GanttCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</GanttCommandButton>
</GanttToolBarTemplate>
FilterMenuType="@FilterMenuType.Menu"
OnEdit="@( (GanttEditEventArgs args) => args.IsCancelled = true )">
<GanttViews>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
@ -49,125 +48,134 @@ To bind a collection of dependencies to the Gantt Chart you should use the `Data
</GanttViews>
<GanttDependenciesSettings>
<GanttDependencies Data="@Dependencies"
PredecessorIdField="PredecessorId"
SuccessorIdField="SuccessorId"
TypeField="Type">
IdField="@nameof(GanttDependencyModel.Id)"
PredecessorIdField="@nameof(GanttDependencyModel.PredecessorId)"
SuccessorIdField="@nameof(GanttDependencyModel.SuccessorId)"
TypeField="@nameof(GanttDependencyModel.Type)">
</GanttDependencies>
</GanttDependenciesSettings>
<GanttColumns>
<GanttColumn Field="Id"
<GanttColumn Field="@nameof(GanttFlatModel.Id)"
Visible="false">
</GanttColumn>
<GanttColumn Field="Title"
<GanttColumn Field="@nameof(GanttFlatModel.Title)"
Expandable="true"
Width="160px"
Width="120px"
Title="Task Title">
</GanttColumn>
<GanttColumn Field="PercentComplete"
Width="100px">
<GanttColumn Field="@nameof(GanttFlatModel.PercentComplete)"
Title="Complete"
TextAlign="@ColumnTextAlign.Right"
DisplayFormat="{0:p0}"
Width="80px">
</GanttColumn>
<GanttColumn Field="Start"
Width="100px"
TextAlign="@ColumnTextAlign.Right">
<GanttColumn Field="@nameof(GanttFlatModel.Start)"
Width="80px"
DisplayFormat="{0:d}">
</GanttColumn>
<GanttColumn Field="End"
DisplayFormat="End: {0:d}"
Width="100px">
<GanttColumn Field="@nameof(GanttFlatModel.End)"
DisplayFormat="{0:d}"
Width="80px">
</GanttColumn>
<GanttCommandColumn>
<GanttCommandButton Command="Add" Icon="@SvgIcon.Plus"></GanttCommandButton>
<GanttCommandButton Command="Delete" Icon="@SvgIcon.Trash"></GanttCommandButton>
</GanttCommandColumn>
</GanttColumns>
</TelerikGantt>
@code {
public enum DependencyTypes
@code {
private List<GanttFlatModel> GanttData { get; set; } = new();
private List<GanttDependencyModel> Dependencies { get; set; } = new();
public int LastId { get; set; }
public int LastDependencyId { get; set; }
private int NextYear { get; set; } = DateTime.Today.AddYears(1).Year;
protected override void OnInitialized()
{
FinishFinish,
FinishStart,
StartStart,
StartFinish
};
GanttData = new List<GanttFlatModel>();
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
for (int i = 1; i <= 3; i++)
{
GanttData.Add(new GanttFlatModel()
{
Id = ++LastId,
Title = $"Task {i}",
Start = new DateTime(NextYear, 1, 6 + i),
End = new DateTime(NextYear, 1, 11 + i),
PercentComplete = i * 0.125
});
class FlatModel
var parentId = LastId;
for (int j = 1; j <= 3; j++)
{
GanttData.Add(new GanttFlatModel()
{
Id = ++LastId,
ParentId = parentId,
Title = $"Task {i} : {j}",
Start = new DateTime(NextYear, 1, 6 + i + j),
End = new DateTime(NextYear, 1, 7 + i + j),
PercentComplete = j * 0.225
});
if (i == 1 && j > 1)
{
Dependencies.Add(new GanttDependencyModel()
{
Id = ++LastDependencyId,
PredecessorId = LastId - 1,
SuccessorId = LastId,
Type = GanttDependencyType.FinishStart
});
}
if (i == 2 && j > 1)
{
Dependencies.Add(new GanttDependencyModel()
{
Id = ++LastDependencyId,
PredecessorId = LastId - 1,
SuccessorId = LastId,
Type = GanttDependencyType.FinishFinish
});
}
if (i == 3 && j > 1)
{
Dependencies.Add(new GanttDependencyModel()
{
Id = ++LastDependencyId,
PredecessorId = LastId - 1,
SuccessorId = LastId,
Type = GanttDependencyType.StartStart
});
}
}
}
base.OnInitialized();
}
class GanttFlatModel
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public string Title { get; set; } = string.Empty;
public double PercentComplete { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
}
class DependencyModel
class GanttDependencyModel
{
public int Id { get; set; }
public int PredecessorId { get; set; }
public int SuccessorId { get; set; }
public DependencyTypes Type { get; set; }
}
public int LastId { get; set; } = 1;
public int LastDependencyId { get; set; } = 1;
List<FlatModel> Data { get; set; }
List<DependencyModel> Dependencies { get; set; } = new List<DependencyModel>();
protected override void OnInitialized()
{
Data = new List<FlatModel>();
for (int i = 1; i < 6; i++)
{
var newItem = new FlatModel()
{
Id = LastId,
Title = "Employee " + i.ToString(),
Start = new DateTime(2020, 12, 6 + i),
End = new DateTime(2020, 12, 11 + i),
PercentComplete = i * 0.125
};
Data.Add(newItem);
var parentId = LastId;
LastId++;
for (int j = 0; j < 5; j++)
{
Data.Add(new FlatModel()
{
Id = LastId,
ParentId = parentId,
Title = " Employee " + i + " : " + j.ToString(),
Start = new DateTime(2020, 12, 6 + i + j),
End = new DateTime(2020, 12, 7 + i + j),
PercentComplete = j * 0.225
});
LastId++;
}
}
Dependencies.Add(new DependencyModel()
{
Id = LastDependencyId++,
PredecessorId = 3,
SuccessorId = 4,
Type = DependencyTypes.FinishFinish
});
Dependencies.Add(new DependencyModel()
{
Id = LastDependencyId++,
PredecessorId = 2,
SuccessorId = 5,
Type = DependencyTypes.StartFinish
});
base.OnInitialized();
public GanttDependencyType Type { get; set; }
}
}
````
## Next Steps
* [Explore Gantt dependency editing]({%slug gantt-dependencies-editing%})

209
components/gantt/dependencies/editing.md
Просмотреть файл

@ -12,40 +12,29 @@ position: 15
The Gantt Chart component allows you delete its dependencies and create new ones. It exposes dedicated events for dependency editing that you can use to transfer the changes to the underlying data source.
Sections in this article:
* [Basics](#basics)
* [Example](#example)
## Basics
This section explains the available events that you need to use for creating and deleting the Gantt dependencies. After that, you will find a code example.
List of the available events:
The Gantt provides the following dependency events:
* `OnCreate` - fires when the users drag the dependency handle of a task from one end-point to another and thus create a new dependency. It provides a `GanttDependencyCreateEventArgs` object that contains the currently created dependency.
* `OnDelete` - fires when the users deletes a dependency. To delete a dependency the user should select it using the mouse and press the `Delete` keyboard button. It provides a `GanttDependencyDeleteEventArgs` object that contains the currently deleted dependency in the `Item` field that you can cast to your model.
* `OnCreate` fires when the users drag the dependency handle of a task from one end point to another and thus create a new dependency. It provides a `GanttDependencyCreateEventArgs` object that contains the currently created dependency.
* `OnDelete` fires when the users deletes a dependency. To delete a dependency the user should select it using the mouse and press the `Delete` keyboard button. It provides a `GanttDependencyDeleteEventArgs` object that contains the currently deleted dependency in the `Item` field that you can cast to your model.
## Example
````CSHTML
@* Drag the dependency handle of a task to a new end-point to fire the Oncreate event. Delete a dependency to fire the OnDelete event *@
<TelerikGantt Data="@Data"
Width="100%"
<TelerikGantt Data="@GanttData"
Height="600px"
IdField="Id"
ParentIdField="ParentId"
IdField="@nameof(GanttFlatModel.Id)"
ParentIdField="nameof(GanttFlatModel.ParentId)"
Sortable="true"
SortMode="@SortMode.Multiple"
FilterMode="@GanttFilterMode.FilterMenu"
FilterMenuType="@FilterMenuType.Menu">
<GanttToolBarTemplate>
<GanttCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</GanttCommandButton>
</GanttToolBarTemplate>
FilterMenuType="@FilterMenuType.Menu"
OnEdit="@( (GanttEditEventArgs args) => args.IsCancelled = true )">
<GanttViews>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
@ -53,45 +42,52 @@ List of the available events:
</GanttViews>
<GanttDependenciesSettings>
<GanttDependencies Data="@Dependencies"
PredecessorIdField="PredecessorId"
SuccessorIdField="SuccessorId"
TypeField="Type"
IdField="@nameof(GanttDependencyModel.Id)"
PredecessorIdField="@nameof(GanttDependencyModel.PredecessorId)"
SuccessorIdField="@nameof(GanttDependencyModel.SuccessorId)"
TypeField="@nameof(GanttDependencyModel.Type)"
OnCreate="@CreateDependency"
OnDelete="@DeleteDependency">
</GanttDependencies>
</GanttDependenciesSettings>
<GanttColumns>
<GanttColumn Field="Id"
<GanttColumn Field="@nameof(GanttFlatModel.Id)"
Visible="false">
</GanttColumn>
<GanttColumn Field="Title"
<GanttColumn Field="@nameof(GanttFlatModel.Title)"
Expandable="true"
Width="160px"
Width="120px"
Title="Task Title">
</GanttColumn>
<GanttColumn Field="PercentComplete"
Width="100px">
<GanttColumn Field="@nameof(GanttFlatModel.PercentComplete)"
Title="Complete"
TextAlign="@ColumnTextAlign.Right"
DisplayFormat="{0:p0}"
Width="80px">
</GanttColumn>
<GanttColumn Field="Start"
Width="100px"
TextAlign="@ColumnTextAlign.Right">
<GanttColumn Field="@nameof(GanttFlatModel.Start)"
Width="80px"
DisplayFormat="{0:d}">
</GanttColumn>
<GanttColumn Field="End"
DisplayFormat="End: {0:d}"
Width="100px">
<GanttColumn Field="@nameof(GanttFlatModel.End)"
DisplayFormat="{0:d}"
Width="80px">
</GanttColumn>
<GanttCommandColumn>
<GanttCommandButton Command="Add" Icon="@SvgIcon.Plus"></GanttCommandButton>
<GanttCommandButton Command="Delete" Icon="@SvgIcon.Trash"></GanttCommandButton>
</GanttCommandColumn>
</GanttColumns>
</TelerikGantt>
@code {
private List<GanttFlatModel> GanttData { get; set; } = new();
private List<GanttDependencyModel> Dependencies { get; set; } = new();
public int LastId { get; set; }
public int LastDependencyId { get; set; }
private int NextYear { get; set; } = DateTime.Today.AddYears(1).Year;
private void CreateDependency(GanttDependencyCreateEventArgs args)
{
var dependency = new DependencyModel()
var dependency = new GanttDependencyModel()
{
Id = LastDependencyId++,
PredecessorId = (int)args.PredecessorId,
@ -104,86 +100,93 @@ List of the available events:
private void DeleteDependency(GanttDependencyDeleteEventArgs args)
{
Dependencies.RemoveAll(d => d.Id.Equals((args.Item as DependencyModel).Id));
var deletedDependency = (GanttDependencyModel)args.Item;
Dependencies.RemoveAll(d => d.Id == deletedDependency.Id);
}
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
protected override void OnInitialized()
{
GanttData = new List<GanttFlatModel>();
class FlatModel
for (int i = 1; i <= 3; i++)
{
GanttData.Add(new GanttFlatModel()
{
Id = ++LastId,
Title = $"Task {i}",
Start = new DateTime(NextYear, 1, 6 + i),
End = new DateTime(NextYear, 1, 11 + i),
PercentComplete = i * 0.125
});
var parentId = LastId;
for (int j = 1; j <= 3; j++)
{
GanttData.Add(new GanttFlatModel()
{
Id = ++LastId,
ParentId = parentId,
Title = $"Task {i} : {j}",
Start = new DateTime(NextYear, 1, 6 + i + j),
End = new DateTime(NextYear, 1, 7 + i + j),
PercentComplete = j * 0.225
});
if (i == 1 && j > 1)
{
Dependencies.Add(new GanttDependencyModel()
{
Id = ++LastDependencyId,
PredecessorId = LastId - 1,
SuccessorId = LastId,
Type = GanttDependencyType.FinishStart
});
}
if (i == 2 && j > 1)
{
Dependencies.Add(new GanttDependencyModel()
{
Id = ++LastDependencyId,
PredecessorId = LastId - 1,
SuccessorId = LastId,
Type = GanttDependencyType.FinishFinish
});
}
if (i == 3 && j > 1)
{
Dependencies.Add(new GanttDependencyModel()
{
Id = ++LastDependencyId,
PredecessorId = LastId - 1,
SuccessorId = LastId,
Type = GanttDependencyType.StartStart
});
}
}
}
base.OnInitialized();
}
class GanttFlatModel
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public string Title { get; set; } = string.Empty;
public double PercentComplete { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
}
class DependencyModel
class GanttDependencyModel
{
public int Id { get; set; }
public int PredecessorId { get; set; }
public int SuccessorId { get; set; }
public int Type { get; set; }
}
public int LastId { get; set; } = 1;
public int LastDependencyId { get; set; } = 1;
List<FlatModel> Data { get; set; }
List<DependencyModel> Dependencies { get; set; } = new List<DependencyModel>();
protected override void OnInitialized()
{
Data = new List<FlatModel>();
for (int i = 1; i < 6; i++)
{
var newItem = new FlatModel()
{
Id = LastId,
Title = "Employee " + i.ToString(),
Start = new DateTime(2020, 12, 6 + i),
End = new DateTime(2020, 12, 11 + i),
PercentComplete = i * 0.125
};
Data.Add(newItem);
var parentId = LastId;
LastId++;
for (int j = 0; j < 5; j++)
{
Data.Add(new FlatModel()
{
Id = LastId,
ParentId = parentId,
Title = " Employee " + i + " : " + j.ToString(),
Start = new DateTime(2020, 12, 6 + i + j),
End = new DateTime(2020, 12, 7 + i + j),
PercentComplete = j * 0.225
});
LastId++;
}
}
Dependencies.Add(new DependencyModel()
{
Id = LastDependencyId++,
PredecessorId = 3,
SuccessorId = 4,
Type = 0
});
Dependencies.Add(new DependencyModel()
{
Id = LastDependencyId++,
PredecessorId = 2,
SuccessorId = 5,
Type = 2
});
base.OnInitialized();
public GanttDependencyType Type { get; set; }
}
}
````

17
components/gantt/dependencies/overview.md
Просмотреть файл

@ -10,19 +10,16 @@ position: 0
# Gantt Dependencies
The Telerik Gantt for Blazor allows you define dependencies, which are rendered in the [Timeline]({%slug gantt-timeline%}) section of the component. A dependency represents a relation between two tasks. The direction of the arrow indicates which task is dependent on the other. You can bind a [data collection]({%slug gantt-dependencies-databind%}), define different [types]({%slug gantt-dependencies-types%}) of dependencies, and allow your users to [edit]({%slug gantt-dependencies-editing%}) the dependencies.
The Telerik Gantt for Blazor lets you define dependencies, which are rendered in the [Timeline]({%slug gantt-timeline%}) section of the component. A dependency represents a relation between two tasks. The direction of the arrow indicates which task is dependent on the other. You can bind a [data collection of different dependency types]({%slug gantt-dependencies-databind%}) and allow your users to [edit]({%slug gantt-dependencies-editing%}) the dependencies.
## Basics
#### To define dependencies in your Gantt Chart
To define dependencies in your Gantt Chart:
* Add the `GanttDependenciesSettings` tag, child tag of the `<TelerikGantt>`
* Add the `GanttDependenciesSettings` tag, child tag of the `<TelerikGantt>`.
* Inside the `GanttDependenciesSettings` add the `<GanttDependencies>` and provide a data collection to the `Data` parameter.
## Gantt Dependency Features
## Gantt Dependencies Features:
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
* `Data Binding` - Allows you to provide a collection of dependencies to the Gantt Chart for Blazor. For more information read the [Data Binding]({%slug gantt-dependencies-databind%}) article.
* `TypeField` - Defines the dependency type. For more information read the [Types]({%slug gantt-dependencies-types%}) article.
* `Editing` - Allow the user to edit the dependencies. For more information read the [Editing]({%slug gantt-dependencies-editing%}) article.
* [Dependency Data Binding]({%slug gantt-dependencies-databind%}) allows you to provide a collection of dependencies to the Gantt Chart for Blazor.
* [Dependency Editing]({%slug gantt-dependencies-editing%}) allows the user to edit the dependencies.

313
components/gantt/dependencies/types.md
Просмотреть файл

@ -1,313 +0,0 @@
---
title: Types
page_title: Gantt Dependencies - Types
description: Overview of the Dependency Types for the Gantt Chart for Blazor.
slug: gantt-dependencies-types
tags: telerik,blazor,gantt,chart,dependency,types
published: True
position: 10
---
# Types
The Telerik Gantt Chart for Blazor allows you to define four distinct types of dependencies. To define the dependency type use the `TypeField`, a parameter available on the `GanttDependencies` tag. The parameter accepts `int` and `enum` as values and can be one of the following:
* `FinishFinish` - `0` - A line from the end date of the predecessor to the end date of the successor.
* `FinishStart` - `1` - A line from the end date of the predecessor to the start date of the successor.
* `StartStart` - `2` - A line from the start date of the predecessor to the start date of the successor.
* `StartFinish` - `3` - A line from the start date of the predecessor to the end date of the successor.
## Examples
This section showcases both ways to define the dependency type - by using an `int`, and an `enum`:
* [Use an int to define the dependency type](#use-an-int-to-define-the-dependency-type)
* [Use an enum to define the dependency type](#use-an-enum-to-define-the-dependency-type)
### Use an int to define the dependency type
````CSHTML
@* Set the dependency type to FinishStart *@
<TelerikGantt Data="@Data"
Width="100%"
Height="600px"
IdField="Id"
ParentIdField="ParentId"
Sortable="true"
SortMode="@SortMode.Multiple"
FilterMode="@GanttFilterMode.FilterMenu"
FilterMenuType="@FilterMenuType.Menu">
<GanttToolBarTemplate>
<GanttCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</GanttCommandButton>
</GanttToolBarTemplate>
<GanttViews>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
<GanttYearView></GanttYearView>
</GanttViews>
<GanttDependenciesSettings>
<GanttDependencies Data="@Dependencies"
PredecessorIdField="PredecessorId"
SuccessorIdField="SuccessorId"
TypeField="Type">
</GanttDependencies>
</GanttDependenciesSettings>
<GanttColumns>
<GanttColumn Field="Id"
Visible="false">
</GanttColumn>
<GanttColumn Field="Title"
Expandable="true"
Width="160px"
Title="Task Title">
</GanttColumn>
<GanttColumn Field="PercentComplete"
Width="100px">
</GanttColumn>
<GanttColumn Field="Start"
Width="100px"
TextAlign="@ColumnTextAlign.Right">
</GanttColumn>
<GanttColumn Field="End"
DisplayFormat="End: {0:d}"
Width="100px">
</GanttColumn>
<GanttCommandColumn>
<GanttCommandButton Command="Add" Icon="@SvgIcon.Plus"></GanttCommandButton>
<GanttCommandButton Command="Delete" Icon="@SvgIcon.Trash"></GanttCommandButton>
</GanttCommandColumn>
</GanttColumns>
</TelerikGantt>
@code {
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
class FlatModel
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public double PercentComplete { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
}
class DependencyModel
{
public int Id { get; set; }
public int PredecessorId { get; set; }
public int SuccessorId { get; set; }
public int Type { get; set; }
}
public int LastId { get; set; } = 1;
public int LastDependencyId { get; set; } = 1;
List<FlatModel> Data { get; set; }
List<DependencyModel> Dependencies { get; set; } = new List<DependencyModel>();
protected override void OnInitialized()
{
Data = new List<FlatModel>();
for (int i = 1; i < 6; i++)
{
var newItem = new FlatModel()
{
Id = LastId,
Title = "Employee " + i.ToString(),
Start = new DateTime(2020, 12, 6 + i),
End = new DateTime(2020, 12, 11 + i),
PercentComplete = i * 0.125
};
Data.Add(newItem);
var parentId = LastId;
LastId++;
for (int j = 0; j < 5; j++)
{
Data.Add(new FlatModel()
{
Id = LastId,
ParentId = parentId,
Title = " Employee " + i + " : " + j.ToString(),
Start = new DateTime(2020, 12, 6 + i + j),
End = new DateTime(2020, 12, 7 + i + j),
PercentComplete = j * 0.225
});
LastId++;
}
}
Dependencies.Add(new DependencyModel()
{
Id = LastDependencyId++,
PredecessorId = 3,
SuccessorId = 4,
Type = 1
});
Dependencies.Add(new DependencyModel()
{
Id = LastDependencyId++,
PredecessorId = 2,
SuccessorId = 5,
Type = 1
});
base.OnInitialized();
}
}
````
### Use an enum to define the dependency type
````CSHTML
@* Set the dependency type by using an enum *@
<TelerikGantt Data="@Data"
Width="100%"
Height="600px"
IdField="Id"
ParentIdField="ParentId"
Sortable="true"
SortMode="@SortMode.Multiple"
FilterMode="@GanttFilterMode.FilterMenu"
FilterMenuType="@FilterMenuType.Menu">
<GanttToolBarTemplate>
<GanttCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</GanttCommandButton>
</GanttToolBarTemplate>
<GanttViews>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
<GanttYearView></GanttYearView>
</GanttViews>
<GanttDependenciesSettings>
<GanttDependencies Data="@Dependencies"
PredecessorIdField="PredecessorId"
SuccessorIdField="SuccessorId"
TypeField="Type">
</GanttDependencies>
</GanttDependenciesSettings>
<GanttColumns>
<GanttColumn Field="Id"
Visible="false">
</GanttColumn>
<GanttColumn Field="Title"
Expandable="true"
Width="160px"
Title="Task Title">
</GanttColumn>
<GanttColumn Field="PercentComplete"
Width="100px">
</GanttColumn>
<GanttColumn Field="Start"
Width="100px"
TextAlign="@ColumnTextAlign.Right">
</GanttColumn>
<GanttColumn Field="End"
DisplayFormat="End: {0:d}"
Width="100px">
</GanttColumn>
<GanttCommandColumn>
<GanttCommandButton Command="Add" Icon="@SvgIcon.Plus"></GanttCommandButton>
<GanttCommandButton Command="Delete" Icon="@SvgIcon.Trash"></GanttCommandButton>
</GanttCommandColumn>
</GanttColumns>
</TelerikGantt>
@code {
public enum DependencyTypes
{
FinishFinish,
FinishStart,
StartStart,
StartFinish
};
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
class FlatModel
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public double PercentComplete { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
}
class DependencyModel
{
public int Id { get; set; }
public int PredecessorId { get; set; }
public int SuccessorId { get; set; }
public DependencyTypes Type { get; set; }
}
public int LastId { get; set; } = 1;
public int LastDependencyId { get; set; } = 1;
List<FlatModel> Data { get; set; }
List<DependencyModel> Dependencies { get; set; } = new List<DependencyModel>();
protected override void OnInitialized()
{
Data = new List<FlatModel>();
for (int i = 1; i < 6; i++)
{
var newItem = new FlatModel()
{
Id = LastId,
Title = "Employee " + i.ToString(),
Start = new DateTime(2020, 12, 6 + i),
End = new DateTime(2020, 12, 11 + i),
PercentComplete = i * 0.125
};
Data.Add(newItem);
var parentId = LastId;
LastId++;
for (int j = 0; j < 5; j++)
{
Data.Add(new FlatModel()
{
Id = LastId,
ParentId = parentId,
Title = " Employee " + i + " : " + j.ToString(),
Start = new DateTime(2020, 12, 6 + i + j),
End = new DateTime(2020, 12, 7 + i + j),
PercentComplete = j * 0.225
});
LastId++;
}
}
Dependencies.Add(new DependencyModel()
{
Id = LastDependencyId++,
PredecessorId = 3,
SuccessorId = 4,
Type = DependencyTypes.FinishFinish
});
Dependencies.Add(new DependencyModel()
{
Id = LastDependencyId++,
PredecessorId = 2,
SuccessorId = 5,
Type = DependencyTypes.StartFinish
});
base.OnInitialized();
}
}
````

2
components/gantt/gantt-tree/editing/popup.md
Просмотреть файл

@ -49,7 +49,7 @@ The `GanttDependencyDescriptor` exposes four fields that describe the mutated de
|----------|----------|----------|
| `PredecessorId` | `object` | The Id of the predecessor of the mutated dependency. |
| `SuccessorId` | `object` | The Id of the successor of the mutated dependency. |
| `Type` | `int` | The [Type]({%slug gantt-dependencies-types%}) of the dependency. |
| `Type` | `GanttDependencyType` enum | The [type of the dependency]({%slug gantt-dependencies-databind%}). |
| `DataItem` | `object` | The model associated with this dependency. |
>caption The Command buttons and the Gantt events let you handle data operations in Popup edit mode.

3
components/textarea/overview.md
Просмотреть файл

@ -55,8 +55,7 @@ The Blazor TextArea provides various parameters to configure the component:
| ----------- | ----------- | ----------- |
| `AutoCapitalize` | `string` | A `string` that maps to the [`autocapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize) attribute of the HTML element. It's applicable only for touch devices and virtual keyboards. |
| `AutoComplete` | `bool` | Maps to the autocomplete attribute of the HTML `<textarea>`. |
| `AutoSize` <br /> (deprecated) | `bool` | Specifies if the TextArea will adjust its height based on the user input. You can [use CSS to limit the resizing up to a max height]({%slug textarea-kb-autosize-max-height%}). This parameter is deprecated. Use `ResizeMode` with `Auto` value instead. |
| `ResizeMode` | `TextAreaResizeMode?` | Specifies the TextArea's resize behavior. Default behavior is the one set by the browser. |
| `ResizeMode` | `TextAreaResizeMode?` | Specifies the TextArea's resize behavior. The default behavior is the one set by the browser. You can also [use CSS to limit the resizing up to a max height]({%slug textarea-kb-autosize-max-height%}). |
| `Class` | `string` | The custom CSS class to be rendered on the `<span class="k-textarea">` element. |
| `Cols` | `int?` | Maps to the `cols` attribute of the HTML `<textarea>` element. Do not use together with `Width`.
| `DebounceDelay` | `int` | Specifies the time in milliseconds between the last typed symbol and the updating of the value. The default value is 150ms. |

2
knowledge-base/radiogroup-like-buttongroup.md
Просмотреть файл

@ -31,7 +31,7 @@ Use custom CSS to make the radio inputs invisible and style their labels to look
The RadioGroup will look similar to a [ButtonGroup with single selection]({%slug buttongroup-selection%}#single-selection). The major difference is that the RadioGroup has a single value of type `<T>`, while each button in the ButtonGroup is bound to a separate `boolean` value for its selected state.
>tip The following example is for versions 6.0 and above, which feature an [updated HTML rendering for the RadioGroup]({%slug changes-in-6-0-0%}#radiogroup). If you are using an older version, use the [alternative CSS code from the section below](#solution-up-to-version-511).
>tip The following example is for versions 6.0 and later, which feature an [updated HTML rendering for the RadioGroup]({%slug rendering-changes-in-6-0-0%}#radiogroup). If you are using an older version, use the [alternative CSS code from the section below](#solution-up-to-version-511).
>caption Style the RadioGroup like a ButtonGroup

3
knowledge-base/textarea-autosize-max-height.md
Просмотреть файл

@ -41,7 +41,7 @@ This KB article answers the following questions:
````CSHTML
<TelerikTextArea @bind-Value="@TextValue"
Width="500px"
AutoSize="true"
ResizeMode="TextAreaResizeMode.Auto"
Class="max-height-200" />
<style>
@ -56,6 +56,7 @@ This KB article answers the following questions:
}
````
> Use `AutoSize="true"` instead of `ResizeMode="TextAreaResizeMode.Auto"` with Telerik UI for Blazor versions `6.x` and earlier.
## See Also

5
system-requirements.md
Просмотреть файл

@ -21,6 +21,7 @@ The latest version of Telerik UI for Blazor (currently {{site.uiForBlazorLatestV
* `net6.0`
* `net7.0`
* `net8.0`
* `net9.0`
Razor Class Libraries may target `netstandard2.0` by default, so you need to update that.
@ -36,6 +37,7 @@ A **supported .NET version** is one that is [officially supported by Microsoft](
| .NET version | First UI for Blazor Version | Last UI for Blazor Version |
| --- | --- | --- |
| .NET 9 | 7.0.0 | {{site.uiForBlazorLatestVersion}} (current official) |
| .NET 8 | 5.0.0 | {{site.uiForBlazorLatestVersion}} (current official) |
| .NET 6 | 2.29.0 | {{site.uiForBlazorLatestVersion}} (current official) |
@ -47,8 +49,7 @@ A **compatible .NET version** is one that is no longer (or not yet) officially s
| .NET version | First UI for Blazor Version | Last UI for Blazor Version |
| --- | --- | --- |
| .NET 9 Preview | 6.0.0 | {{site.uiForBlazorLatestVersion}} (current official) |
| .NET 7 | 3.7.0 | {{site.uiForBlazorLatestVersion}} (current official) |
| .NET 7 | 3.7.0 | 6.2.0 |
| .NET 5 | 2.19.0 | 4.6.0 |
| .NET Core 3.1 | 2.5.0 | 4.6.0 |

2
upgrade/breaking-changes/2-0-0.md
Просмотреть файл

@ -3,7 +3,7 @@ title: 2.0.0
description: Handle the changes in the 2.0.0 major release of the Telerik UI for Blazor components.
page_title: Breaking Changes in 2.0.0
slug: changes-in-2-0-0
position: 1
position: 1000
---
# Breaking Changes in 2.0.0

2
upgrade/breaking-changes/2-2-0.md
Просмотреть файл

@ -3,7 +3,7 @@ title: 2.2.0
description: Handle the changes in the 2.2.0 release of the Telerik UI for Blazor components.
page_title: Breaking Changes in 2.2.0
slug: changes-in-2-2-0
position: 1
position: 995
---
# Breaking Changes in 2.2.0

2
upgrade/breaking-changes/3-0-0.md
Просмотреть файл

@ -3,7 +3,7 @@ title: 3.0.0
description: Handle the changes in the 3.0.0 release of the Telerik UI for Blazor components.
page_title: Breaking Changes in 3.0.0
slug: changes-in-3-0-0
position: 1
position: 990
---
# Breaking Changes in 3.0.0

2
upgrade/breaking-changes/4-0-0.md
Просмотреть файл

@ -3,7 +3,7 @@ title: 4.0.0
description: Handle the changes in the 4.0.0 release of the Telerik UI for Blazor components.
page_title: Breaking Changes in 4.0.0
slug: changes-in-4-0-0
position: 1
position: 985
---
# Breaking Changes in 4.0.0

2
upgrade/breaking-changes/5-0-0.md
Просмотреть файл

@ -3,7 +3,7 @@ title: 5.0.0
description: Handle the changes in the 5.0.0 release of the Telerik UI for Blazor components.
page_title: Breaking Changes in 5.0.0
slug: changes-in-5-0-0
position: 1
position: 980
---
# Breaking Changes in 5.0.0

24
upgrade/breaking-changes/6-0-0.md Normal file
Просмотреть файл

@ -0,0 +1,24 @@
---
title: 6.0.0
description: Handle the changes in the 6.0.0 release of the Telerik UI for Blazor components.
page_title: Breaking Changes in 6.0.0
slug: changes-in-6-0-0
position: 975
---
# Breaking Changes in 6.0.0
This article outlines the breaking changes in Telerik UI for Blazor version 6.0.0.
## Themes
The theme color variable names have changed. This is relevant only to Blazor applications that:
* [Use Telerik themes that are built from the source code]({%slug themes-customize%}#building-themes-from-source-code).
* [Override theme variable values]({%slug themes-customize%}#setting-theme-variables).
See the <a href="https://www.telerik.com/design-system/docs/themes/theme-default/migration/" target="_blank">Design System Migration Article</a>.
## See Also
* [Rendering changes in Telerik UI for Blazor 6.0.0]({%slug rendering-changes-in-6-0-0%})

64
upgrade/breaking-changes/7-0-0.md Normal file
Просмотреть файл

@ -0,0 +1,64 @@
---
title: 7.0.0
description: Handle the changes in the 7.0.0 release of the Telerik UI for Blazor components.
page_title: Breaking Changes in 7.0.0
slug: changes-in-7-0-0
position: 970
---
# Breaking Changes in 7.0.0
This article outlines the breaking changes in Telerik UI for Blazor version 7.0.0.
## Common
### .NET Support
[.NET 7 is no longer supported]({%slug system-requirements%}).
### AutoComplete, ComboBox, MultiColumnComboBox, MultiSelect
The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.
## DateRangePicker
* The [`ShowOtherMonthDays` parameter's default value]({%slug daterangepicker-overview%}#daterangepicker-parameters) is changed to `false`.
## DropDownButton
* The [`ShowArrowButton` parameter's default value]({%slug dropdownbutton-overview%}#dropdownbutton-parameters) is changed to `false`.
## FileSelect
* The obsolete method `OpenFileSelectAsync()` is removed. [Use `OpenSelectFilesDialog()`]({%slug fileselect-overview%}#fileselect-reference-and-methods) instead.
## Gantt
* The [`Type` property of `GanttDependencyCreateEventArgs`]({%slug gantt-dependencies-editing%}) changes from `int` to [`GanttDependencyType` enum](/blazor-ui/api/telerik.blazor.ganttdependencytype).
* The [dependency model class of the Gantt]({%slug gantt-dependencies-databind%}) must use the `GanttDependencyType` enum for its `TypeField` property.
## Grid
* Columns with `Visible="false"` are editable by default in popup edit mode. To [disable editing of a hidden column, set `Editable="false"`]({%slug components/grid/editing/popup%}) explicitly.
* The obsolete `AutoFitColumn()` method is removed. [Use `AutoFitColumnAsync()`]({%slug components/grid/columns/resize%}#autofit-columns) instead.
* The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumnsAsync()` instead.
* The obsolete `AutoFitAllColumns()` method is removed. Use `AutoFitAllColumnsAsync()` instead.
## TextArea
* The obsolete parameter `AutoSize` is removed. Use [`ResizeMode="TextAreaResizeMode.Auto"`]({%slug textarea-overview%}#textarea-parameters) instead of `AutoSize="true"`.
## TreeList
* Columns with `Visible="false"` are editable by default in popup edit mode. To [disable editing of a hidden column, set `Editable="false"`]({%slug treelist-editing-popup%}) explicitly.
* The obsolete `AutoFitColumn()` method is removed. [Use `AutoFitColumnAsync()`]({%slug treelist-columns-resize%}#autofit-columns) instead.
* The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumnsAsync()` instead.
* The obsolete `AutoFitAllColumns()` method is removed. Use `AutoFitAllColumnsAsync()` instead.
## Upload
* The obsolete method `OpenFileSelectAsync()` is removed. [Use `OpenSelectFilesDialog()`]({%slug upload-overview%}#upload-reference-and-methods) instead.
## See Also
* [Rendering changes in Telerik UI for Blazor 7.0.0]({%slug rendering-changes-in-7-0-0%})

2
upgrade/breaking-changes/list.md
Просмотреть файл

@ -11,6 +11,8 @@ position: 0
This article lists the releases of the Telerik UI for Blazor product that introduce breaking changes. You may want to go through it when [upgrading]({%slug upgrade-tutorial%}) to see whether you are affected.
* [7.0.0]({%slug changes-in-7-0-0%})
* [6.0.0]({%slug changes-in-6-0-0%})
* [5.0.0]({%slug changes-in-5-0-0%})
* [4.0.0]({%slug changes-in-4-0-0%})
* [3.0.0]({%slug changes-in-3-0-0%})

2
upgrade/rendering-changes/3-4-0.md
Просмотреть файл

@ -2,7 +2,7 @@
title: 3.4.0
description: Handle the rendering changes in the 3.4.0 release of the Telerik UI for Blazor components.
page_title: Rendering Changes in the 3.4.0 Release
slug: changes-in-3-4-0
slug: rendering-changes-in-3-4-0
position: 1000
---

2
upgrade/rendering-changes/3-6-0.md
Просмотреть файл

@ -2,7 +2,7 @@
title: 3.6.0
description: Handle the rendering changes in the 3.6.0 release of the Telerik UI for Blazor components.
page_title: Rendering Changes in the 3.6.0 Release
slug: changes-in-3-6-0
slug: rendering-changes-in-3-6-0
position: 995
---

2
upgrade/rendering-changes/4-3-0.md
Просмотреть файл

@ -2,7 +2,7 @@
title: 4.3.0
description: Handle the rendering changes in the 4.3.0 release of the Telerik UI for Blazor components.
page_title: Rendering Changes in the 4.3.0 Release
slug: changes-in-4-3-0
slug: rendering-changes-in-4-3-0
position: 985
---

2
upgrade/rendering-changes/4-6-0.md
Просмотреть файл

@ -2,7 +2,7 @@
title: 4.6.0
description: Handle the rendering changes in the 4.6.0 release of the Telerik UI for Blazor components.
page_title: Rendering Changes in the 4.6.0 Release
slug: changes-in-4-6-0
slug: rendering-changes-in-4-6-0
position: 980
---

2
upgrade/rendering-changes/6-0-0.md
Просмотреть файл

@ -2,7 +2,7 @@
title: 6.0.0
description: Handle the rendering changes in the 6.0.0 release of the Telerik UI for Blazor components.
page_title: Rendering Changes in the 6.0.0 Release
slug: changes-in-6-0-0
slug: rendering-changes-in-6-0-0
position: 975
---

8
upgrade/rendering-changes/7-0-0.md
Просмотреть файл

@ -2,7 +2,7 @@
title: 7.0.0
description: Handle the rendering changes in the 7.0.0 release of the Telerik UI for Blazor components.
page_title: Rendering Changes in the 7.0.0 Release
slug: changes-in-7-0-0
slug: rendering-changes-in-7-0-0
position: 970
---
@ -11,6 +11,7 @@ position: 970
* [AIPrompt](#aiprompt)
* [Gantt](#gantt)
* [Menu](#menu)
* [PanelBar](#panelbar)
* [PDFViewer](#pdfviewer)
* [Signature](#signature)
* [TabStrip](#tabstrip)
@ -36,6 +37,10 @@ position: 970
1. The menu item elements (`<span class="k-link">`) no longer include the `k-in` class.
2. The `<ul class="k-menu-group">` element no longer includes the `k-reset` and `k-group` classes.
## PanelBar
The `id` attribute of each PanelBar item (`<li class="k-panelbar-item">`) is changed from `tree-item-A_B_C_...` to `tree-item-Z`, where `A`, `B`, and `C` were the parent item's indexes, and `Z` is the current item's index within its own group and hierarchy level.
## PDFViewer
The `Open`, `Download` and `Print` tools have been moved to a submenu toggled on click of a hamburger menu on the leftmost side of the Toolbar.
@ -62,3 +67,4 @@ The `Open`, `Download` and `Print` tools have been moved to a submenu toggled on
## See Also
* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices)
* [Breaking changes in Telerik UI for Blazor 7.0.0]({%slug changes-in-7-0-0%})

14
upgrade/rendering-changes/list.md
Просмотреть файл

@ -10,13 +10,13 @@ position: 0
As the Telerik UI for Blazor matures we will continuously optimize the HTML rendering and the usage of CSS classes. The rendering changes only affect the styling of the components if the application [overrides the built-in CSS styles]({%slug themes-override%}) or uses an outdated [custom theme]({%slug themes-customize%}). This article tracks the product versions with rendering changes.
* [7.0.0]({%slug changes-in-7-0-0%})
* [6.0.0]({%slug changes-in-6-0-0%})
* [4.6.0]({%slug changes-in-4-6-0%})
* [4.3.0]({%slug changes-in-4-3-0%})
* [4.0.0]({%slug changes-in-4-0-0%})
* [3.6.0]({%slug changes-in-3-6-0%})
* [3.4.0]({%slug changes-in-3-4-0%})
* [7.0.0]({%slug rendering-changes-in-7-0-0%})
* [6.0.0]({%slug rendering-changes-in-6-0-0%})
* [4.6.0]({%slug rendering-changes-in-4-6-0%})
* [4.3.0]({%slug rendering-changes-in-4-3-0%})
* [4.0.0]({%slug rendering-changes-in-4-0-0%})
* [3.6.0]({%slug rendering-changes-in-3-6-0%})
* [3.4.0]({%slug rendering-changes-in-3-4-0%})
## Good Styling Practices