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. Image for the cookie policy date

Some issues about edit and filter


I have some Kanban issues need your support.

The first issue is I want the Kanban edit mode can use Inline mode like Grid control inline edit mode.

Base on it, the second issue is if one of the display property is boolean, I hope it could display as a checkbox.

This is because when the kanban card's display propertys are not too much, it's not necessary use dialog or externalform.

And the third issue of Kanban is about the filters button, I want it could be made from user not from the server.

For example, I use this code to filter the card date property:

.FilterSettings(filter =>
    filter.Text("Before 2/20").Query("new ej.Query().where('Date', 'lessthan', '02/20/2014')").Add();

But I want the filter button could be added or deleted, and the Query date could be input.

Thanks a lot and looking forward to your reply.

Best regards.

5 Replies

BS Buvana Sathasivam Syncfusion Team August 28, 2017 12:48 PM UTC

Hi Jacob, 

Thanks for using Syncfusion products. 

Query #1:  “The first issue is I want the Kanban edit mode can use Inline mode like Grid control inline edit mode.  Base on it, the second issue is if one of the display property is boolean, I hope it could display as a checkbox.” 

We have analyzed your requirement for “Kanban inline edit mode". As this feature is not available in our product, we will consider this as a feature request. If you could confirm some specific details, it would help us to implement the feature in line with your requirement.  
Please review the following screen shot and description of the feature and let us know if it conforms your requirement. If our definition of this feature is different from your requirement, then let us know the specific details, so that we can work towards fulfilling your requirement. 

Description: If you click card edit button, then inside the card all editing fields are shown an editable text box except primary key value.  If editing fields specified as a boolean, then show the check box when you click the card edit button. 

Query #2:  “Kanban is about the filters button, I want it could be made from user not from the server.” 

We had created Kanban sample with custom filter.  We have created text boxes and buttons in Kanban custom toolbar items using actionComplete event.  We will get current text box values and pass these values into a query and passed this query into filterCards public method when you will click “Filter” button.  We will clear the filtering using “clearFilter” public method when you click “Clear” button.  Please find the below code. 


                            .AllowFiltering(true)        // Enabled filtering 
             .CustomToolbarItems(tool => 
                tool.Template("#DynamicFilter").Add();  // template to render custom toolbar items 
             .ClientSideEvents(eve => eve.ActionComplete("complete")) // Action Complete event 


    var ddlData = ["equal", "notequal"]; 
    function complete(args) { 
            $('#operator').ejDropDownList({// Created dropdown list for operator 
                dataSource: ddlData,   
                width: "150px", 
                watermarkText: "Operators", 
                fields: { text: "text", value: "text" } 
            $('#fieldName').ejMaskEdit({ inputMode: ej.InputMode.Text, watermarkText: "Field Name"}); // Created input text box 
            $('#value').ejMaskEdit({ inputMode: ej.InputMode.Text, watermarkText: "Value"});// Created input text box 
            $('#button').ejButton({ click: onClick, width: "100px" });// Created button 
            $('#clear').ejButton({ click: clear, width: "100px"});   
    function onClick(args) { // This event triggered when filter button click 
        var kanbanObj = $("#Kanban").data("ejKanban"), kbnQuery = ej.Query(); 
        var queryField = $("#fieldName").val(), queryOperator = $("#operator").val(), queryValue = $("#value").val();// Get input values 
        if (kbnQuery.queries.length > 0 && !ej.isNullOrUndefined(kbnQuery.queries[0].e.predicates)) 
            kbnQuery.queries[0].e.predicates.push(new ej.Predicate(queryField, queryOperator, queryValue, true)); 
        else { 
            var predicates = []; 
            predicates.push(new ej.Predicate(queryField, queryOperator, queryValue, true));  // Created ej.Predicate 
            kbnQuery.where(ej.Predicate["and"](predicates)) // Add where query 
        kanbanObj.KanbanFilter.filterCards(kbnQuery) // Passed query into filterCards public method 
    function clear() { // This event triggered when clear button click 
        var kanbanObj = $("#Kanban").data("ejKanban"); 
        $("#operator").ejDropDownList({text: ""}); 
        kanbanObj.KanbanFilter.clearFilter();// Clear filter 
<script id="DynamicFilter" type="text/x-jsrender"> // Custom tool bar template 
        <td><label class="custom">Custom Filter:</label></td> 
        <td><input type="text" id="fieldName" /></td> 
        <td><input type="text" id="operator" /></td> 
        <td><input type="text" id="value" /></td><td>  </td> 
        <td><button type="button" id="button">Filter</button></td> 
        <td><button type="button" id="clear">Clear</button></td> 

Please refer to the following KB link: 

API links

Buvana S. 


JA Jacob August 29, 2017 08:12 AM UTC

Hello Buvana,

Thank you for your advice and give me this opportunity to explain my issue.

In the Query #1 case, the card item object have 3 properties need to display.

Please refer to the attached file KanbanInline01.png, this is the default mode and the card is not be expanded.

And when expand the card, it become the Inline edit mode.

Please refer to the attached file KanbanInline02.png, the title use input type text, and the discription use textarea.

The reason why I want the expand icon which toggles the edit mode is because the properties of the card are are too little.

The checkbox display "isblock" property, and this function will not be affected by the card is expanded or not.

When I select the checkbox, then the card will be block and it can't be dragged and expanded, like the attached file KanbanInline03.png.

The whole layout of this case please refer to the attached file KanbanInlineLayout.png.

Thanks a lot and the Query#2 is very helpful.

Looking forward to your reply.

Best regards.


Attachment: KanbanInline_88d9b42.zip

BS Buvana Sathasivam Syncfusion Team August 30, 2017 10:18 AM UTC

Hi Jacob,  
Thanks for your update and for helping us define this feature.  We have added “Kanban inline edit mode” to our feature request list and it will be implemented in one of our releases.  We would appreciate your patience until then.       
Buvana S.  

JA Jacob September 1, 2017 02:06 AM UTC

Hello Buvana,

Thanks your reply about the inline edit.

I have been research kanban these days, and I have some new issues.


Query of SwimlaneSettings:

                  .SwimlaneSettings(swimSettings =>

I found it must have more than one columns and will worked.


Query of EditSettings:

                  .EditItems(e =>

If this kanban ave no card, when I add a new one the Dropdown menu just have one option.


Query of hide card class when edit:

The EditItems must include same class like the datasource, but I want hide some property.

For example, hide the Fields setting of PrimaryKey.

I can use the Fields setting of Title to display the card name.

So the PrimaryKey is not necessary to be shown either in EditDialog or AddDialog.


Thanks a lot and looking forward to your reply.

Best regards.

BS Buvana Sathasivam Syncfusion Team September 4, 2017 12:02 PM UTC

Hi Jacob, 

Sorry for the inconvenience caused. 

We were able to reproduce the problem and have logged defect report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates 

Buvana S. 

Live Chat Icon For mobile
Up arrow icon