ASP .NET Core MVC Documentation
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
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
@{
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 bind to an event of a UI Component, you can use<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>}
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>}