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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Wire up events to the swimlane and column expand/collapse events

Thread ID:

Created:

Updated:

Platform:

Replies:

129306 Mar 10,2017 11:08 PM UTC Mar 20,2017 05:26 PM UTC JavaScript 5
loading
Tags: ejKanban
Eric Griffith
Asked On March 10, 2017 11:08 PM UTC

I want to be able to track when a swimlane or column is expanded/collapsed.  I will store this information with the "board" server side.  So when the user comes back to the board, I can toggle the appropriate swimlanes and columns.  There does not appear to be any obvious way to do this.  Is it possible?  Is this a feature request?

Eric

Rajesh Kumar Anburajan [Syncfusion]
Replied On March 13, 2017 03:08 PM UTC

Hi Eric Griffith, 
 
Thanks for contacting syncfusion support. 
 
The requested requirement of “ Wire up events to the swim-lane and column expand/collapse events” can be achieved through simple workaround solution using Kanban “create” event. Please use the bellow events to save expand/collapse details in sever side to achieve your requirements. 
 
Please refer to the following code snippets for workaround solution. 
 
[default.html]    
<script type="text/javascript"> 
        var kbnCollapseCollec=retrivedCollec=kbnSlCollapseCollec=retrivedSlCollec= []; 
        $(function() { 
            var data = ej.DataManager(window.kanbanData).executeLocal(ej.Query().take(50)); 
            $("#Kanban").ejKanban( 
                { 
                    dataSource: data, 
                    isResponsive: true, 
                    allowToggleColumn: true, 
                    columns: [ 
                        { headerText: "Backlog", key: "Open" }, 
                        { headerText: "In Progress", key: "InProgress" }, 
                        { headerText: "Testing", key: "Testing" }, 
                        { headerText: "Done", key: "Close" } 
                    ], 
                    keyField: "Status", 
                    allowTitle: true, 
                    fields:{ 
                        primaryKey: "Id", 
                        swimlaneKey: "Assignee", 
                        content: "Summary" 
                                       }, 
                    allowSelection: false, 
                    swimlaneSettings:{ 
                        allowDragAndDrop: true, 
                    }, 
//Here you can use the create event 
                    create: function (args) { 
                        var kbnObj = $('#Kanban').data('ejKanban') 
                        retrivedCollec = JSON.parse(sessionStorage.getItem("kbnCollapseCollec")); 
                                           if (!retrivedCollec)  return; 
                        for (var i = 0; i < retrivedCollec.length; i++) 
                            kbnObj.toggleColumn(retrivedCollec[i]); 
                                           retrivedSlCollec = JSON.parse(sessionStorage.getItem("kbnSlCollapseCollec")); 
                                           if (!retrivedSlCollec)  return; 
                        for (var i = 0; i < retrivedSlCollec.length; i++) 
                           kbnObj.KanbanSwimlane.toggle($(".e-slexpandcollapse").eq(retrivedSlCollec[i]));   
                    } 
                }); 
//Here you can use the swimlane expand and collapse  
            var slexpandcollaspe = $("#Kanban").find(".e-slexpandcollapse .e-icon"); 
            slexpandcollaspe.click(function (args) { 
                if (slexpandcollaspe.hasClass("e-slexpand") || slexpandcollaspe.hasClass("e-slcollapse")) { 
                    var value = $('#Kanban .e-swimlanerow').index($(args.target).parents(".e-swimlanerow")); 
                    if (sessionStorage.getItem("kbnSlCollapseCollec") == '' || ej.isNullOrUndefined(sessionStorage.getItem("kbnSlCollapseCollec")) ) 
                      var  kbnSlCollapseCollec = []; 
                    else  
                      var kbnSlCollapseCollec = JSON.parse(sessionStorage.getItem("kbnSlCollapseCollec")); 
                    kbnSlCollapseCollec.push(value); 
                    sessionStorage.setItem("kbnSlCollapseCollec", JSON.stringify(kbnSlCollapseCollec)); 
                } 
            }); 
//Here you can use the column expand and collapse  
            var clexpandcollaspe = $("#Kanban").find(".e-headercell .e-icon"); 
            clexpandcollaspe.click(function (args) { 
                var value = $(args.target).parents(".e-headercell").find('.e-headerdiv').text(); 
                if (clexpandcollaspe.hasClass("e-clexpand") || clexpandcollaspe.hasClass("e-clcollapse")) { 
                    var value = $(args.target).parents(".e-headercell").find('.e-headerdiv').text(); 
                    if (sessionStorage.getItem("kbnCollapseCollec") == '' || ej.isNullOrUndefined(sessionStorage.getItem("kbnCollapseCollec")) ) 
                      var  kbnCollapseCollec = []; 
                    else  
                      var kbnCollapseCollec = JSON.parse(sessionStorage.getItem("kbnCollapseCollec")); 
                    kbnCollapseCollec.push(value); 
                    sessionStorage.setItem("kbnCollapseCollec", JSON.stringify(kbnCollapseCollec)); 
                } 
                 
            }); 
            }); 
         
    </script> 

Please refer the bellow API Document 


Please check the bellow sample 

 
Please let us know if you need any further assistance.  

Regards, 
Rajesh kumar.A 


Ranjani Prabhakaran [Syncfusion]
Replied On March 17, 2017 04:20 AM UTC

From: Eric Griffith  
Sent: Thursday, March 16, 2017 7:23 PM
To: Syncfusion Support <support@syncfusion.com>
Subject: RE: Syncfusion support community forum 129306, Wire up events to the swimlane and column expand/collapse events, has been updated.
 

From what I can tell in the code below this is getting a collection of column names, not column keys.  The toggleColumn is looking for the key.  I am using column key configuration. 
 
retrivedCollec = JSON.parse(sessionStorage.getItem("kbnCollapseCollec"));  
 
                        for (var i = 0; i < retrivedCollec.length; i++)  
                            kbnObj.toggleColumn(retrivedCollec[i]);  
 
 
The yellow line is the one that complains looking for “key”.  Oddly, the collection retrivedCollec has two items with the same name. But there are 5 columns.  And there are no collapsed columns. 
 
Eric 


Rajesh Kumar Anburajan [Syncfusion]
Replied On March 17, 2017 05:19 PM UTC

Hi Eric Griffith, 
  
Thanks for your update. 
  
The requested requirement of “ ToggleColumn is looking for the key” In that We don’t have public method to use column key to hide the column. Since we have multiple key mapping column rendering support , we have given generic method to use header text as argument.  We have extended Kanban control object and created method “toggleColumnByKey” for hiding column using key value as work around solution ( while using single key mapping for column).   
  
  
[default.html] 
create: function (args) { 
                     // Create object for Kanban control  
                        var kbnObj = $('#Kanban').data('ejKanban') 
                     // Extend toggleColumnByKey public method with key    
                        kbnObj.toggleColumnByKey = function (key) { 
                      // Get columns property  
                            var columns = kbnObj.model.columns; 
                        for (var i = 0; i < columns.length; i++) {  
                      //  Check key values  
                            if (columns[i]["key"] == key)             
// Pass header text for specified key value to toggleColumn public method 
                                kbnObj.toggleColumn(columns[i]["headerText"]); 
                        }  
                        } 
   …………………………………. 
  
  
 
  
  
In other requirement “The collection retrivedCollec has two items with the same name" can be achieved through “$.inArray” method . Please use the bellow details to achieve your requirements. you can push the particular key value in the array. 

Please refer to the following code snippets for workaround solution. 
  
[default.html] 
  
clexpandcollaspe.click(function (args) { 
                var kbnObj = $('#Kanban').data('ejKanban') 
                var columns = kbnObj.model.columns; 
                var value = $(args.target).parents(".e-headercell").find('.e-headerdiv').text(),keyValue; 
    ………………           //Here you can push the key values 
                   if ($.inArray(value, kbnCollapseCollec) == -1)  
                        kbnCollapseCollec.push(keyValue); 
                    debugger; 
                    sessionStorage.setItem("kbnCollapseCollec", JSON.stringify(kbnCollapseCollec)); 
                } 
            }); 
……………… 
 
  
The issue of adding multiple key values are resolved in the sample. 
Please check the bellow sample 
Please check with the sample and let us know if you facing the same issue or if misunderstood the requirement  , so that we can check and provide you better solution  
Please let us know if any queries. 
Regards, 
  
Rajesh Kumar. A  


Eric Griffith
Replied On March 17, 2017 08:51 PM UTC


I have two issues with the guidance provided:

First, the column expand/collapse has no way to determine the column key that is being selected.  I see no way to find it except hacking the example for the toggleByColumnId.  But this fails if the column name is repeated.

Second, the swim lane example does not bind as provided.  The swim lanes are rendered later and don't exist when the call happens.  How do I hook into after the swim lanes have been added to the DOM?  Is there a way in the afterComplete?

Thanks, Eric

Rajesh Kumar Anburajan [Syncfusion]
Replied On March 20, 2017 05:26 PM UTC

Hi Eric Griffith, 

Query  #1 : The column expand/collapse has no way to determine the column key that is being selected  
 
You can get the “key” value of column which is expanded/collapsed through “headerClick” event. Also adding multiple column keys are prevented in sample level. Please refer to the following code snippets: 
 
API link for header click event : API Link: https://help.syncfusion.com/api/js/ejkanban#events:headerclick 

[default.html]   
……………. 
function headerClick(args) { 
            keyValue = args.columnData.key; //Here you can get the key values  
        } 
………….. 
 
Query #2: How do I hook into after the swim lanes have been added to the DOM 
Event binding for swim lane after control rendering completed can be done in ‘databound’. API Link: https://help.syncfusion.com/api/js/ejkanban#events:databound 
We also internally logged the usability feature for adding click event for swim lane collapse and expand and this will be available in upcoming releases.. Please check the bellow sample: 
Please let us know if any queries. 
Regards, 
Rajesh Kumar. A  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;