Getting Started

jqxKanban is a UI Component which can be used to implement the kanban method for a project.

Every ASP .NET Core Mvc Tag Helper from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

jqxKanban requires the following files:

• CSS

• jqx.base.css

• Javascript

• jqxcore.js
• jqxkanban.js
• jqxsortable.js

The next step is to create html element within the body of the html document and add the initialization attributes.

<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>

To call a function(method), you need to pass the method name and parameters(if any) in the UI component’s instance.

<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>									
}

To bind to an event of a UI Component, you can use on-event-type syntax. The example code below demonstrates how to bind to an event.

<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>									
}

Basic Sample