Controlling Card Height and Collapsed State

Question

Are there samples on how to achieve the following request:

Kanban Cards are collapsed to a specific height on page load.

I looked on the Javascript API and could not find any member information on cards that controlled its height or collapse state. I do suspect but have not seen any samples to convince, that this could be done with a card template.

Thank you for your assistance,

Matt

Buvana Sathasivam · Answer

Hi Matthew,

Thanks for using Syncfusion Products.

By default, we have not set any height for collapsed cards. It sets automatically based on card’s child elements. If you wish to change collapsed card height, you can follow the below work around solution. We have changed collapsed card height by setting height property of collapsed card child element(e-text). Please find the below code.

<style>

.e-kanban .e-kanbancard.e-collapsedcard .e-text {

height: 30px; // Set height of card text when card was collapsed state

}

</style>

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

By default, we unable to achieve card collapsed support in card template. Because, we have not rendered card header on card template state.

Regards,

Buvana S.

Matthew Harrison · Answer

Thanks! Now can I bind the collapsed state to a property in the card model? So that I may manage it with javascript and SignalR?Matt

Buvana Sathasivam · Answer

Hi Matthew,   
  
Thanks for your update.   
  
We have achieved your requirement using queryCellInfo event.  Also, added new data source attribute called as ‘isCardCollapsed’.  This is a boolean property which is used to specify card collapsed/expand state.  Initially, all cards are in expanded state.  If ‘isCardCollapsed’ attribute enabled, we will get an Id of the card using queryCellInfo event and stored in the array.  In queyCellInfo event, triggered every time a single card rendered.  Using dataBound event, we can be collapsed the card using toggleCard public method.  Please find the below code.   
  




Kanban.html   
  
var kanbanData = [   
                 { Id: 1, ……….isCardCollapsed: true } // Define Boolean attribute   
];   
   
   
             $("#Kanban").ejKanban({   
                   queryCellInfo: "queryCellInfo", // queryCellInfo event   
                   dataBound: "dataBound"   // dataBound event   
             });   
   
         
        




  
var collapse =[];   // Created empty array for store id of the collapsed card   
   
      function queryCellInfo(args){  // Triggered when every single card render   
            if(args.data.isCardCollapsed)  // Check Boolean property   
          collapse.push(args.data[args.model.fields.primaryKey]);  // Stored id of need to collapsed card   
      }   
      function dataBound(args){ // Triggered the Kanban is bound with data during initial rendering   
           var kanbanObj = $("#Kanban").data("ejKanban");    
           kanbanObj.toggleCard(collapse); // Collapsed isCardCollapsed enable cards   
     }   
  
We have also maintained the card collapsed state using signalR.  If you click card expand/collapse icons, you can toggle the card in other browser also using cardClick event and toggleCard public method.  Please find the below code.    
  




Kanban.html   
  
  $("#Kanban").ejKanban({   
        …….    
        cardClick: "cardClick", // Bind card click event   
      });   
   
      
     // Client modify code for updating details in other browsers   
        window.signal = $.connection.signalHub;   
        window.signal.client.modify = function (userIp, action, details) {   
            if (!ej.isNullOrUndefined(details)) {   
                var obj = $("#Kanban").data("ejKanban");   
                if (action == "cardClick")   
                    obj.toggleCard(details.Id);   
            }   
        };   
   
        // Start the connection with cardClick event   
        $.connection.hub.start().done(function () {   
            window.cardClick = function (args) {   
                if (args.type == "cardClick" && (args.target.hasClass("e-cardcollapse") ||args.target.hasClass("e-cardexpand") )) // Check if you click card expand and collapsed icon   
                    window.signal.server.modify($("#userName").text(), args.type, args.data[0]);    
            }   
        });      
  
For your convenience, we have prepared a simple sample using SignalR.  Please find the below link.       
Sample: http://www.syncfusion.com/downloads/support/directtrac/193837/ze/SignalR-1937856624    
         
To know more about the ejKanban component members.  Please refer the below reference.        
API link: https://help.syncfusion.com/api/js/ejkanban#events:databound    
https://help.syncfusion.com/api/js/ejkanban#events:querycellinfo    
https://help.syncfusion.com/api/js/ejkanban#methods:togglecard    
https://help.syncfusion.com/api/js/ejkanban#events:cardclick    
   
     
Please let us know if we have misunderstood.  If so, provide more exact details (like share your code or reproduce your requirement in attached sample) regarding your requirement so that we can check and provide an appropriate solution.          
       
   
Regards,        
Buvana S.