How to Filter Dynamically in Kanban?

3 mins read

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