We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to Filter Dynamically in Kanban

Platform: JavaScript |
Control: ejKanban |
Published Date: March 22, 2017 |
Last Revised Date: May 28, 2019

This Knowledge base explains the way of how to add customized filters to Kanban.

Example

We can achieve the customized filtering by creating filter queries dynamically and passing the query to filterCards method. Set allowFiltering as true.

Let us now see in detail how to achieve the above requirement in Kanban. We need to follow the below steps to achieve this.

Step-1:

Add the custom controls to filter bar using customToolbarItems template. We have added dropdown list control as template.

Refer to the code for control creation - [Kanban.html]

<script id="DynamicFilter" type="text/x-jsrender">
           <table>
           <td><label class="custom">Custom Filter:</label></td>
           <td><input type="text" id="assigneeDdl" /></td>
           </table>
</script>
<style>
        .e-kanban .e-kanbantoolbar .e-customtoolbar .e-tooltxt {
            border: 0px;
        }
</style>
<script type="text/javascript">
        $(function () {
            var data =ej.DataManager(window.kanbanData).executeLocal(ej.Query().take(30));
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    actionComplete: "complete",                   
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    allowFiltering: true,
                   // Custom toolbar item.
                    customToolbarItems: [
    {
        template: "#DynamicFilter"
    }],
                    fields: {
                        content: "Summary",
                        primaryKey: "Id"
                    }
                });
        });
</script>

 

Step-2:

You can convert custom toolbar template controls into Syncfusion control in actionComplete event of Kanban.

var prevOperator, prevAssignee, kbnQuery = ej.Query(), assigneeData = [], ddlData = [];  
// Define Kanban control's action complete event.
        function complete(args) {         
            if (assigneeData.length == 0) {
                //Get the current cards data.
                curData = this.getCurrentJsonData();    
                //Get the Assignee Field data from the current json data
                query = new ej.Query().select("Assignee");   
                assigneeData = ej.DataManager(curData).executeLocal(query);
                assigneeData = ej.dataUtil.mergeSort(ej.dataUtil.distinct(assigneeData));
                //Create an array of object using assignee data to set datasource to Assignee filter Dropdownlist.
                for (var index = 0; index < assigneeData.length; index++)
                    ddlData.push({ text: assigneeData[index], value: assigneeData[index] }); 
                //Add the text "All" to clear the dropdown filter.
                ddlData.push({ text: "All", value: "All" }); 
                $('#assigneeDdl').ejDropDownList({
                    dataSource: ddlData,   //Set Assignee data as datasource.
                    width: "150px",
                    watermarkText: "Assignee Filters",
                    fields: { text: "text", value: "text" },
                    change: "ddlChange",
                });
            }
        }

 

 

Step-3:

Create and update the queries for the filtering criteria and pass it as argument to `filterCards` method.

        function ddlChange(args) {
            var kanbanObj = $("#Kanban").data("ejKanban"), operator, assingee;
            if (!ej.isNullOrUndefined(prevOperator) && !ej.isNullOrUndefined(prevAssignee)) {
                removeDdlPredicate(kbnQuery.queries[0].e.predicates, prevOperator, prevAssignee);
                kanbanObj.KanbanFilter.clearFilter();
            }
            operator = ej.FilterOperators.equal;
            assingee = args.text;
            if (assingee != "All") {
                var query = ej.Query().where(ej.Predicate("Assignee", operator, assingee, true));  
                //Form filter query for assignees dynamically
                if (kbnQuery.queries.length > 0 && !ej.isNullOrUndefined(kbnQuery.queries[0].e.predicates))
                    kbnQuery.queries[0].e.predicates.push(new ej.Predicate("Assignee", operator, assingee, true));
                else {
                    var predicates = [];
                    predicates.push(new ej.Predicate("Assignee", operator, assingee, true));
                    kbnQuery.where(ej.Predicate["and"](predicates))
                }
                kanbanObj.KanbanFilter.filterCards(kbnQuery);
                //prevOperator,prevAssignee to clear previously selected Ddl filter.
                prevOperator = operator;
                prevAssignee = assingee;  
            }
        }
        function removeDdlPredicate(data, operator, assingee) {
            for (var i = 0; i < data.length; i++) {
                if (!ej.isNullOrUndefined(data[i].field)) {
                    var predicate = data[i];
                    if (predicate.field == "Assignee" && predicate.value == assingee && predicate.operator == operator) {
                        data.splice(i, 1);
                        break;
                    }
                }
            }
        }

 

 

Refer to the code for control creation - [Kanban.cshtml]

 

[In View]
<script id="DynamicFilter" type="text/x-jsrender">
        <table>
        <td><label class="custom">Custom Filter:</label></td>
        <td><input type="text" id="assigneeDdl" /></td>
        </table>
    </script>
        @(Html.EJ().Kanban("Kanban")
                   .DataSource((IEnumerable<object>)ViewBag.datasource)
                   .Columns(col =>
                   {
                       col.HeaderText("Backlog").Key("Open").Add();
                       col.HeaderText("In Progress").Key("InProgress").Add();
                       col.HeaderText("Done").Key("Close").Add();
                   })
                  .AllowFiltering(true)
                  .CustomToolbarItems(tool =>
                   {
                       tool.Template("#DynamicFilter").Add();
                   })
                  .KeyField("Status")
                  .ClientSideEvents(eve =>
                   {
                       eve.ActionComplete("complete"); 
                   })
                  .Fields(field =>
                  {
                      field.Content("Summary").PrimaryKey("Id");
                  })
        )
       <style>
        .e-kanban .e-kanbantoolbar .e-customtoolbar .e-tooltxt {
            border: 0px;
        }
       </style>

 

Refer to the code for control creation - [Kanban.aspx]

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <ej:Kanban ID="Kanban" runat="server" KeyField="Status" AllowFiltering="true">
          <Columns>
              <ej:KanbanColumn HeaderText="Backlog" Key="Open" />
              <ej:KanbanColumn HeaderText="In Progress" Key="InProgress" />
              <ej:KanbanColumn HeaderText="Done" Key="Close" />
          </Columns>
          <CustomToolBarItems>
             <ej:KanbanCustomToolBarItems Template="#DynamicFilter" />
          </CustomToolBarItems>
          <Fields Content="Summary" PrimaryKey="Id" />
          <ClientSideEvents ActionComplete="complete" />
     </ej:Kanban>
</asp:Content>
<asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptSection">
  <script id="DynamicFilter" type="text/x-jsrender">
       <table>
       <td><label class="custom">Custom Filter:</label></td>
       <td><input type="text" id="assigneeDdl" /></td>
       </table>
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="StyleSection" runat="server">
    <style>
        .e-kanban .e-kanbantoolbar .e-customtoolbar .e-tooltxt {
            border: 0px;
        }
    </style>
</asp:Content>

 

 

Result:

Before filter

Before filter

After Filter

After Filter

JS Playground Sample Link:

http://jsplayground.syncfusion.com/vdk4uncd

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon