Validation in Vue Kanban component
16 Mar 20232 minutes to read
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.
There are two types of constraints:
- Column
- Swimlane
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 colour with validation fails.
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 colour with validation fails.
<template>
<div id="app">
<ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData"
:cardSettings="cardSettings" :enableTooltip=true>
<e-columns>
<e-column headerText="To Do" keyField="Open" minCount="6"></e-column>
<e-column headerText="In Progress" keyField="InProgress" maxCount="5"></e-column>
<e-column headerText="Testing" keyField="Testing" maxCount="4" minCount="3"></e-column>
<e-column headerText="Done" keyField="Close"></e-column>
</e-columns>
</ejs-kanban>
</div>
</template>
<script>
import Vue from "vue";
import { KanbanPlugin } from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource.js';
Vue.use(KanbanPlugin);
export default {
data: function() {
return {
kanbanData: extend([], kanbanData, null, true),
cardSettings: {
contentField: "Summary",
headerField: "Id",
}
};
},
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/material.css';
</style>