Show column headers when no cards to display

[Florian Mihalits]

Hello.

How can I force the Kanban control to view the column headers (title & number) even when there are no cards to display?

Please see my screenshots. Kanban_ok is like it is with data and like i want it to be even when there is no card to display. Kanban_notok is like it is currently when there is no card to display.

Thanks for your help!

All the best, 

Florian

Attachment: Kanban_dbbc5f52.zip

[Buvana Sathasivam]

Hi Florian,   

  

Thanks for using Syncfusion Products.   

  

The Current behavior of Kanban is to show custom text “No cards to display” when there is no valid matching data found based on key values given. For example:  If filtering was performed and no matching cards found, then Kanban board render with “no cards to display” message.  Your requirement, we think, is to avoid this custom text and to display empty columns without any cards.   

  

We have checked your requirement “To display empty columns with header text instead of “No cards to display" text”. As this feature is not available in our product, we will consider this as a feature request. If you could confirm some more specific details, it would help us to implement the feature in line with your requirement.      

  

Please review the following screen shot 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.  

 

Screenshot: 

 

 

   

Regards,   

Buvana S. 

[Florian Mihalits]

Hello.

Yes, it conforms my needs.

All the best,

Florian

[Buvana Sathasivam]

Hi Florian,   

   

Thank you for helping us define this feature. We have added “Render Kanban column using without data source“ to our feature request list and it will be implemented in any of our releases.    

   

We appreciate your patience until then.  

   

Regards,   

  

Buvana S. 

[Eric Griffith]

I created a temp card and then hide the element to force the rendering of the columns.

[Buvana Sathasivam]

 

Hi Florian,   

  

Thanks for your update.   

  

Yes, you can use the temporary card and hide that element to force the rendering of the empty columns.  We had created the Kanban sample with an empty columns.  In actionComplete event, we have hidden the created dummy card.   

  

  

$("#Kanban").ejKanban({   

     actionComplete: "complete"  // Action complete event   

});   

   

function complete(args){            

     var obj = $("#Kanban").data("ejKanban");   // Created Kanban object   

     obj.getContentTable().find("#1").hide();   // Hide temporary created card   

}   

  

  

JS Playground: http://jsplayground.syncfusion.com/sfqwwttg    

  

Regards,   

Buvana S.   

 

[Mark Lummus]

I am facing a similar problem when there are no cards in a swimlane. I would like an option to keep the swimlane visible even when there are no cards in the swimlane. 

I am trying to build a system using Kanban boards that allows me to move cards within projects (swimlanes) and company goals (columns). I want the swimlanes and columns to be visible even when empty.  

can you add a feature request for that also?

thanks,

Mark

[Buvana Sathasivam]

Hi Florian, 

Thanks for your update. 

We are glad to announce that our feature request “Render Kanban column using without data source” was included in our Essential Studio Volume 4 Release v15.4.0.17.  Please refer the following release notes page. 

Release Notes link: https://help.syncfusion.com/js/release-notes/v15.4.0.17?type=all#ejkanban  

Now, you can use “showColumnWhenEmpty” property for displaying columns when no data is available. 

API link: https://help.syncfusion.com/api/js/ejkanban#members:showcolumnwhenempty  

Query #1: “I would like an option to keep the swimlane visible even when there are no cards in the swimlane.” 

In default, Kanban Swimlane was not visible when no cards in the swimlane.  If you wish to swimlane visible when no cards in the swimlane at initial level, you can use keyFiltering property of load event.   

 

This keyFiltering property used to enable or disable the query of Kanban board.  It provides option to turn off column key filtering.  If keyFiltering property was enabled, current view data shows filtered data based on columns.  If keyFiltering property was disabled, current view data shows all data’s in the data source. 

 

If you set to false on keyFiltering property, the empty swimlane row was rendered on Kanban board at initial rendering.  Because, current view data contains all data source data’s.  Based on this current view data, swimlane row was created at initial level.  

     

Please find the below code.     

Default.html 

$("#Kanban").ejKanban({ 

              

            ………. 

           load: "load",  // load event 

     }); 

 

     function load(args){    // Triggered when Kanban was loaded 

           args.keyFiltering = false; // Disable keyFiltering  

      } 

 

For your convenience, we have prepared a simple sample.  Please find the below link.      

Sample: http://jsplayground.syncfusion.com/uzoqoa4t  

        

To know more about the ejKanban component members.  Please refer the below reference.       

API link: https://help.syncfusion.com/api/js/ejkanban#events:load  

 

    

Please let us know if we have misunderstood.  If so, provide more exact details regarding your requirement so that we can check and provide an appropriate solution.         

  

    

Regards, 

Buvana S.