Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions blazor/kanban/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
| -- | -- |
Expand Down Expand Up @@ -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

Expand Down
14 changes: 7 additions & 7 deletions blazor/kanban/cards.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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

Expand Down
20 changes: 10 additions & 10 deletions blazor/kanban/columns.md
Original file line number Diff line number Diff line change
Expand Up @@ -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](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 mandatory to render the columns in 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

Expand Down Expand Up @@ -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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField) property.

```cshtml

Expand Down Expand Up @@ -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" %}
Expand Down Expand Up @@ -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`.

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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 [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.

Expand Down
Loading