How do I controll collapsibleCards?

[Jacob]

Hello,

There have three questions about collapsiblecards.

The example URL: http://js.syncfusion.com/demos/web/#!/bootstrap/kanban/collapsiblecards


#Q1: How do I controll the collapsible cards should be hide or not when the kanban refreshed?

The default setting is the collapsible cards will hide the object which Status is "Close".

So if I check other card set the Status to Close, the Kanban will refresh and hide all collapsible cards even I was open it to show.

I need a parameter when the kanban refresh will load it to controll the collapsibleCards should be showed or hidden.

If it could target different columns is great.

For example, when kanban refresh set the "Andrew" column's collapsible cards to "Hide" and set the "Janet", "Nancy" column collapsible cards to "Show".


#Q2: How do I controll the collapsible cards title?

The default title string is "Hide" and "Show".

I want to know how should I set the "Hide" and "Show" string to other words.


#Q3: Is the collapsibleCards's field setting could set other attribute?

The example code: collapsibleCards: { field: "Status", key: "Close" }

I found the "field" setting only accept "Status" attribute.

If I set it to other attribute, the object which should be collapsible card will disappear in this kanban.

In other words the kanban object must have an attribute named "Status".

Is there possible mapping other attribute to collapsibleCards's field "Status"?


Thank you,

Best regards.

[Buvana Sathasivam]

Hi Jacob,   

  

Thanks for using Syncfusion Products.   

  

Query #1: “How do I controll the collapsible cards should be hide or not when the kanban refreshed?”   

  

We have analyzed your reported query.  By default, all collapsible cards are hidden at initial rendering that is collapsed state.  If you wish to show particular column collapsible card, you need to remove the e-hide class on toggle card element and removed e-toggle-expand class and added e-toggle-collapse class on the toggle icon element using create event.  In the below code, we have shown the first column collapsible cards.   

  

Default.html   

  

$("#Kanban").ejKanban(   

            {   

             ………….   

         create: "create"  // Create event   

       });         

   

       function create(args){  // Triggered after the Kanban board is created   

                var area =  this.kanbanContent.find(".e-toggle-area");  // Get toggle area   

                $(area.find(".e-toggle-cards")[0]).removeClass("e-hide");  // Remove hide class on toggle cards element   

                $(area.find(".e-toggle-icon .e-icon")[0]).removeClass("e-toggle-expand").addClass("e-toggle-collapse"); // Remove and add class of icon element   

              }           

    

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

  

JS Playground:  http://jsplayground.syncfusion.com/5mep4riv    

  

Query #2: “How do I controll the collapsible cards title?”   

  

We have used collapsible cards title as localization text.  So, you can easily change the title as per your requirement.  We have changed collapsible cards title using load event.  Please find the below code.   

  

Default.html   

   

$("#Kanban").ejKanban(   

            {   

       ……………   

       load: "load" // load event   

             });   

   

              function load(args){   // Triggered when Kanban cards load   

                 this.localizedLabels.Show = "Collapsible Card Show";  // Change the title as per your wish   

                 this.localizedLabels.Hide = "Collapsible Card Hide";   

              }   

  

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

  

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

  

Query #3: “Is the collapsibleCards's field setting could set other attribute?”   

   

Now, collapsibleCard field settings aren’t supported on other attributes.  We have logged this issue as a bug and the fix will be available in any one of our upcoming releases.    

   

  

Regards,   

Buvana S.   

 

[Jacob]

Hello,

Thanks a lot, very helpful and solve the issue.

And there have a new issue need your help, it's about kanban in dialog.

If add a function:

        $('#testbtn').click(function () {
            $("#Kanban").ejDialog();
        });

Render this kanban in dialog, it will success and worked well.

But if we drag this dialog and move the position, and then drag this kanban cards will failed.

The issue only happened when I move the dialog, I tried refresh the kanban or datasource but doesn't work.

Did you have solution to fix the card drag failed when kanban in dialog after the dialog moved?

Thank you,

Best regards.

[Buvana Sathasivam]

Hi Jacob,   

  

We have rendered Kanban control inside the dialog control.  After moving dialog control, Kanban drop operation are not performing properly.  So, we have internally log the issue “Kanban card drop operation is not working properly after moving dialog when Kanban rendered inside the dialog control”.  This issue will be fixed and included in volume 1 SP-1, 2018 release.      

  

Regards,   

Buvana S