Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxKanban.

jqx-widget - applied to jqxKanban.
jqx-kanban - applied to jqxKanban.
jqx-kanban-column - applied to jqxKanban columns.
jqx-kanban-column-header - applied to the column headers.
jqx-widget-header - applied to the column headers.
jqx-kanban-column-header-custom-button - applied to the custom button element in the column.
jqx-kanban-column-container - applied to the column container elements.
jqx-kanban-column-header-button - applied to the button element in the column.
jqx-kanban-column-header-collapsed - applied to collapsed column headers.
jqx-kanban-column-header-title - applied to column header's title element.
jqx-kanban-column-header-status - applied to column header's status element.
jqx-kanban-item - applied to jqxKanban items.
jqx-widget-content - applied to jqxKanban items.
jqx-kanban-item-keyword - applied to jqxKanban item's tags.
jqx-fill-state-normal - applied to jqxKanban item's tags.
jqx-kanban-item-color-status - applied to jqxKanban item's status element.
jqx-kanban-item-color-status-rtl - applied to jqxKanban item's status element in rtl mode.
jqx-kanban-item-avatar - applied to jqxKanban's avatar.
jqx-kanban-item-avatar-rtl - applied to jqxKanban's avatar in rtl mode.
jqx-kanban-item-footer - applied to jqxKanban item's footer.
jqx-kanban-item-text - applied to jqxKanban item's text element.
jqx-fill-state-disabled - applied to the jqxKanban when it is disabled.

When you create a custom style with colors and backgrounds for jqxKanban, you need to do the following:

Add the above CSS classes related to jqxKanban
After each CSS class, add your theme name.
For example:
jqx-kanban-summer

To apply your custom style to jqxKanban, you need to set its 'theme' property(option) to point to your theme name string.

<script type="text/javascript">
    $(document).ready(function () {
        $('#kanban').jqxKanban({
            resources: resourcesAdapterFunc(),
            source: dataAdapter,
            theme: "energyblue",
            columns: [
                { text: "Backlog", dataField: "new" },
                { text: "In Progress", dataField: "work" },
                { text: "Done", dataField: "done" }
            ]
        });
    });
</script>

The sample below demonstrates how to set the 'Summer' theme to jqxKanban.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Javascript Kanban</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsortable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxkanban.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var fields = [
                     { name: "id", type: "string" },
                     { name: "status", map: "state", type: "string" },
                     { name: "text", map: "label", type: "string" },
                     { name: "tags", type: "string" },
                     { name: "color", map: "hex", type: "string" },
                     { name: "resourceId", type: "number" }
            ];
            var source =
             {
                 localData: [
                          { id: "1161", state: "new", label: "Combine Orders", tags: "orders, combine", hex: "#5dc3f0", resourceId: 3 },
                          { id: "1645", state: "work", label: "Change Billing Address", tags: "billing", hex: "#f19b60", resourceId: 1 },
                          { id: "9213", state: "new", label: "One item added to the cart", tags: "cart", hex: "#5dc3f0", resourceId: 3 },
                          { id: "6546", state: "done", label: "Edit Item Price", tags: "price, edit", hex: "#5dc3f0", resourceId: 4 },
                          { id: "9034", state: "new", label: "Login 404 issue", tags: "issue, login", hex: "#6bbd49" }
                 ],
                 dataType: "array",
                 dataFields: fields
             };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var resourcesAdapterFunc = function () {
                var resourcesSource =
                {
                    localData: [
                          { id: 0, name: "No name", image: "../../jqwidgets/styles/images/common.png", common: true },
                          { id: 1, name: "Andrew Fuller", image: "../../images/andrew.png" },
                          { id: 2, name: "Janet Leverling", image: "../../images/janet.png" },
                          { id: 3, name: "Steven Buchanan", image: "../../images/steven.png" },
                          { id: 4, name: "Nancy Davolio", image: "../../images/nancy.png" },
                          { id: 5, name: "Michael Buchanan", image: "../../images/Michael.png" },
                          { id: 6, name: "Margaret Buchanan", image: "../../images/margaret.png" },
                          { id: 7, name: "Robert Buchanan", image: "../../images/robert.png" },
                          { id: 8, name: "Laura Buchanan", image: "../../images/Laura.png" },
                          { id: 9, name: "Laura Buchanan", image: "../../images/Anne.png" }
                    ],
                    dataType: "array",
                    dataFields: [
                         { name: "id", type: "number" },
                         { name: "name", type: "string" },
                         { name: "image", type: "string" },
                         { name: "common", type: "boolean" }
                    ]
                };
                var resourcesDataAdapter = new $.jqx.dataAdapter(resourcesSource);
                return resourcesDataAdapter;
            }
            $('#kanban').jqxKanban({
                resources: resourcesAdapterFunc(),
                source: dataAdapter,
                theme: "energyblue",
                columns: [
                    { text: "Backlog", dataField: "new" },
                    { text: "In Progress", dataField: "work" },
                    { text: "Done", dataField: "done" }
                ]
            }); 
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
      <div id="kanban"></div>  
</body>
</html>