|
columnRenderer
|
string
|
null
|
Sets or gets the columnRenderer property.
<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>
|
|
columns
|
List<string>
|
null
|
Sets or gets the columns property.
<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>
|
|
connectWith
|
string
|
null
|
Sets or gets the connectWith property.
<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>
|
|
headerHeight
|
int
|
30
|
Sets or gets the headerHeight property.
<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>
|
|
headerWidth
|
int
|
30
|
Sets or gets the headerWidth property.
<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>
|
|
height
|
int
|
400
|
Sets or gets the height property.
<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>
|
|
itemRenderer
|
string
|
null
|
Sets or gets the itemRenderer property.
<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>
|
|
ready
|
string
|
null
|
Sets or gets the ready property.
<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>
|
|
rtl
|
bool
|
false
|
Sets or gets the rtl property.
<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>
|
|
source
|
List<string>
|
null
|
Sets or gets the source property.
<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>
|
|
resources
|
List<string>
|
null
|
Sets or gets the resources property.
<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>
|
|
template
|
string
|
false
|
Sets or gets the template property.
<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>
|
|
templateContent
|
string
|
null
|
Sets or gets the templateContent property.
<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>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<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>
|
|
width
|
int
|
600
|
Sets or gets the width property.
<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>
|
|
|
|
columnAttrClicked
|
Event
|
|
Code examples
Bind to the columnAttrClicked event of jqxKanban.
<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) {
|
|
columnCollapsed
|
Event
|
|
Code examples
Bind to the columnCollapsed event of jqxKanban.
<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) {
|
|
columnExpanded
|
Event
|
|
Code examples
Bind to the columnExpanded event of jqxKanban.
<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) {
|
|
itemAttrClicked
|
Event
|
|
Code examples
Bind to the itemAttrClicked event of jqxKanban.
<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) {
|
|
itemMoved
|
Event
|
|
Code examples
Bind to the itemMoved event of jqxKanban.
<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) {
|
|
|
|
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]);
|
|
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) {
|
|
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"]();
|
|
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"]();
|
|
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"]();
|
|
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);
|
|
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]);
|