[3.2] docs(gantt): Revamped Overview and Gantt Splitter position para… (#880)

* [3.2] docs(gantt): Revamped Overview and Gantt Splitter position parameter added

* add auto table layout

* add auto table layout 2

* docs(gantt):fixes as per latest comments

Co-authored-by: Dimo Dimov <[email protected]>

Author: xristianstefanov

components/gantt/dependencies/databind.md

@@ -14,13 +14,14 @@ To bind a collection of dependencies to the Gantt Chart you should use the `Data
 
 ## Gantt Dependencies Features:
 
-* `Data` - `IEnumerable<Object>` - you can pass the collection of dependencies you would like to see rendered to the Data parameter.
-
-* `IdField` - `string` - Unique identifier for each task. You can use it for editing and hierarchy.
-
-* `PredecessorField` - `string` - Points to the predecessor task. 
-
-* `SuccessorField` - `string` - Points to the successor task.
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Feature | Type | Description |
+| --- | --- | --- |
+| `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. |
 
 >note To use the Data Binding for the Gantt Dependencies you must provide all data binding features listed above.
 

components/gantt/dependencies/overview.md

@@ -21,9 +21,8 @@ The Telerik Gantt for Blazor allows you define dependencies, which are rendered
 
 ## Gantt Dependencies Features:
 
-* Data Binding - You can provide a collection of dependencies to the Gantt Chart for Blazor. For more information read the [Data Binding]({%slug gantt-dependencies-databind%}) article.
-
-* `TypeField` - `string` - Defines the dependency type. For more information read the [Types]({%slug gantt-dependencies-types%}) article. 
-
-* `Editing` - You can allow the user edit the dependencies. For more information read the [Editing]({%slug gantt-dependencies-editing%}) article.
+@[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.

components/gantt/events.md

@@ -23,6 +23,9 @@ The `OnEdit` event lets you respond to user actions when they want to edit an it
 
 You can read more about the CUD events in the [Gantt Tree Editing Overview]({%slug gantt-tree-editing%}) article.
 
+## TreeListWidthChanged
+
+The `TreeListWidthChanged` event fires as a response to the user changing the width of the TreeList pane in the splitter.
 
 ## OnExpand and OnCollapse
 

components/gantt/gantt-tree/columns/bound.md

@@ -127,22 +127,30 @@ You can read more details on how to tie the Gantt to your data fields and child
 
 ## Gantt Bound Column Parameters
 
-You can use the following properties on bound columns:
+The Blazor Gantt Bound Column provides various parameters to configure the component. Also check the [Gantt public API](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikGantt-1).
 
 ### Data Binding
 
-* `Expandable` - (defaults to `false`) - when set to true, the column shows an expand/collapse arrow in front of the value and denotes hierarchy be intending it. You should set this to at least one column of your treelist to showcase the hierarchical nature of the data.
-* `Field` - (defaults to `null`) - the name of the field in the data source that the column will render as a string (case-sensitive). You can set its as a plain string (`Field="SomeField"`) or to have .NET extract the field name from the model for flat models (`Field=@nameof(MyModelClass.SomeFIeld)`).
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `Expandable` | `bool` | When set to true, the column shows an expand/collapse arrow in front of the value and denotes hierarchy be intending it. Set this to at least one column of your treelist to showcase the hierarchical nature of the data. |
+| `Field` | `string` | The name of the field in the data source that the column will render as a string (case-sensitive). Set its as a plain string (`Field="SomeField"`) or to have .NET extract the field name from the model for flat models (`Field=@nameof(MyModelClass.SomeFIeld)`). |
 
 ### Appearance
 
-* `Title` - the text that is rendered in the column header. See the Notes below for its behavior.
-* `DisplayFormat` - the C# format string that is used to render the field value in the cell when the grid is in display mode. Read more in the [Column Display Format]({%slug treelist-columns-displayformat%}) article.
-* `TextAlign` - specifies the horizontal alignment of the cell text. For example, you can use this property to right-align numeric columns. The property accepts `ColumnTextAlign` enum values (`Left`, `Right` or `Center`). If not set, the text alignment will depend on existing styles on the page, default browser behavior and the text direction.
-* `Width` -  (defaults to `null`) - the width of the column. See the [Dimensions]({%slug common-features/dimensions%}) article for information about the supported formats. See [Gantt Column Width Behavior]({%slug gantt-columns-width%}) for detailed information about the Gantt behavior with different column width configurations.
-* `MinResizableWidth` - (defaults to `30` and ignores smaller values) - the minimum allowed column width during [user resizing]({%slug gantt-columns-resize%}). Unlike the string `Width` property, this one is decimal and expects pixel values.
-* `MaxResizableWidth` - (defaults to `0`) - the maximum allowed column width during [user resizing]({%slug gantt-columns-resize%}). Unlike the string `Width` property, this one is decimal and expects pixel values.
-* `Visible` - (defaults to `null`) - if this parameter is set to `false` it hides the column from the Gantt Tree. Accepts both `bool` and `bool?` types, and `null` is treated like `true`.
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type and Default Value | Description |
+| --- | --- | --- |
+| `Title` | `string` | The text that is rendered in the column header. See the Notes below for its behavior. |
+| `DisplayFormat` | `string` | The C# format string that is used to render the field value in the cell when the grid is in display mode. Read more in the [Column Display Format]({%slug treelist-columns-displayformat%}) article. |
+| `TextAlign` | `ColumnTextAlign` enum <br /> (`Left`) | Specifies the horizontal alignment of the cell text. |
+| `Width` | `string` | The width of the column. See the [Dimensions]({%slug common-features/dimensions%}) article for information about the supported formats. See [Gantt Column Width Behavior]({%slug gantt-columns-width%}) for detailed information about the Gantt behavior with different column width configurations. |
+| `MinResizableWidth` | `int` <br /> (`30`) | The minimum allowed column width during [user resizing]({%slug gantt-columns-resize%}). Unlike the string `Width` property, this one is decimal and expects pixel values. |
+| `MaxResizableWidth` | `int` | The maximum allowed column width during [user resizing]({%slug gantt-columns-resize%}). Unlike the string `Width` property, this one is decimal and expects pixel values. |
+| `Visible` | `bool?` <br /> (`null`) | If this parameter is set to `false`, it hides the column from the Gantt Tree. Accepts both `bool` and `bool?` types, and `null` is treated like `true`. |
 
 ## Notes
 

components/gantt/gantt-tree/columns/command.md

@@ -26,33 +26,44 @@ In this article:
 * [Code Example](#example)
 
 
-## Features
+## Command Column Parameters
 
-This section describes the available features and their use.
+The Blazor Gantt Command Column provides various parameters to configure the component. Also check the [Gantt public API](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikGantt-1).
 
 ### The GanttCommandButton Tag
 
-The `GanttCommandButton` tag offers the following features:
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
-* `Command` - the command that will be invoked. Can be one of the built-in commands (see below), or a custom command name.
-* `ShowInEdit` - a `boolean` property indicating whether the button is only visible while the user is editing/inserting data.
-* `ChildContent` - the text the button will render. You can also place it between the command button's opening and closing tags.
-* Appearance properties like `Icon`, `Class`, `Enabled` that are come from the underlying [Button Component features]({%slug components/button/overview%}).
+| Parameter | Description |
+| --- | --- |
+| `Command` | The command to invoke. Can be one of the built-in commands ([see below](#built-in-commands)), or a custom command name. |
+| `ShowInEdit` | Defines if the button is visible only when the user is editing or inserting data. |
+| `ChildContent` | The text of the button. You can also place it between the command button's opening and closing tags. |
+
+See also Appearance properties like `Icon`, `Class`, `Enabled` that are coming from the underlying [Button Component features]({%slug components/button/overview%}).
 
 ### Built-in Commands
 
-There are two built-in commands:
+Built-in commands:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
-* `Add` - initiates the creation of a new item. Can apply to rows as well, to create a child element for the current row.
-* `Delete` - initiates the deletion of an existing item.
+| Command | Description |
+| --- | --- |
+| `Add` | Initiates the creation of a new item. Can apply to rows as well, to create a child element for the current row. |
+| `Delete` | Initiates the deletion of an existing item. |
 
 ### OnClick handler
 
-The `OnClick` handler of the commands receives an argument of type `GanttTaskCommandEventArgs` that exposes the following properties:
+The `OnClick` handler of the commands receives an argument of type `GanttTaskCommandEventArgs` that exposes the following parameters:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
-* `IsCancelled` - set this to `true` to prevent the operation if the business logic requires it.
-* `Item` - the model item of the Gantt row. You can use it to access the model fields and perform the actual data source operations. This property is applicable only for command buttons that are inside a Gantt row, not the toolbar.
-* `IsNew` - a boolean field indicating whether the item was just added through the Gantt interface.
+| Parameter | Description |
+| --- | --- |
+| `IsCancelled` | Set this to `true` to prevent the operation if the business logic requires it. |
+| `Item` | The model item of the Gantt row. Use it to access the model fields and perform the actual data source operations. This property is applicable only for command buttons that are inside a Gantt row, not the toolbar. |
+| `IsNew` | A boolean field indicating whether the item was just added through the Gantt interface. |
 
 >tip For handling CRUD operations we recommend that you use the Gantt events (`OnEdit`, `OnUpdate`, `OnCancel`, `OnCreate`). The `OnClick` handler is available for the built-in commands to provide consistency of the API.
 

components/gantt/gantt-tree/data-binding/overview.md

@@ -27,19 +27,20 @@ There are two modes of providing data to a Gantt Tree, and they all use the item
 
 ## Gantt Tree Item Features
 
-The Gantt Tree items provide the following features that you can control through the corresponding fields in their data binding:
+The Blazor Gantt Tree provides various parameters to configure its items. Also check the [Gantt public API](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikGantt-1).
 
-* `Items` - the collection of child items that will be rendered under the current item. Required only when binding to hierarchical data.
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
-* `Id` - a unique identifier for the item. Required only for binding to flat data.
-
-* `ParentId` - identifies the parent to whom the item belongs. Required only when binding to flat data. All items with the same `ParentId` will be rendered at the same level. For a root level item, `ParentId` must be `null`. There must be at least one node with a `null` value for the `ParentId`.
-
-* `HasChildren` - whether the item has children. Determines whether an expand arrow is rendered next to the item in an Expandable column. Required for loading data on-demand - if you don't set it to `true`, there will be no expand arrow and so there will be no way for the user to expand the item and load its children. With hierarchical data, the Gantt Tree will render the icon based on the existence of child items, but `HasChildren` will take precedence. You do not have to set or use its field unless you want to load data on demand, or override the arrow for some items.
+| Parameter | Description |
+| --- | --- |
+| `Items` | The collection of child items that will be rendered under the current item. Required only when binding to hierarchical data. |
+| `Id` | A unique identifier for the item. Required only for binding to flat data. |
+| `ParentId` | Identifies the parent to whom the item belongs. Required only when binding to flat data. All items with the same `ParentId` will be rendered at the same level. For a root level item, `ParentId` needs to be `null`. There needs to be at least one node with a `null` value for the `ParentId`. |
+| `HasChildren` | Whether the item has children. Determines whether an expand arrow is rendered next to the item in an Expandable column. Required for loading data on-demand - if you don't set it to `true`, there will be no expand arrow and so there will be no way for the user to expand the item and load its children. With hierarchical data, the Gantt Tree will render the icon based on the existence of child items, but `HasChildren` will take precedence. You do not have to set or use its field unless you want to load data on demand, or override the arrow for some items. |
 
 ## Data Bindings
 
-The properties of a Gantt Tree item match directly to a field of the model the treelist is bound to. You provide that relationship by providing the name of the field from which the corresponding information is to be taken. To do this, in the main `TelerikGantt` tag, use the parameters described below:
+The properties of a Gantt Tree item match directly to a field of the model the treelist is bound to. Provide that relationship by providing the name of the field from which the corresponding information is to be taken. To do this, in the main `TelerikGantt` tag, use the parameters described below:
 
 * IdField => Id
 * ParentIdField => ParentId

components/gantt/gantt-tree/overview.md

@@ -10,15 +10,15 @@ position: 0
 
 # Gantt Tree
 
-The Gantt Tree is the left part of the [Gantt Chart]({%slug gantt-overview%}). You can provide data to the component through its [data binding]({%slug gantt-data-binding-overview%}) options. You can also use the [filtering]({%slug gantt-filtering-overview%}), [sorting]({%slug gantt-sorting%}), and [editing]({%slug gantt-tree-editing%}) capabilities of the Telerik Gantt for Blazor.
+The Gantt Tree is the left part of the [Gantt Chart]({%slug gantt-overview%}). The component exposes `TreeListWidth` (string, default `30`) parameter for changing the width of the TreeList pane in the splitter. 
 
-## List of available features for the Gantt Tree
-
-* `Gantt Columns` - The main building blocks of the Gantt Tree. They are used to render data in the component. You can read more information in the [Bound Column]({%slug gantt-columns-bound%}) article.
+Set data to the component through its [data binding]({%slug gantt-data-binding-overview%}) options. You can also use the [filtering]({%slug gantt-filtering-overview%}), [sorting]({%slug gantt-sorting%}), and [editing]({%slug gantt-tree-editing%}) capabilities of the Telerik Gantt for Blazor.
 
-* `Editing` - Allows you to create new records, update the existing or deleting them. You can read more on this topic in the [Editing]({%slug gantt-tree-editing%}) article.
-
-* `Filtering` - the Gantt can filter data automatically. You can read more about this feature in the [Filtering]({%slug gantt-filtering-overview%}) article.
+## List of available features for the Gantt Tree
 
-* `Sorting` - Allows you to sort the data in ascending and descending order. You can read more about this feature in the [Sorting]({%slug gantt-sorting%}) article.
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
+* `Gantt Columns` - The main building blocks of the Gantt Tree. They are used to render data in the component. Read more information in the [Bound Column]({%slug gantt-columns-bound%}) article.
+* `Editing` - Allows you to create new records, update the existing or deleting them. Read more on this topic in the [Editing]({%slug gantt-tree-editing%}) article.
+* `Filtering` - The Gantt can filter data automatically. Read more about this feature in the [Filtering]({%slug gantt-filtering-overview%}) article.
+* `Sorting` - Allows you to sort the data in ascending and descending order. Read more about this feature in the [Sorting]({%slug gantt-sorting%}) article.