| columnRenderer | string | null |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Kanban Example";
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<script>
function ready() {
}
function itemRenderer(element, item, resource)
{
var elements = document.getElementsByClassName('.jqx-kanban-item-color-status');
for(var element in elements) {
elements[element].innerHTML = "<span style='line-height: 23px; margin-left: 5px; color:white;'>" + resource.name + "</span>";
}
}
function columnRenderer(element, collapsedElement, column) {
}
</script>
<jqx-kanban item-renderer="itemRenderer()" ready="ready()" column-renderer="columnRenderer()" {{configuration}}>
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| columns | List<string> | null |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| connectWith | string | null |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban connect-with="#jqxKanban2" source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| headerHeight | int | 30 |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban header-height="50" source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| headerWidth | int | 30 |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban header-width="50" source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| height | int | 400 |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban height="500" source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| itemRenderer | string | null |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Kanban Example";
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<script>
function ready() {
}
function itemRenderer(element, item, resource)
{
var elements = document.getElementsByClassName('.jqx-kanban-item-color-status');
for(var element in elements) {
elements[element].innerHTML = "<span style='line-height: 23px; margin-left: 5px; color:white;'>" + resource.name + "</span>";
}
}
function columnRenderer(element, collapsedElement, column) {
}
</script>
<jqx-kanban item-renderer="itemRenderer()" ready="ready()" column-renderer="columnRenderer()" {{configuration}}>
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| ready | string | null |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Kanban Example";
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<script>
function ready() {
}
function itemRenderer(element, item, resource)
{
var elements = document.getElementsByClassName('.jqx-kanban-item-color-status');
for(var element in elements) {
elements[element].innerHTML = "<span style='line-height: 23px; margin-left: 5px; color:white;'>" + resource.name + "</span>";
}
}
function columnRenderer(element, collapsedElement, column) {
}
</script>
<jqx-kanban item-renderer="itemRenderer()" ready="ready()" column-renderer="columnRenderer()" {{configuration}}>
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| rtl | bool | false |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban rtl="true" source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| source | List<string> | null |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| resources | List<string> | null |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban resources="Model.KanbanResources" source="Model.KanbanDataItems" mappings="mappings">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| template | string | false |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Kanban Example";
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
string template = "<div class='jqx-kanban-item' id=''>"
+ "<div class='jqx-kanban-item-color-status'></div>"
+ "<div style='display: none;' class='jqx-kanban-item-avatar'></div>"
+ "<div class='jqx-icon jqx-icon-close-white jqx-kanban-item-template-content jqx-kanban-template-icon'></div>"
+ "<div class='jqx-kanban-item-text'></div>"
+ "<div style='display: none;' class='jqx-kanban-item-footer'></div>";
string templateContent = "{ status: \"new\", text: \"New text\", content: \"New content\", tags: \"New, taggs\", color: \"green\", resourceId: 0, className: \"\"}";
}
<jqx-kanban template="template" template-content="templateContent" {{configuration}}>
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| templateContent | string | null |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC Kanban Example";
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
string template = "<div class='jqx-kanban-item' id=''>"
+ "<div class='jqx-kanban-item-color-status'></div>"
+ "<div style='display: none;' class='jqx-kanban-item-avatar'></div>"
+ "<div class='jqx-icon jqx-icon-close-white jqx-kanban-item-template-content jqx-kanban-template-icon'></div>"
+ "<div class='jqx-kanban-item-text'></div>"
+ "<div style='display: none;' class='jqx-kanban-item-footer'></div>";
string templateContent = "{ status: \"new\", text: \"New text\", content: \"New content\", tags: \"New, taggs\", color: \"green\", resourceId: 0, className: \"\"}";
}
<jqx-kanban template="template" template-content="templateContent" {{configuration}}>
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| theme | string | '' |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban theme="energyblue" source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
| width | int | 600 |
|
Sets or gets the <script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban width="600" source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
|
||
Events |
||
| columnAttrClicked | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban on-column-attr-clicked="eventHandler()">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
| columnCollapsed | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban on-column-collapsed="eventHandler()">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
| columnExpanded | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban on-column-expanded="eventHandler()">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
| itemAttrClicked | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban on-item-attr-clicked="eventHandler()">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
| itemMoved | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban on-item-moved="eventHandler()">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
||
Methods |
||
| addItem | Method | |
<script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings" instance="getInstance()">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["addItem"](0,[object Object]);
}
</script>
}
|
||
| destroy | Method | |
<script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings" instance="getInstance()">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["destroy"]();
}
</script>
}
|
||
| getColumn | Method | |
<script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings" instance="getInstance()">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
var result = instance["getColumn"]();
}
</script>
}
|
||
| getColumnItems | Method | |
<script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings" instance="getInstance()">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
var result = instance["getColumnItems"]();
}
</script>
}
|
||
| getItems | Method | |
<script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings" instance="getInstance()">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
var result = instance["getItems"]();
}
</script>
}
|
||
| removeItem | Method | |
<script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings" instance="getInstance()">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["removeItem"](0);
}
</script>
}
|
||
| updateItem | Method | |
<script src="~/jqwidgets/jqxkanban.js"></script>
<script src="~/jqwidgets/jqxsortable.js"></script>
@model jQWidgets.AspNet.Core.Models.jQWidgetsDemosContext
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
Dictionary<string, string> mappings = new Dictionary<string, string>();
mappings["Id"] = "id";
mappings["State"] = "status";
mappings["Text"] = "label";
mappings["Label"] = "label";
mappings["Tags"] = "tags";
mappings["Hex"] = "color";
mappings["ResourceId"] = "resourceId";
mappings["Name"] = "name";
mappings["Image"] = "image";
}
<jqx-kanban source="Model.KanbanDataItems" resources="Model.KanbanResources" mappings="mappings" instance="getInstance()">
<jqx-kanban-columns>
<jqx-kanban-column text="Backlog" dataField="New"></jqx-kanban-column>
<jqx-kanban-column text="In Progress" dataField="Work"></jqx-kanban-column>
<jqx-kanban-column text="Done" dataField="Done"></jqx-kanban-column>
</jqx-kanban-columns>
</jqx-kanban>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["updateItem"](0,[object Object]);
}
</script>
}
|
||