From 256cc4469c4d0b74b89bac2d9d23b1d85babac49 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 Date: Tue, 7 Oct 2025 14:00:03 +0530 Subject: [PATCH 1/3] 983303: Updated Kanban documentation --- blazor/kanban/accessibility.md | 12 ++-- blazor/kanban/cards.md | 14 ++-- blazor/kanban/columns.md | 20 +++--- blazor/kanban/data-binding.md | 45 ++++++------- blazor/kanban/dialog.md | 66 +++++++++---------- blazor/kanban/dimensions.md | 20 ++++-- blazor/kanban/drag-and-drop.md | 16 ++--- blazor/kanban/events.md | 56 ++++++++-------- blazor/kanban/getting-started-with-web-app.md | 10 +-- blazor/kanban/getting-started.md | 14 ++-- blazor/kanban/localization.md | 13 ++-- blazor/kanban/responsive-mode.md | 25 ++++--- blazor/kanban/sort.md | 14 ++-- blazor/kanban/style.md | 4 +- blazor/kanban/swimlane.md | 30 ++++----- blazor/kanban/tooltip.md | 8 +-- blazor/kanban/validation.md | 12 ++-- blazor/kanban/workflow.md | 8 +-- 18 files changed, 206 insertions(+), 181 deletions(-) diff --git a/blazor/kanban/accessibility.md b/blazor/kanban/accessibility.md index 5c2abe2040..d0d3f186fe 100644 --- a/blazor/kanban/accessibility.md +++ b/blazor/kanban/accessibility.md @@ -9,11 +9,11 @@ documentation: ug # Accessibility in Blazor Kanban Component -The [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component has been designed, keeping in mind the WAI-ARIA specifications, and applies the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) roles, states, and properties. This component is characterized by complete `WAI-ARIA` accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation. +The [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component is built in accordance with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications, incorporating appropriate roles, states, and properties. It offers full accessibility support for users relying on assistive technologies (AT) or keyboard navigation. -The Blazor Kanban component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +It adheres to key accessibility standards including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) , ensuring inclusive design and usability. -The accessibility compliance for the Blazor Kanban component is outlined below. +The following table summarizes the accessibility compliance of the Blazor Kanban component: | Accessibility Criteria | Compatibility | | -- | -- | @@ -47,9 +47,9 @@ The Blazor Kanban component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/ | `aria-label` | It helps to provides information about elements in a kanban component for assistive technology. | | `aria-expanded` | Attributes indicate the state of a collapsible element. | | `aria-selected` | This attribute is assigned to the Kanban component for the selection of elements, and its default value is `false`. The value changes to true when the user selects a Kanban card. | -| `aria-grabbed` | Indicates whether the attribute is set to true. It has been selected for dragging. If this attribute is set to false, the element can be grabbed for a drag-and-drop operation but will not be currently grabbed. | +| `aria-grabbed` | Indicates whether a Kanban card is currently selected for dragging. If set to `true`, the card is actively grabbed; if `false`, it is available for selection but not currently grabbed. | | `aria-describedby` | This attribute contains the ID of the Kanban header column to indicate that the attribute establishes an association between the Kanban header column and the Kanban column body. | -| `aria-roledescription` | This attribute is assigned to the Kanban component and is used to provide alternative descriptions for card elements. | +| `aria-roledescription` | Provides a human-readable description of the Kanban card's role, enhancing clarity for assistive technologies. | ## Keyboard interaction @@ -76,7 +76,7 @@ The Blazor Kanban component followed the [keyboard interaction](https://www.w3.o ## Disable keyboard interaction -Disables all the functionalities in the Kanban board performed using keyboard by setting the `allowKeyboard` properties to `false`. +To disable all keyboard-based interactions in the Kanban board, set the `allowKeyboard` property to `false`. This may impact accessibility for users relying on keyboard navigation or assistive technologies. ## Ensuring accessibility diff --git a/blazor/kanban/cards.md b/blazor/kanban/cards.md index e65dc7627b..1058290d83 100644 --- a/blazor/kanban/cards.md +++ b/blazor/kanban/cards.md @@ -7,13 +7,13 @@ control: Kanban documentation: ug --- -# Cards in Blazor Kanban Component +# Working with Cards in Blazor Kanban Component The cards are main elements in the [Blazor Kanban Board](https://www.syncfusion.com/blazor-components/blazor-kanban-board), which represents the task information with header and content. The header and content of a card is fetched from the corresponding mapping fields. The card layout can be customized with template also. ## Header -The card header is achieved by mapping the `HeaderField` property, which is placed inside the `KanbanCardSettings` property. By default, the `ShowHeader` property is enabled by Kanban board that is used to show the header at the top of the card. +The card header is achieved by mapping the `HeaderField` property, which is placed inside the `KanbanCardSettings` property. By default, the `ShowHeader` property is enabled by Kanban board that is used to display the header at the top of the card. N> The `HeaderField` property must be a unique datasource value to avoid the duplication of card data. @@ -148,7 +148,7 @@ N> The mapped datasource key value contains single or multiple tags. If it is mu ![Blazor Kanban Card with Tags](./images/blazor-kanban-card-tags.png) -## Left border color +## Customizing left border color Kanban card supports to custom the left border color for all the cards. This can be achieved by mapping the data key value to the `GrabberField` property, which is placed inside the `KanbanCardSettings` property. The mapped data key value will be directly assigned to each card element border left color property. @@ -213,7 +213,7 @@ N> By default, the card border left color width is `3px`. ![Customizing Left Border Color in Blazor Kanban Card](./images/blazor-kanban-card-with-custom-border-color.png) -## Custom class +## Rendering custom footer elements The card allows to render the custom elements based on the given class names inside the `e-card-footer` element. It can be achieved by mapping the data key to the `FooterCssField` property, which is placed inside the `KanbanCardSettings` property. It will help to create your own class name elements inside the `e-card-footer` element. The mapped datasource key value contains single or multiple class names. If it is multiple class names, each class name will be separated by a comma in the datasource. @@ -362,7 +362,7 @@ In the following demo, images and icons are rendered using the `FooterCssField` ![Blazor Kanban Card with Custom Elements](./images/blazor-kanban-card-with-custom-element.png) -## Template +## Customizing card layout with templates You can customize the default card layout using template as per your application needs. This can be achieved by template of the `KanbanCardSettings` property. @@ -476,9 +476,9 @@ Kanban board allows to select single and multiple selection of cards when mouse * **Single**: Only one card allowed to select at a time in the Kanban board. * **Multiple**: Multiple cards are allowed to select in a board. -### Multiple Selection +### Enabling multiple card selection -Select the multiple cards randomly using Ctrl + mouse click and select the multiple cards continuously using Shift + mouse click action on Kanban board. Set `Multiple` in `SelectionType` to enable the multiple selection in a board. +Select multiple cards randomly using Ctrl + mouse click and select the multiple cards continuously using Shift + mouse click action on Kanban board. Set `SelectionType` to `Multiple` to enable multi-selection in a board. ```cshtml diff --git a/blazor/kanban/columns.md b/blazor/kanban/columns.md index 980fe604cb..9e3b61a904 100644 --- a/blazor/kanban/columns.md +++ b/blazor/kanban/columns.md @@ -7,15 +7,15 @@ control: Kanban documentation: ug --- -# Columns in Blazor Kanban Component +# Columns in Syncfusion Blazor Kanban Component -The **Kanban** columns represents each stage of the process. The column definitions are used as the **DataSource** schema in the Kanban. The Kanban operations such as drag-and-drop, swimlane, and toggle columns are performed based on column definitions. +The **Kanban** columns represent each stage of workflow process.Column definitions serve as the schema for the Kanban board's **DataSource**. The Operations such as drag-and-drop, swimlane grouping, and column toggling are driven by these column definitions. ## Single-key mapping -Kanban columns are categorized by mapping the **key** from the datasource using the `KeyField` property. The corresponding **value** in the datasource is mapped inside the columns `KeyField`. Based on this categorization, Kanban columns are split on this board. +Columns are categorized by mapping the `KeyField` property to specific key values in the data source. The corresponding **value** in the datasource is mapped inside the columns `KeyField`. This categorization determines how cards are distributed across columns on the Kanban board. -N> The `KeyField` property is mandatory to render the columns in the Kanban board. +N> The `KeyField` property is required to render columns on the Kanban board. ```cshtml @@ -79,7 +79,7 @@ N> The `KeyField` property is mandatory to render the columns in the Kanban boar ## Multi-key mapping -Kanban board allows to render a single column by mapping multiple keys using `KeyField` property. +The Kanban board supports rendering a single column with multiple key mappings using the `KeyField` property. ```cshtml @@ -143,13 +143,13 @@ Kanban board allows to render a single column by mapping multiple keys using `Ke ## Header text -You can provide the column header text of Kanban columns using the `HeaderText` property. If you have not specified any header text, it will render the header without any text. +Use the `HeaderText` property to define the display text for each Kanban column header. If no header text is specified, the column header will appear blank. ## Header template You can customize the column header with `Template` property as shown in the following code. -To get start quickly with Blazor Kanban component using Templates, you can check on this video. +To quickly get started with using templates in the Blazor Kanban component, watch the following video. {% youtube "youtube:https://www.youtube.com/watch?v=PjTgXuibei8" %} @@ -323,7 +323,7 @@ To get start quickly with Blazor Kanban component using Templates, you can check ## Toggle columns -Kanban allows to expand or collapse its columns using `AllowToggle` in `KanbanColumn`. When the property is enabled, it will render the expand or collapse icon to the column header. +Kanban columns can be expanded or collapsed by enabling the `AllowToggle` property in `KanbanColumn`. When enabled, an expand/collapse icon appears in the column header. N> By default, collapsed column width is set to `50px`. @@ -389,7 +389,7 @@ N> By default, collapsed column width is set to `50px`. ### Initially collapsed column -By default, all columns are on expanded state when loading the Kanban board initially. But, you can render the columns with collapsed state using the `IsExpanded` property. +By default, all columns are expanded when the Kanban board is initially rendered. To render a column in a collapsed state initially, use the `IsExpanded` property. N> The `IsExpanded` property only works when enabling the `AllowToggle` property on particular column. @@ -457,7 +457,7 @@ In the following example, the Backlog column is collapsed on initialization of K ## Stacked headers -Stacked headers are the additional headers to column header that will group the similar columns. Define the grouping of columns **Key** value to the `KeyField` property and provide the custom header text name to grouped columns using the `Text` property in `KanbanStackedHeaders`. +Stacked headers are additional header rows that group related columns under a common category. Group columns by specifying their key values in the `KeyFields` property and assign a custom header label using the `Text` property in `KanbanStackedHeaders`. In the following code, the kanban columns 'InProgress, Review' are grouped under 'Development Phase' category. diff --git a/blazor/kanban/data-binding.md b/blazor/kanban/data-binding.md index db18b1638b..87f4324ed5 100644 --- a/blazor/kanban/data-binding.md +++ b/blazor/kanban/data-binding.md @@ -7,7 +7,7 @@ control: Kanban documentation: ug --- -# Data Binding in Blazor Kanban Component +# Data Binding Overview in Blazor Kanban Component The Kanban uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports both RESTFUL JSON data service binding and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) property of Kanban can be assigned either with the instance of DataManager or a list of DataSource collection. @@ -16,9 +16,9 @@ It supports the following types of data binding: * Local data * Remote data -N> When using [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) as `IEnumerable`, component type(TValue) will be inferred from its value. When using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) for data binding, the TValue must be provided explicitly in the [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component. +N> **Note:** When using [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) as `IEnumerable`, component type(TValue) will be inferred from its value. When using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) for data binding, the TValue must be provided explicitly in the [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component. -## Local data +## Binding local data In list binding, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) property. The list data source can also be provided as an instance of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or by using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. @@ -60,13 +60,13 @@ In list binding, you can assign an IEnumerable object to the [DataSource](https: N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses BlazorAdaptor for list data-binding. -### ExpandoObject binding +### Binding with ExpandoObject -Kanban is a generic component that is strongly bound to a model type. In some cases, the model type may be unknown during compile time. In such cases, you can bind data to the Kanban as a list of ExpandoObject. +The Kanban component is strongly typed and bound to a model class. In some cases, the model type may be unknown during compile time. In such cases, you can bind data to the Kanban as a list of ExpandoObject. ExpandoObject can be bound to Kanban by assigning to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) property. Kanban can also perform all kinds of supported data operations and editing in ExpandoObject. -To get start quickly with Blazor Kanban component using ExpandoObject and DynamicObject binding, you can check on this video. +To get started quickly with Blazor Kanban component using ExpandoObject and DynamicObject binding, you can check on this video. {% youtube "youtube:https://www.youtube.com/watch?v=qkm_zPW3MSk" %} @@ -110,9 +110,9 @@ To get start quickly with Blazor Kanban component using ExpandoObject and Dynami ``` -![Expando object in Blazor Kanban](./images/blazor-kanban-expando-object.png) +![Expando object example in Blazor Kanban](./images/blazor-kanban-expando-object.png) -### DynamicObject binding +### Binding with DynamicObject DynamicObject can be bound to Kanban by assigning DynamicObject to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) property. Kanban can also perform all kinds of supported data operations and editing in DynamicObject. @@ -176,15 +176,15 @@ N> The [GetDynamicMemberNames](https://learn.microsoft.com/en-us/dotnet/api/syst ``` -![Dynamic object in Blazor Kanban](./images/blazor-kanban-dynamic-object.png) +![Dynamic object example in Blazor Kanban](./images/blazor-kanban-dynamic-object.png) -### Observable collection +### Binding with Observable Collection This [ObservableCollection](https://docs.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=netframework-4.8)(dynamic data collection) shows notifications when the items are added, removed, and moved. Implementing the [INotifyCollectionChanged](https://docs.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=netframework-4.8) will notify when there is any dynamic change (add, remove, move, and clear) in the collection. Implementing the [INotifyPropertyChanged](https://docs.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?view=netframework-4.8) will notify when the property value has been changed on the client side. Here, the Order class implements the interface of **INotifyPropertyChanged** and it raises the event when the Status property value was changed. -To get start quickly with Blazor Kanban component using Observable collection, you can check on this video. +To get started quickly with Blazor Kanban component using Observable collection, you can check on this video. {% youtube "youtube:https://www.youtube.com/watch?v=jfUzKzS093w" %} @@ -195,8 +195,9 @@ To get start quickly with Blazor Kanban component using Observable collection, y {% endhighlight %} -![Observable object binding in Blazor Kanban](./images/blazor-kanban-observable-object.png) -## Remote data +![ObservableCollection binding example in Blazor Kanban](./images/blazor-kanban-observable-object.png) + +## Binding Remote Data Bind the remote data services to Kanban component by assigning service data as an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) property or by using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. @@ -278,7 +279,7 @@ The ODataV4 is an improved version of OData protocols to retrieve and consume OD ``` -### Web API +### Binding with Web API You can use WebApiAdaptor to bind Kanban with Web API created using OData endpoint. @@ -316,7 +317,7 @@ You can use WebApiAdaptor to bind Kanban with Web API created using OData endpoi ``` -### Enable Data Manager after Initial Rendering +### Dynamically Enable Data Manager After Initial Render It is possible to render the data source in Kanban after initial rendering. This can be achieved by conditionally enabling the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component after Kanban rendering. @@ -370,10 +371,10 @@ The following sample code demonstrates enabling data manager condition in the Ka ``` **Before Button click** -![Dynamic data manager before button click in Blazor Kanban](./images/blazor-kanban-dynamic-before-data-manager.png) +![Kanban before enabling DataManager dynamically](./images/blazor-kanban-dynamic-before-data-manager.png) **After Button click** -![Dynamic data manager after button click in Blazor Kanban](./images/blazor-kanban-dynamic-after-data-manager.png) +![Kanban after enabling DataManager dynamically](./images/blazor-kanban-dynamic-after-data-manager.png) ### Sending additional parameters to the server @@ -423,7 +424,7 @@ The following sample code demonstrates sending additional parameters using the Q ``` -### Change Query parameter value dynamically +### Dynamically modify query parameters It is possible to dynamically modify Kanban [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_Query) property value. @@ -472,12 +473,12 @@ It is possible to dynamically modify Kanban [Query](https://help.syncfusion.com/ ``` **Before button Click** -![Dynamic query before button click in Blazor Kanban](./images/blazor-kanban-before-dynamic-query.png) +![Kanban before modifying query parameter dynamically](./images/blazor-kanban-before-dynamic-query.png) **After button Click** -![Dynamic query after button click in Blazor Kanban](./images/blazor-kanban-after-dynamic-query.png) +![Kanban after modifying query parameter dynamically](./images/blazor-kanban-after-dynamic-query.png) -### Using Custom Adaptor +### Binding with Custom Adaptor It is possible to create your own `CustomAdaptor` by extending the built-in available adaptors. @@ -603,4 +604,4 @@ In the following sample, Kanban fields are mapped with complex data binding. {% endhighlight %} -![Complex Data Binding in Blazor Kanban](./images/blazor-kanban-complex-data-binding.png) +![Complex data binding example in Blazor Kanban](./images/blazor-kanban-complex-data-binding.png) diff --git a/blazor/kanban/dialog.md b/blazor/kanban/dialog.md index 1b5469ebf7..88d598e55a 100644 --- a/blazor/kanban/dialog.md +++ b/blazor/kanban/dialog.md @@ -9,23 +9,23 @@ documentation: ug # Card Editing in Blazor Kanban Component -The [Blazor Kanban Board](https://www.syncfusion.com/blazor-components/blazor-kanban-board) provides built-in support to add, edit and delete a card using dialog module. User can edit a card using the following ways. +The [Blazor Kanban Board](https://www.syncfusion.com/blazor-components/blazor-kanban-board) provides built-in support to add, edit and delete a card using dialog module. Users can edit cards using the following methods: * Built-in dialog module * Dialog template -To get start quickly with Blazor Kanban Edit Dialog using Templates, you can check on this video. +To get started quickly with Blazor Kanban Edit Dialog using Templates, you can check on this video. {% youtube "youtube:https://www.youtube.com/watch?v=SgiECU-SZBk" %} -## Default Dialog +## Editing Cards Using the Default Dialog -When double-click on the cards, the dialog is opened with below fields to edit a card. This dialog contains `Delete`, `Save` and `Cancel` buttons. +When users double-click a card, the dialog is opened with below fields to edit a card. This dialog contains `Delete`, `Save` and `Cancel` buttons. -* To edit a card, modify the card details and click the `Save` button. -* To delete a card, click `Delete` button. -* Click on the `Cancel` button to cancel the editing action. +* To edit a card, update the card details and click the `Save` button. +* To delete a card, click the `Delete` button. +* Click the `Cancel` button to discard changes and close the dialog. The dialog displays with the following fields which mapped to dialog fields by default. @@ -94,11 +94,11 @@ KanbanSwimlaneSettings.KeyField (If applicable) | DropDown | - ``` -![Card Editing in Blazor Kanban](./images/blazor-kanban-card-editing.png) +![Editing a Card in Blazor Kanban](./images/blazor-kanban-card-editing.png) -## Custom Fields +## Customizing Dialog Fields -You can change the default fields of dialog using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanDialogSettingsField.html#Syncfusion_Blazor_Kanban_KanbanDialogSettingsField_Type) property inside the [KanbanDialogSettingsField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanDialogSettingsField.html#properties) property. The [Key](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanDialogSettingsField.html#Syncfusion_Blazor_Kanban_KanbanDialogSettingsField_Key) property is used to map the data source value and render the corresponding component based on the specified `Type` property. +You can customize the default dialog fields using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanDialogSettingsField.html#Syncfusion_Blazor_Kanban_KanbanDialogSettingsField_Type) property inside the [KanbanDialogSettingsField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanDialogSettingsField.html#properties) property. The [Key](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanDialogSettingsField.html#Syncfusion_Blazor_Kanban_KanbanDialogSettingsField_Key) property is used to map the data source value and render the corresponding component based on the specified `Type` property. The following types are available in dialog fields. @@ -107,7 +107,7 @@ The following types are available in dialog fields. * Numeric * TextArea -N> The above types can only be used once in the Custom dialog. The dialog template can be used to render many multiple drop-down lists within a dialog. +N> Each of the above types can be used once per custom dialog. The dialog template can be used to render many multiple drop-down lists within a dialog. ```cshtml @using Syncfusion.Blazor.Kanban @@ -151,11 +151,11 @@ N> The above types can only be used once in the Custom dialog. The dialog templa } ``` -![Card Editing Custom fields dialog in Blazor Kanban](./images/blazor-kanban-dialog-custom-fields.png) +![Custom Fields in Kanban Card Editing Dialog](./images/blazor-kanban-dialog-custom-fields.png) -## Dialog Template +## Creating a Custom Dialog Template -Using the dialog template, you can render your own form fields with dialog by using the `Template`. +Using the dialog template, you can render your own form fields with dialog by using the `Template` property. ```cshtml @@ -300,11 +300,11 @@ Using the dialog template, you can render your own form fields with dialog by us ``` -![Blazor Kanban with Dialog Template](./images/blazor-kanban-dialog-template.png) +![Customized Dialog Template in Blazor Kanban](./images/blazor-kanban-dialog-template.png) -## Prevent Dialog +## Preventing the Dialog from Opening -The Kanban allows to prevent to open a dialog on card double-click by enabling `args.Cancel` in `DialogOpen` event. +The Kanban component allows preventing the dialog from opening on card double-click by enabling `args.Cancel` in [DialogOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.DialogOpenEventArgs-1.html) event. ```cshtml @@ -374,18 +374,18 @@ The Kanban allows to prevent to open a dialog on card double-click by enabling ` The modified card data can be persisted in the database using the RESTful web services. All the CRUD operations in the Kanban are done through SfDataManager. The SfDataManager has an option to bind all the CRUD related data on the server-side. -The following section covers how to get the edited data details on the server-side using the [UrlAdaptor](../../data/adaptors#url-adaptor). +The following section explains how to retrieve edited card data on the server-side using the [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor). -### URL adaptor +### Using URL Adaptor for Server-Side CRUD Operations -You can use the [UrlAdaptor](../../data/adaptors#url-adaptor) of `SfDataManager` when binding data source for remote data. During the initial load of Kanban, data are fetched from remote data and bound to the Kanban using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of `SfDataManager`. +Use the [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) of `SfDataManager` when binding data source for remote data. During the initial load of Kanban, data are fetched from remote data and bound to the Kanban using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of `SfDataManager`. CRUD operations in Kanban can be mapped to server-side controller actions by using the properties [InsertUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_InsertUrl), [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_RemoveUrl), [UpdateUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_UpdateUrl), and [CrudUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_CrudUrl). -* `InsertUrl` – You can perform a single insertion operation on the server-side. -* `UpdateUrl` – You can update single data on the server-side. -* `RemoveUrl` – You can remove single data on the server-side. -* `CrudUrl` – You can perform bulk data operation on the server-side. +* `InsertUrl` – Performs a single insertion operation on the server-side. +* `UpdateUrl` – Updates a single record on the server-side. +* `RemoveUrl` – Removes a single record on the server-side. +* `CrudUrl` – Performs bulk data operations on the server-side. ```cshtml @using Syncfusion.Blazor.Data @@ -469,7 +469,7 @@ namespace Blazor_Kanban_Crud_UrlAdaptor.Controllers ``` -### Insert card +### Inserting a card Using the `InsertUrl` property, you can specify the controller action mapping URL to perform insert operation on the server-side. @@ -482,9 +482,9 @@ Using the `InsertUrl` property, you can specify the controller action mapping UR } ``` -The newly added card details are bound to the `value` parameter. +The newly added card data is available in the `value` parameter.. -### Update card +### Updating a card Using the `UpdateUrl` property, the controller action mapping URL can be specified to perform save/update operation on the server-side. @@ -498,9 +498,9 @@ Using the `UpdateUrl` property, the controller action mapping URL can be specifi } ``` -The updated card details are bound to the `value` parameter. +The updated card data is available in the `value` parameter. -### Delete card +### Deleting a card Using the `RemoveUrl` property, the controller action mapping URL can be specified to perform a delete operation on the server-side. @@ -513,13 +513,13 @@ Using the `RemoveUrl` property, the controller action mapping URL can be specifi } ``` -The primary key value of the card to be deleted will be bound to the `Key` parameter. +The primary key of the card to be deleted is available in the `Key` parameter. -### Bulk update +### Performing Bulk updates Using the [CrudUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_CrudUrl) property, the controller action mapping URL can be specified to perform all the CRUD operations at the server-side using a single method instead of specifying a separate controller action method for CRUD (insert, update, and delete) operations. -The action parameter of `CrudUrl` is used to get the corresponding CRUD action. +The `action` parameter of `CrudUrl` identifies the corresponding CRUD operation. N> The `CrudUrl` is used to update the bulk data sent to the server-side. Multiple selections and [SortBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanSortSettings.html#Syncfusion_Blazor_Kanban_KanbanSortSettings_SortBy) as [Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SortOrderBy.html#Syncfusion_Blazor_Kanban_SortOrderBy_Index) properties are used for `CrudUrl` properties to update the modified bulk data to the server-side. @@ -630,4 +630,4 @@ namespace Blazor_Kanban_Crud_UrlAdaptor.Controllers } ``` -You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-kanban-crud-url-adaptor). +Explore the complete working sample [here](https://github.com/SyncfusionExamples/blazor-kanban-crud-url-adaptor). diff --git a/blazor/kanban/dimensions.md b/blazor/kanban/dimensions.md index e8632319ec..0f9710c13d 100644 --- a/blazor/kanban/dimensions.md +++ b/blazor/kanban/dimensions.md @@ -9,7 +9,9 @@ documentation: ug # Dimensions in Blazor Kanban Component -The [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) dimensions refers to both height and width of the entire layout and it accepts three types of values. +This section explains how to configure the height and width of the Syncfusion Blazor Kanban component to achieve responsive and fixed layouts. + +The [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component allows customization of its overall layout dimensions—height and width—using three value types: * Auto * Pixel @@ -17,7 +19,9 @@ The [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-b ## Auto height and width -When height and width of the Kanban are set to `auto`, it will try as hard as possible to keep an element the same width as its parent container. In other words, the parent container that holds Kanban, its width or height will be the sum of its children. By default, Kanban is assigned with `auto` values for both the Height and Width properties. +Use `auto` values when you want the Kanban component to adapt to its content and parent container dynamically. + +When the Kanban's height and width are set to `auto`, it automatically adjusts to fit the size of its parent container. This ensures the Kanban layout expands or contracts based on its content and surrounding elements. By default, the Kanban component uses `auto` for both [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_Width), allowing it to adapt seamlessly to its container. ```cshtml @@ -79,9 +83,11 @@ When height and width of the Kanban are set to `auto`, it will try as hard as po ![Changing Blazor Kanban Card Height and Width in Automatic](./images/blazor-kanban-change-height-and-width.png) -## Height and width in pixel +## Fixed dimensions using pixel values -The Kanban height and width will be rendered exactly as per the given pixel values. It accepts both string and number values. +Define explicit dimensions in pixels to maintain consistent sizing regardless of screen size or container. + +When pixel values are specified for the Kanban's [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_Width), the component renders with exact dimensions. These values can be provided as either strings (e.g., `'650px'`) or numbers (e.g., `650`). ```cshtml @@ -143,9 +149,11 @@ The Kanban height and width will be rendered exactly as per the given pixel valu ![Changing Blazor Kanban Card Height and Width in Pixel](./images/blazor-kanban-change-height-width-in-pixel.png) -## Height and width in percentage +## Responsive dimensions using percentage + +Use percentage values to make the Kanban component scale proportionally within its parent container. -When height and width of the Kanban are given in percentage, it will make the Kanban as wide as the parent container. +Specifying [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_Width) in percentage makes the Kanban component scale relative to its parent container, ensuring responsive behavior across different screen sizes. ```cshtml diff --git a/blazor/kanban/drag-and-drop.md b/blazor/kanban/drag-and-drop.md index 64b91d1649..deb18de9b2 100644 --- a/blazor/kanban/drag-and-drop.md +++ b/blazor/kanban/drag-and-drop.md @@ -1,6 +1,6 @@ --- layout: post -title: Drag and Drop in Blazor Kanban Component | Syncfusion +title: How to Use Drag and Drop in Blazor Kanban Component | Syncfusion description: Checkout and learn here all about drag and drop the cards in the Syncfusion Blazor Kanban component. platform: Blazor control: Kanban @@ -9,23 +9,23 @@ documentation: ug # Drag and Drop in Blazor Kanban Component -All cards can be dragged and dropped across columns, within columns, swimlane rows, or Kanban to an external source, and vice versa. +Cards in the Blazor Kanban component can be dragged and dropped across columns, within columns, across swimlane rows, or between Kanban boards and external components. -The following drag and drop types are available in the Kanban board. +### Types of drag and drop in kanban * Internal drag and drop * External drag and drop ## Internal drag and drop -Allows the user to drag and drop the cards within the Kanban board. Based on this, it can be categorized into two ways. +Allows the user to drag and drop the cards within the Kanban board. Internal drag-and-drop operations can be categorized into the following types: * Column drag and drop * Swimlane drag and drop ### Column drag and drop -Transit or change the card position using the drag-and-drop functionality. By default, the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_AllowDragAndDrop) property is enabled on the Kanban board, which is used to change the card position from column to column or within the column. +Users can reposition cards using drag-and-drop functionality. By default, the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_AllowDragAndDrop) property is enabled on the Kanban board, which is used to change the card position from column to column or within the column. A dotted border is added on Kanban cells except the dragged clone cells when dragging, which indicates the possible ways for dropping the cards into the cells. @@ -41,7 +41,7 @@ In the following example, the drag and drop behavior is disabled on the Kanban b ### Swimlane drag and drop -By default, the Kanban does not allow dragging the cards across the swimlane rows. Enabling the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_AllowDragAndDrop) property allows to drag the cards across the swimlane rows, which is specified inside [KanbanSwimlaneSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_SwimlaneSettings) property. +By default, cards cannot be dragged across swimlane rows. Enabling the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_AllowDragAndDrop) property allows to drag the cards across the swimlane rows, which is specified inside [KanbanSwimlaneSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_SwimlaneSettings) property. {% tabs %} {% highlight cshtml tabtitle="Index.razor" %} @@ -57,7 +57,7 @@ Allows the user to drag and drop the cards from one Kanban to another Kanban or ### Kanban to Kanban -Drag and drop the card from one Kanban to another Kanban and vice versa. This can be achieved by specifying the [ExternalDropId](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_ExternalDropId) property which is used to specify the id of the dropped Kanban element and the [DragStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DragStop) event which is used to delete the card on dragged Kanban and add the card on dropped Kanban using the [DeleteCard](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DeleteCardAsync__0_) and [AddCard](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_AddCardAsync__0_System_Int32_) public methods. +Users can drag and drop cards between two Kanban boards. This can be achieved by specifying the [ExternalDropId](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_ExternalDropId) property which is used to specify the id of the dropped Kanban element and the [DragStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DragStop) event which is used to delete the card on dragged Kanban and add the card on dropped Kanban using the [DeleteCard](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DeleteCardAsync__0_) and [AddCard](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_AddCardAsync__0_System_Int32_) public methods. In the following example, a card can be dragged from one Kanban and dropped into another Kanban using the [DragStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DragStop) event. @@ -71,7 +71,7 @@ In the following example, a card can be dragged from one Kanban and dropped into ### Kanban to Schedule -Drag the card from the Kanban board and drop it to the Schedule component. +Users can drag cards from the Kanban board and drop them into the Schedule component. In the following sample, the data is removed from the Kanban board using the [DeleteCard](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DeleteCardAsync__0_) public method at the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event of Schedule component and added to the Schedule component at Kanban [DragStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DragStop) event when dragging and dropping the card to the Schedule. diff --git a/blazor/kanban/events.md b/blazor/kanban/events.md index 7ad6336c93..d54a604767 100644 --- a/blazor/kanban/events.md +++ b/blazor/kanban/events.md @@ -7,13 +7,13 @@ control: Kanban documentation: ug --- -# Events in Blazor Kanban Component +# Event Handling in Blazor Kanban Component -This section explains the list of events of the [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component which will be triggered for appropriate Kanban actions. +his guide provides a comprehensive overview of the available events in the [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component. These events enable developers to customize behavior and respond to user interactions effectively. -## OnLoad +## OnLoad event -`OnLoad` event allows customization of Kanban properties before rendering. +[OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_OnLoad) is triggered before the Kanban component is rendered, allowing customization of its properties. ```cshtml @@ -32,9 +32,9 @@ This section explains the list of events of the [Blazor Kanban](https://www.sync ``` -## ActionBegin +## ActionBegin event -`ActionBegin` event triggers at the beginning of every Kanban action. +[ActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_ActionBegin) event triggers at the beginning of every Kanban action. ```cshtml @@ -53,9 +53,9 @@ This section explains the list of events of the [Blazor Kanban](https://www.sync ``` -## ActionComplete +## ActionComplete event -`ActionComplete` event triggers on successful completion of the Kanban actions. +[ActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_ActionComplete) is triggered after a Kanban action completes successfully. ```cshtml @@ -74,9 +74,9 @@ This section explains the list of events of the [Blazor Kanban](https://www.sync ``` -## ActionFailure +## ActionFailure event -`ActionFailure` event triggers when a Kanban action gets failed or interrupted and it will return an error information. +[ActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_ActionFailure) is triggered when a Kanban action fails or is interrupted, providing error details. ```cshtml @@ -95,9 +95,9 @@ This section explains the list of events of the [Blazor Kanban](https://www.sync ``` -## CardClick +## CardClick event -`CardClick` event triggers on single-clicking the Kanban cards. +[CardClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_CardClick) is triggered when a user clicks on a Kanban card. ```cshtml @@ -116,9 +116,9 @@ This section explains the list of events of the [Blazor Kanban](https://www.sync ``` -## CardDoubleClick +## CardDoubleClick event -`CardDoubleClick` event triggers on double-clicking the Kanban cards. +[CardDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_CardDoubleClick) is triggered when a user double-clicks a Kanban card. ```cshtml @@ -137,9 +137,9 @@ This section explains the list of events of the [Blazor Kanban](https://www.sync ``` -## CardRendered +## CardRendered event -`CardRendered` event triggers before each card of the Kanban rendering on the page. +[CardRendered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_CardRendered) is triggered before each Kanban card is rendered on the page. ```cshtml @@ -158,9 +158,9 @@ This section explains the list of events of the [Blazor Kanban](https://www.sync ``` -## DataBinding +## DataBinding event -`DataBinding` event triggers before the data binds to the Kanban. +[DataBinding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DataBinding) is triggered before data is bound to the Kanban component. ```cshtml @@ -179,9 +179,9 @@ This section explains the list of events of the [Blazor Kanban](https://www.sync ``` -## DialogClose +## DialogClose event -`DialogClose` event triggers before the dialog closes. +[DialogClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DialogClose) is triggered before the Kanban dialog closes. ```cshtml @@ -200,9 +200,9 @@ This section explains the list of events of the [Blazor Kanban](https://www.sync ``` -## DialogOpen +## DialogOpen event -`DialogOpen` event triggers before the dialog opens. +[DialogOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DialogOpen) is triggered before the Kanban dialog opens. ```cshtml @@ -221,9 +221,9 @@ This section explains the list of events of the [Blazor Kanban](https://www.sync ``` -## DragStart +## DragStart event -`DragStart` event triggers when the card drag actions start. +[DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DragStart) is triggered when a card drag operation begins. ```cshtml @@ -242,9 +242,9 @@ This section explains the list of events of the [Blazor Kanban](https://www.sync ``` -## DragStop +## DragStop event -`DragStop` event triggers when the card drag actions stop. +[DragStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DragStop) is triggered when a card drag operation ends. ```cshtml @@ -263,9 +263,9 @@ This section explains the list of events of the [Blazor Kanban](https://www.sync ``` -## QueryCellInfo +## QueryCellInfo event -`QueryCellInfo` event triggers before each column of the Kanban rendering on the page. +[QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_QueryCellInfo) is triggered before each Kanban column is rendered on the page. ```cshtml diff --git a/blazor/kanban/getting-started-with-web-app.md b/blazor/kanban/getting-started-with-web-app.md index 0e45488f06..83c318ccb0 100644 --- a/blazor/kanban/getting-started-with-web-app.md +++ b/blazor/kanban/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Kanban Component in Web App -This section briefly explains about how to include [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This guide explains how to integrate the [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) @@ -246,9 +246,9 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Kanban). -## Populating cards +## Populate kanban with cards -To populate the empty Kanban with cards, define the Enumerable object or remote data using the `DataSource` property. To define `DataSource`, the mandatory fields in object or remote data should be relevant to `KeyField`. In the following example, you can see the cards defined with default fields such as ID, Summary, and Status. +To populate the empty Kanban with cards, define the Enumerable object or remote data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) property. To define `DataSource`, the mandatory fields in object or remote data should be relevant to [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField). In the following example, you can see the cards defined with default fields such as ID, Summary, and Status. {% tabs %} {% highlight razor %} @@ -290,9 +290,9 @@ To populate the empty Kanban with cards, define the Enumerable object or remote {% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTtChkTKoFctAY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban with Cards](./images/blazor-kanban-with-cards.png)" %} -## Enable Swimlane +## Enable swimlane functionality -`Swimlane` can be enabled by mapping the fields `KanbanSwimlaneSettings.KeyField` to appropriate column name in DataSource. This enables the grouping of the cards based on the mapped column values. +`Swimlane` can be enabled by mapping the fields [KanbanSwimlaneSettings.KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_SwimlaneSettings) to appropriate column name in DataSource. This enables the grouping of the cards based on the mapped column values. {% tabs %} {% highlight razor %} diff --git a/blazor/kanban/getting-started.md b/blazor/kanban/getting-started.md index da6834e68f..1ba7c8d675 100644 --- a/blazor/kanban/getting-started.md +++ b/blazor/kanban/getting-started.md @@ -11,11 +11,11 @@ documentation: ug # Getting Started with Blazor Kanban Component -This section briefly explains about how to include [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component in the Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This guide explains how to integrate the [Syncfusion Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component into a Blazor WebAssembly application using Visual Studio or Visual Studio Code. > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) -To get start quickly with Blazor Kanban component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Kanban) sample. +To get started quickly with the Blazor Kanban component, explore to the[GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Kanban). {% tabcontents %} @@ -174,9 +174,9 @@ Add the Syncfusion® Blazor Kanban component {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBpZMLOpgSSDQVm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban Component](./images/blazor-kanban-component.png)" %} -## Populating cards +## Populate kanban with cards -To populate the empty Kanban with cards, define the Enumerable object or remote data using the `DataSource` property. To define `DataSource`, the mandatory fields in object or remote data should be relevant to `KeyField`. In the following example, you can see the cards defined with default fields such as ID, Summary, and Status. +To populate the empty Kanban with cards, define the Enumerable object or remote data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) property. To define `DataSource`, the mandatory fields in object or remote data should be relevant to [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField). In the following example, you can see the cards defined with default fields such as ID, Summary, and Status. {% tabs %} {% highlight cshtml %} @@ -218,9 +218,9 @@ To populate the empty Kanban with cards, define the Enumerable object or remote {% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTtChkTKoFctAY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban with Cards](./images/blazor-kanban-with-cards.png)" %} -## Enable Swimlane +## Enable swimlane functionality -`Swimlane` can be enabled by mapping the fields `KanbanSwimlaneSettings.KeyField` to appropriate column name in DataSource. This enables the grouping of the cards based on the mapped column values. +`Swimlane` can be enabled by mapping the fields [KanbanSwimlaneSettings.KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_SwimlaneSettings) to appropriate column name in DataSource. This enables the grouping of the cards based on the mapped column values. {% tabs %} {% highlight cshtml %} @@ -291,4 +291,4 @@ N> You can also explore our [Blazor Kanban Board example](https://blazor.syncfus * [Getting Started with Syncfusion® Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/kanban/localization.md b/blazor/kanban/localization.md index 154b4bec52..6597f4c71c 100644 --- a/blazor/kanban/localization.md +++ b/blazor/kanban/localization.md @@ -7,15 +7,20 @@ control: Kanban documentation: ug --- -# Localization in Blazor Kanban Component +# Localization Support in Blazor Kanban Component ## Localization -[Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +This section explains how to localize the Blazor Kanban component to support different languages and cultures, including right-to-left (RTL) layouts for languages such as Arabic, Farsi, and Urdu. -## Right to left (RTL) +## Localizing Kanban Text -The Kanban provides an option to switch its text direction and layout from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable right-to-left mode in Kanban, set the `EnableRtl` to true. +The [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component supports localization by allowing you to translate built-in text strings into different languages. To learn how to configure localization across all Syncfusion® Blazor components, refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) documentation. + +## Enabling Right-to-Left (RTL) Layout + +The Kanban component provides built-in support for right-to-left (RTL) rendering. This feature improves accessibility and usability for users who read and write in RTL languages. +To enable RTL mode in the Kanban component, set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_EnableRtl) property to `true`. Additionally, specify the appropriate `Locale` value (e.g., `"ar"` for Arabic). ```cshtml diff --git a/blazor/kanban/responsive-mode.md b/blazor/kanban/responsive-mode.md index 6676198400..68ecf82069 100644 --- a/blazor/kanban/responsive-mode.md +++ b/blazor/kanban/responsive-mode.md @@ -7,26 +7,35 @@ control: Kanban documentation: ug --- -# Responsive Mode in Blazor Kanban Component +# Responsive Layout in Blazor Kanban Component -The [Blazor Kanban Board](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component has support for responsive behavior based on the client browser's width and height. +The [Blazor Kanban Board](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component supports responsive behavior, automatically adapting its layout based on the width and height of the client’s browser. -## Layouts +## Available layouts -Possible layouts are: +The Kanban component provides the following responsive layouts: -* Default Layout -* Swimlane Layout +* **Default Layout** +* **Swimlane Layout** ### Default Layout -Kanban user interface is customized and redesigned for the best view on small screens. In responsive mode, the first column occupies 80% and the second column occupies 20% of the screen layout. Tap and hold the Kanban card to drag and drop it. Swipe left or right to view the columns. +In responsive mode, the Kanban user interface is optimized for smaller screens. The layout is adjusted so that: + +- The first column occupies 80% of the screen width. +- The second column occupies 20% of the screen width. +- Users can **tap and hold** a Kanban card to initiate drag-and-drop. +- **Swipe left or right** to navigate between columns. ![Blazor Kanban with Default Layout](./images/blazor-kanban-default-layout.PNG) ### Swimlane Layout -Kanban swimlane header is rendered with menu icon on top of the kanban board. It will show all the available swimlane groups of the header text with a popup when clicking the menu icon. Swimlane selected grouped header text resultant data is rendered on the Kanban board. By default, the first swimlane grouped header text is selected and the resultant data is shown on the Kanban board. The Kanban board data will be changed when changing the swimlane group header text. +In responsive mode, the swimlane header is displayed with a menu icon at the top of the Kanban board. When the icon is clicked: + +- A popup displays all available swimlane group headers. +- Selecting a swimlane group updates the Kanban board to show the corresponding cards. +- By default, the first swimlane group is selected and displayed. ![Blazor Kanban with Swimlane Layout](./images/blazor-kanban-swimlane-layout.PNG) diff --git a/blazor/kanban/sort.md b/blazor/kanban/sort.md index b951e505f6..101e025e9d 100644 --- a/blazor/kanban/sort.md +++ b/blazor/kanban/sort.md @@ -7,13 +7,13 @@ control: Kanban documentation: ug --- -# Sorting in Blazor Kanban Component +# How to Sort Cards in the Blazor Kanban Component The [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) provides built-in support to arrange the cards in their columns based on the JSON data order and drop the cards in the columns based on the dropped clone. -## SortBy +## Using the SortBy Property -Initially, users can change the arrangement of cards in the columns and position of the dropped card by using the `SortBy` property. The `SortBy` property contains three enumeration values as follows, +Initially, users can change the arrangement of cards in the columns and position of the dropped card by using the [SortBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanSortSettings.html#Syncfusion_Blazor_Kanban_KanbanSortSettings_SortBy) property. The `SortBy` property contains three enumeration values as follows, * DataSourceOrder * Index @@ -21,7 +21,7 @@ Initially, users can change the arrangement of cards in the columns and position ### DataSource Order -The SortBy `DataSourceOrder` property does not require any `Field` mapping. In this behavior, cards are loaded based on the JSON data order, and also cards are dropped based on the JSON data order. +The SortBy [DataSourceOrder] property does not require any `Field` mapping. In this behavior, cards are loaded based on the JSON data order, and also cards are dropped based on the JSON data order. N> By default, the `SortBy` property is `DataSourceOrder`. @@ -85,7 +85,7 @@ N> By default, the `SortBy` property is `DataSourceOrder`. ![Sorting in Blazor Kanban](./images/blazor-kanban-sorting.png) -### Index +### Sorting by Index Field SortBy `Index` property must require datasource `Field` mapping. In this behavior, cards are loaded based on mapping `Field` values, and cards are dropped based on the dropped clone. @@ -256,9 +256,9 @@ The SortBy `Custom` property must require datasource `Field` mapping. In this be ![Custom Sorting in Blazor Kanban](./images/blazor-kanban-custom-sorting.png) -## Change the direction +## Sorting Direction Configuration -Kanban board also provides support for aligning the cards in the columns using the `Direction` property inside the `KanbanSortSettings` property. Based on this, cards can be aligned in the columns either in `Ascending` or `Descending` order. Sorting direction will be performed based on `SortBy` property. +Kanban board also provides support for aligning the cards in the columns using the [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanSortSettings.html#Syncfusion_Blazor_Kanban_KanbanSortSettings_Direction) property inside the `KanbanSortSettings` property. Based on this, cards can be aligned in the columns either in `Ascending` or `Descending` order. Sorting direction will be performed based on `SortBy` property. N> By default, cards are aligned in the columns based on `Ascending` order. diff --git a/blazor/kanban/style.md b/blazor/kanban/style.md index e01f4c7dbc..27ddbae821 100644 --- a/blazor/kanban/style.md +++ b/blazor/kanban/style.md @@ -66,9 +66,9 @@ To modify the Kanban appearance, you need to override the default CSS of Kanban. | .e-kanban .e-kanban-table.e-content-table .e-card .e-card-content | Cards content in kanban. | | .e-kanban .e-kanban-table.e-content-table .e-card .e-card-tag.e-card-label | Cards label in kanban. | -## To set fixed position to the Kanban header +## Customizing the fixed position of the Kanban header -The Fixed header in Kanban control can be customized in following ways, +The fixed header in the Kanban control can be customized using the following approaches: By setting a fixed height to the Kanban content, diff --git a/blazor/kanban/swimlane.md b/blazor/kanban/swimlane.md index ead60a3fb4..1e15488e9c 100644 --- a/blazor/kanban/swimlane.md +++ b/blazor/kanban/swimlane.md @@ -7,13 +7,13 @@ control: Kanban documentation: ug --- -# Swimlane in Blazor Kanban Component +# How to Use Swimlanes in Blazor Kanban Swimlanes are horizontal categorizations of cards on the [Blazor Kanban Board](https://www.syncfusion.com/blazor-components/blazor-kanban-board). It is used for grouping of cards, which brings transparency to the workflow process. ## Render swimlane row -Cards can be grouped based on `KeyField` and displayed in rows, which are separated by columns. It is mandatory to define the `KeyField` that is mapped from the datasource for rendering swimlane rows in the Kanban board. +Cards can be grouped into swimlane rows based on the `KeyField`, with each row representing a unique value from the data source. To render swimlane rows, the [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField) must be mapped to a corresponding field in the data source. ```cshtml @@ -75,11 +75,11 @@ Cards can be grouped based on `KeyField` and displayed in rows, which are separa ``` -![Blazor Kanban with Swimlane Row](./images/blazor-kanban-with-swimlane-row.png) +![Swimlane rows rendered in Blazor Kanban](./images/blazor-kanban-with-swimlane-row.png) ## Custom row text -Customize the swimlane row header text by using the `TextField` property mapped from datasource. +Customize the swimlane row header text by mapping the `TextField` property to a field in the data source. N> It is not mandatory to define the `TextField` to `KanbanSwimlaneSettings`. It will automatically consider the `KeyField` to swimlane row header text. If the mapping `TextField` key is not present in the datasource, it will consider the swimlane `KeyField` as swimlane row header text. @@ -145,9 +145,9 @@ N> It is not mandatory to define the `TextField` to `KanbanSwimlaneSettings`. It ## Template -You can customize the Kanban swimlane row by using `Template`, which is specified within the `KanbanSwimlaneSettings` property. In this demo, the swimlane header is customized with HTML element. +You can customize the Kanban swimlane row by using `Template`, which is specified within the [KanbanSwimlaneSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_SwimlaneSettings) property. This example demonstrates how to customize the swimlane header using an HTML template. -To get start quickly with Blazor Kanban component using Templates, you can check on this video. +To get started quickly with Blazor Kanban component using Templates, you can check on this video. {% youtube "youtube:https://www.youtube.com/watch?v=PjTgXuibei8" %} @@ -245,11 +245,11 @@ To get start quickly with Blazor Kanban component using Templates, you can check ``` -![Customizing Swimlane Row Text in Blazor Kanban](./images/blazor-kanban-custom-swimlane-row.png) +![Customized swimlane row text using template in Blazor Kanban](./images/blazor-kanban-custom-swimlane-row.png) ## Sorting -Kanban support to sort the swimlane rows in kanban board based on the [TextField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SwimlaneSettingsModel.html#Syncfusion_Blazor_Kanban_SwimlaneSettingsModel_TextField) property by setting [SortDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SwimlaneSettingsModel.html#Syncfusion_Blazor_Kanban_SwimlaneSettingsModel_SortDirection) property. +The Blazor Kanban component supports sorting swimlane rows based on the [TextField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SwimlaneSettingsModel.html#Syncfusion_Blazor_Kanban_SwimlaneSettingsModel_TextField) property by setting [SortDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SwimlaneSettingsModel.html#Syncfusion_Blazor_Kanban_SwimlaneSettingsModel_SortDirection) property. N> If the [TextField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SwimlaneSettingsModel.html#Syncfusion_Blazor_Kanban_SwimlaneSettingsModel_TextField) property is not provided, sorting will be performed based on the [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SwimlaneSettingsModel.html#Syncfusion_Blazor_Kanban_SwimlaneSettingsModel_KeyField) property. @@ -291,10 +291,10 @@ N> If the [TextField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ka ``` -![Sorting in Blazor Kanban Swimlane Row](./images/blazor-kanban-swimlane-row-sorting.png) +![Swimlane rows sorted in descending order in Blazor Kanban](./images/blazor-kanban-swimlane-row-sorting.png) ### Custom order -Kanban supports to sort the swimlane rows using custom sort logic by handling [SwimlaneSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_SwimlaneSorting) event. +The Blazor Kanban component allows custom sorting of swimlane rows by handling the [SwimlaneSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_SwimlaneSorting) event. In this event, you can get the argument of SwimlaneRows which contains the list of SwimlaneSettingsModel and it will align based on the SortDirection property. You can change the List of SwimlaneSettingsModel as per your wish and assign the changed list to it. @@ -349,15 +349,15 @@ In the following code, changed the order of the swimlane rows at positions 2, 0, ``` -![Swimlane Custom Order in Blazor Kanban Swimlane Row](./images/blazor-kanban-swimlane-row-custom.png) +![Custom swimlane row order in Blazor Kanban](./images/blazor-kanban-swimlane-row-custom.png) ## Calculate cards count -Users can show or hide the cards count by swimlane row in header when enabling the `ShowItemCount` property, which is enabled by default on the Kanban board. +Users can show or hide the card count in each swimlane row header by using the `ShowItemCount` property. This property is enabled by default. N> Provided localization support for **Items** text. -In below demo, disabled on `ShowItemCount` property on rendering swimlane row without total count. +In the following example, the `ShowItemCount` property is disabled to render swimlane rows without displaying the total card count. ```cshtml @@ -418,7 +418,7 @@ In below demo, disabled on `ShowItemCount` property on rendering swimlane row wi ``` -![Displaying Blazor Kanban Cards Count](./images/blazor-kanban-cards-count.png) +![Swimlane rows without card count in Blazor Kanban](./images/blazor-kanban-cards-count.png) ## Enable frozen rows @@ -426,7 +426,7 @@ Frozen rows provide an option to make the current swimlane row header text alway By default, the `EnableFrozenRows` property is set as `false`. If you wish to show the swimlane frozen rows, you can enable the `EnableFrozenRows` property. -N> This feature support only when using Kanban content scrolling. The Expand/collapse swimlane icon does not work on frozen rows. +N> Note: This feature is supported only when Kanban content scrolling is enabled. The expand/collapse swimlane icon is not functional in frozen rows. ```cshtml diff --git a/blazor/kanban/tooltip.md b/blazor/kanban/tooltip.md index fed260705f..1adb974d82 100644 --- a/blazor/kanban/tooltip.md +++ b/blazor/kanban/tooltip.md @@ -7,11 +7,11 @@ control: Kanban documentation: ug --- -# Tooltip in Blazor Kanban Component +# How to Use Tooltips in Syncfusion Blazor Kanban Component -The tooltip is used to show the card information when the cursor hover over the card elements using the `EnableTooltip` property. Tooltip content is dynamically set based on hovering over the card elements. +Tooltips in the Syncfusion Blazor Kanban component display card details when users hover over card elements. This behavior is enabled using the [EnableTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_EnableTooltip) property, and the content is dynamically derived from the card's data. -N> If you wish to show tooltip on Kanban board custom elements, you need to add `e-tooltip-text` class name of a particular element. +N> To display tooltips on custom elements within the Kanban board, assign the `e-tooltip-text` class to the target element. This ensures the tooltip is triggered correctly. ```cshtml @@ -71,4 +71,4 @@ N> If you wish to show tooltip on Kanban board custom elements, you need to add ``` -![Blazor Kanban displays Tooltip](./images/blazor-kanban-tooltip.png) \ No newline at end of file +![Tooltip displayed on Blazor Kanban card showing task summary](./images/blazor-kanban-tooltip.png) \ No newline at end of file diff --git a/blazor/kanban/validation.md b/blazor/kanban/validation.md index 822cf39912..b499d50e72 100644 --- a/blazor/kanban/validation.md +++ b/blazor/kanban/validation.md @@ -9,21 +9,23 @@ documentation: ug # WIP Validation in Blazor Kanban Component -Validate particular column using the `MinCount` or `MaxCount` properties. The corresponding columns gets different appearance when validation fails. In default layout, `ConstraintType` property accept only `Column` type. In swimlane layout, accept both `Column` and `Swimlane` constraint type. +Work-In-Progress (WIP) validation in the Syncfusion Blazor Kanban component helps control the number of cards allowed in each column or swimlane cell. This is achieved using the `MinCount` and `MaxCount` properties. When validation fails, the affected column or cell is visually highlighted. + +In the default layout, the `ConstraintType` property accepts only the `Column` type. In the swimlane layout, it supports both `Column` and `Swimlane` constraint types. There are two types of constraints: -1. Column -2. Swimlane +1. **Column** +2. **Swimlane** N> By default, the column count validation is performed based on Kanban **Columns**. ## Minimum card limit -The `MinCount` property is used to specify the minimum cards hold on particular column or swimlane cell. If the column or swimlane total card count falls short of the minimum count value, it shows the column or cell background color with validation fails. +The `MinCount` property specifies the minimum number of cards required in a column or swimlane cell. If the total card count falls below this value, the column or cell background changes to indicate a validation failure. ## Maximum card limit -The `MaxCount` property is used to specify the maximum cards hold on particular column or swimlane cell. If the column or swimlane cell total card count exceeds the maximum count value, it shows the column or cell background color with validation fails. +The `MaxCount` property sets the maximum number of cards allowed in a column or swimlane cell. If the card count exceeds this value, the column or cell background changes to indicate a validation failure. ```csharp diff --git a/blazor/kanban/workflow.md b/blazor/kanban/workflow.md index e6c4c25741..72e27da553 100644 --- a/blazor/kanban/workflow.md +++ b/blazor/kanban/workflow.md @@ -7,9 +7,9 @@ control: Kanban documentation: ug --- -# Workflow in Blazor Kanban Component +# Workflow Restrictions in Blazor Kanban Component -[Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) workflow allows to set the flow of cards between the columns. It provides restriction on columns when the card is moved from one column to another column. It provides support to prevent the drag and drop action on the column. +The [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) workflow controls how cards move between columns. It enables restrictions when a card is moved from one column to another and supports disabling drag-and-drop actions per column. ## Prevent transition across columns @@ -60,7 +60,7 @@ Provides restriction on columns when performing drag and drop actions while prov ## Prevent Drop actions -Column will not allow any dropped card action when you disable the `AllowDrop` properties in the column. +To prevent cards from being dropped into a column, set the `AllowDrop` property to `false`. In the following code, the `Backlog` column will not allow any card drop action within the column and any other columns cards. @@ -109,7 +109,7 @@ In the following code, the `Backlog` column will not allow any card drop action ## Prevent Drag actions -Column will not allow any dragged card action when you disable the `AllowDrag` properties in the column. +To prevent cards from being dragged from a column, set the `AllowDrag` property to `false`. In the following code, the `Done` column will not allow any card drag action within the column. From 0bf71eb3f20a28105683decce9207c6d91878bf4 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 Date: Tue, 7 Oct 2025 14:20:17 +0530 Subject: [PATCH 2/3] 983303: Updated Kanban documentation --- blazor/kanban/accessibility.md | 4 ++-- blazor/kanban/columns.md | 8 ++++---- blazor/kanban/drag-and-drop.md | 2 +- blazor/kanban/swimlane.md | 1 + 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/blazor/kanban/accessibility.md b/blazor/kanban/accessibility.md index d0d3f186fe..7ae8856a37 100644 --- a/blazor/kanban/accessibility.md +++ b/blazor/kanban/accessibility.md @@ -47,9 +47,9 @@ The Blazor Kanban component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/ | `aria-label` | It helps to provides information about elements in a kanban component for assistive technology. | | `aria-expanded` | Attributes indicate the state of a collapsible element. | | `aria-selected` | This attribute is assigned to the Kanban component for the selection of elements, and its default value is `false`. The value changes to true when the user selects a Kanban card. | -| `aria-grabbed` | Indicates whether a Kanban card is currently selected for dragging. If set to `true`, the card is actively grabbed; if `false`, it is available for selection but not currently grabbed. | +| `aria-grabbed` | Indicates whether the attribute is set to true. It has been selected for dragging. If this attribute is set to false, the element can be grabbed for a drag-and-drop operation but will not be currently grabbed. | | `aria-describedby` | This attribute contains the ID of the Kanban header column to indicate that the attribute establishes an association between the Kanban header column and the Kanban column body. | -| `aria-roledescription` | Provides a human-readable description of the Kanban card's role, enhancing clarity for assistive technologies. | +| `aria-roledescription` | This attribute is assigned to the Kanban component and is used to provide alternative descriptions for card elements. | ## Keyboard interaction diff --git a/blazor/kanban/columns.md b/blazor/kanban/columns.md index 9e3b61a904..66c724e4f2 100644 --- a/blazor/kanban/columns.md +++ b/blazor/kanban/columns.md @@ -13,9 +13,9 @@ The **Kanban** columns represent each stage of workflow process.Column definitio ## Single-key mapping -Columns are categorized by mapping the `KeyField` property to specific key values in the data source. The corresponding **value** in the datasource is mapped inside the columns `KeyField`. This categorization determines how cards are distributed across columns on the Kanban board. +Columns are categorized by mapping the [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField) property to specific key values in the data source. The corresponding **value** in the datasource is mapped inside the columns `KeyField`. This categorization determines how cards are distributed across columns on the Kanban board. -N> The `KeyField` property is required to render columns on the Kanban board. +N> The [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField) property is required to render columns on the Kanban board. ```cshtml @@ -79,7 +79,7 @@ N> The `KeyField` property is required to render columns on the Kanban board. ## Multi-key mapping -The Kanban board supports rendering a single column with multiple key mappings using the `KeyField` property. +The Kanban board supports rendering a single column with multiple key mappings using the [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField) property. ```cshtml @@ -457,7 +457,7 @@ In the following example, the Backlog column is collapsed on initialization of K ## Stacked headers -Stacked headers are additional header rows that group related columns under a common category. Group columns by specifying their key values in the `KeyFields` property and assign a custom header label using the `Text` property in `KanbanStackedHeaders`. +Stacked headers are additional header rows that group related columns under a common category. Group columns by specifying their key values in the [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField) property and assign a custom header label using the `Text` property in [KanbanStackedHeaders](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_StackedHeaders). In the following code, the kanban columns 'InProgress, Review' are grouped under 'Development Phase' category. diff --git a/blazor/kanban/drag-and-drop.md b/blazor/kanban/drag-and-drop.md index deb18de9b2..060fd7636d 100644 --- a/blazor/kanban/drag-and-drop.md +++ b/blazor/kanban/drag-and-drop.md @@ -11,7 +11,7 @@ documentation: ug Cards in the Blazor Kanban component can be dragged and dropped across columns, within columns, across swimlane rows, or between Kanban boards and external components. -### Types of drag and drop in kanban +## Types of drag and drop in kanban * Internal drag and drop * External drag and drop diff --git a/blazor/kanban/swimlane.md b/blazor/kanban/swimlane.md index 1e15488e9c..3bda92c9df 100644 --- a/blazor/kanban/swimlane.md +++ b/blazor/kanban/swimlane.md @@ -292,6 +292,7 @@ N> If the [TextField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ka ``` ![Swimlane rows sorted in descending order in Blazor Kanban](./images/blazor-kanban-swimlane-row-sorting.png) + ### Custom order The Blazor Kanban component allows custom sorting of swimlane rows by handling the [SwimlaneSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_SwimlaneSorting) event. From c57aa7a5a3bada6e9d7ea1eed7ea8e2092ff4f69 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 Date: Tue, 7 Oct 2025 14:21:53 +0530 Subject: [PATCH 3/3] 983303: Updated Kanban documentation --- blazor/kanban/data-binding.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/kanban/data-binding.md b/blazor/kanban/data-binding.md index 87f4324ed5..7dc78bee89 100644 --- a/blazor/kanban/data-binding.md +++ b/blazor/kanban/data-binding.md @@ -206,7 +206,7 @@ N> By default, SfDataManager uses ODataAdaptor for remote data-binding. ### Binding with OData services -[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. You can retrieve data from the OData service using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). +[OData](https://www.odata.org/documentation/odata-version-3-0) is a standardized protocol for creating and consuming data. You can retrieve data from the OData service using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). ```cshtml @using Syncfusion.Blazor.Data @@ -482,7 +482,7 @@ It is possible to dynamically modify Kanban [Query](https://help.syncfusion.com/ It is possible to create your own `CustomAdaptor` by extending the built-in available adaptors. -The following example demonstrates the custom adaptor usage and how to bind the data with custom service and the CRUD operations for custom bound data are performed using the methods of [DataAdaptor](https://blazor.syncfusion.com/documentation/data/custom-binding/) abstract class. +The following example demonstrates the custom adaptor usage and how to bind the data with custom service and the CRUD operations for custom bound data are performed using the methods of [DataAdaptor](https://blazor.syncfusion.com/documentation/data/custom-binding) abstract class. ```cshtml