Getting Started

15 Dec 201819 minutes to read

Preparing HTML document

The Kanban control has the following list of external JavaScript dependencies.

The required ReactJS script dependencies as follows. And you can also refer React to know more about react js.

Refer to the internal dependencies in the following table.

Files Description/Usage
ej.core.min.js It is referred always before using all the JS controls.
ej.data.min.js Used to handle data operation and is used while binding data to the JS controls.
ej.touch.min.js It is referred when using touch functionalities in Kanban.
ej.draggable.min.js It is referred when using drag and drop functionalities in Kanban.
ej.kanban.min.js The Kanban’s main file.
ej.globalize.min.js It is referred when using localization in Kanban.
ej.scroller.min.js It is referred when scrolling is used in the Kanban.
ej.waitingpopup.min.js It is referred when waiting popup used.
ej.dropdownlist.min.js These files are used while enable the Editing feature in the Kanban.
ej.dialog.min.js
ej.button.min.js
ej.datepicker.min.js
ej.datetimepicker.min.js
ej.editor.min.js
ej.toolbar.min.js These files are used while enable the Filtering feature in the Kanban.
ej.menu.min.js These files are used while enable the context menu feature in the Kanban.
ej.checkbox.min.js
ej.rte.min.js These files are used while using the cell edit type as RTE in the Kanban.

To get started, you can use the ej.web.all.min.js file that encapsulates all the ej controls and frameworks in one single file. So the complete boilerplate code is

  • html
  • <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Essential Studio for JavaScript">
        <meta name="author" content="Syncfusion">
        <title>Getting Started for Kanban React JS</title>
        <!-- Essential Studio for JavaScript  theme reference -->
        <link href="http://cdn.syncfusion.com/19.3.0.43/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
        <!-- Essential Studio for JavaScript  script references -->
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.0.0.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/react.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/react-dom.min.js"></script>
        <script src="http://cdn.syncfusion.com/19.3.0.43/js/web/ej.web.all.min.js"></script>
        <script src="http://cdn.syncfusion.com/19.3.0.43/js/common/ej.web.react.min.js"></script>
        <!-- Add your custom scripts here -->
        </head>
        <body>
        </body>
        </html>

    NOTE

    1. In production, we highly recommend you to use our custom script generator to create custom script file with required controls and its dependencies only. Also to reduce the file size further please use GZip compression in your server.
    2. For themes, you can use the ej.web.all.min.css CDN link from the code snippet given. To add the themes in your application, please refer to this link.

    Create a Kanban

    Control can be initialized in two ways.

    • Using jsx Template
    • Without using jsx Template

    Using jsx Template

    By using the jsx template, we can create the html file and jsx file. The .jsx file can be convert to .js file and it can be referred in html page.

    Please refer to the code of HTML file.

  • html
  • <div id="kanbanBoard-default"></div>
        <script src="app/kanbanBoard/default.js"></script>

    Kanban control can be initialized with the following in HTML document.

  • html
  • ReactDOM.render(
                <EJ.Kanban >
                          <columns>
                              <column headerText="Backlog" />
                              <column headerText="In Progress" />
                              <column headerText="Done" />
                          </columns>
                </EJ.Kanban>,
                document.getElementById('kanbanBoard-default')
            );

    Getting Started

    Data Binding

    Data binding in the Kanban is achieved by using the ej.DataManager that supports both RESTful JSON data services binding and local JSON array binding. To set the data source to Kanban, the dataSource property is assigned with the instance of the ej.DataManger.

    For demonstration purpose, Northwind OData service is used in this tutorial. Refer to the following code example.

  • html
  • var dataManager = new ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Tasks");        
            ReactDOM.render(
                <EJ.Kanban dataSource = {dataManager} >
                          <columns>
                              <column headerText="Backlog" key="Open" />
                              <column headerText="In Progress" key="InProgress" />
                              <column headerText="Done" key="Close"/>
                          </columns>
                </EJ.Kanban>,
                document.getElementById('kanbanBoard-default')
            );

    Data Binding

    NOTE

    ODataAdaptor is the default adaptor used within DataManager. While binding to other web services, proper data adaptor needs to be set for adaptor option of DataManager.

    Mapping Values

    In order to display cards in Kanban control, you need to map the database fields to Kanban cards and columns. The required mapping field are listed as follows

    • keyField - Map the column name to use as key values to columns.
    • columns - Map the corresponding key values of keyField column to each columns
    • fields.content - Map the column name to use as content to cards.
    • fields.primaryKey - Map the column name to use as primary Key.
  • html
  • var dataManager = new ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Tasks");        
            ReactDOM.render(
                <EJ.Kanban dataSource = {dataManager} keyField = "Status" allowTitle={true} fields-content= "Summary" fields-primaryKey = "Id" allowSearching={true} fields-imageUrl="ImgUrl" allowSelection={false} >
                          <columns>
                              <column headerText="Backlog" key="Open" />
                              <column headerText="In Progress" key="InProgress" />
                              <column headerText="Done" key="Close"/>
                          </columns>
                </EJ.Kanban>,
                document.getElementById('kanbanBoard-default')
            );

    Mapping Values

    NOTE

    fields.primaryKey field is mandatory for “Drag and Drop” ,”Selection” and “Editing” Features.

    Enable Swimlane

    Swimlane can be enabled by mapping the fields.swimlaneKey to appropriate column name in dataSource. This enables the grouping of the cards based on the mapped column values.

  • html
  • var dataManager = new ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Tasks");        
            ReactDOM.render(
                <EJ.Kanban dataSource = {dataManager} keyField = "Status" allowTitle={true} fields-content= "Summary" fields-primaryKey = "Id" fields-swimlaneKey = "Assignee" allowSearching={true} fields-imageUrl="ImgUrl" allowSelection={false} >
                          <columns>
                              <column headerText="Backlog" key="Open" />
                              <column headerText="In Progress" key="InProgress" />
                              <column headerText="Done" key="Close"/>
                          </columns>
                </EJ.Kanban>,
                document.getElementById('kanbanBoard-default')
            );

    Swim lane

    Adding Filters

    Filters allows to filter the collection of cards from dataSource which meets the predefined query in the filters collection. To enable filtering, define filterSettings collection with display text and ej.Query.

  • html
  • var dataManager = new ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Tasks");
            var filter = [
                       { text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet Leverling"), description: "Displays issues which matches the assignee as 'Janet Leverling'" },
                       { text: "Andrew Issues", query: new ej.Query().where("Assignee", "equal", "Andrew Fuller"), description: "Displays issues which matches the assignee as 'Andrew Fuller'" }
            ];
            ReactDOM.render(
                <EJ.Kanban dataSource = {dataManager} keyField = "Status" allowTitle={true} fields-content= "Summary" fields-primaryKey = "Id"  fields-swimlaneKey = "Assignee" allowSearching={true} fields-imageUrl="ImgUrl" allowSelection={false} filterSettings={filter}>
                          <columns>
                              <column headerText="Backlog" key="Open" />
                              <column headerText="In Progress" key="InProgress" />
                              <column headerText="Done" key="Close"/>
                          </columns>
                </EJ.Kanban>,
                document.getElementById('kanbanBoard-default')
            );

    Filters

    Without using jsx Template

    The Kanban can be created from a HTML DIV element with the HTML id attribute set to it. Refer to the following code example.

  • html
  • <body>
          <div id="kanbanboard-default"></div>
        </body>

    Initialize the Kanban control by adding the following script code to the body section of the HTML document.

  • html
  • <div id="kanbanboard-default"></div>
        <script type="text/javascript">
            var dataManager = new ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Tasks");
            var filter = [
                { text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet Leverling"), description: "Displays issues which matches the assignee as 'Janet Leverling'" },
                { text: "Open Issues", query: new ej.Query().where("Status", "equal", "Open"), description: "Displays issues which matches the status as 'Open'" }
            ];
            ReactDOM.render(
            React.createElement(EJ.Kanban,
                {
                    dataSource: data,
                    keyField: "Status",
                    "fields-content": "Summary",
                    "fields-primaryKey": "Id",
                    "fields-swimlaneKey": "Assignee",
                    filterSettings: filter
                },
                React.createElement("columns", null,
                                React.createElement("column", { headerText: "Backlog", key: "Open" }),
                                React.createElement("column", { headerText: "In Progress", key: "InProgress" }),
                                React.createElement("column", { headerText: "Done", key: "Close" })
                            )
                 ),
                 document.getElementById('kanbanBoard-default')
            );        
        </script>

    Without react template