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

[Eric Griffith]

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]

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 

API: https://help.syncfusion.com/api/js/ejkanban#methods:kanbanswimlane 

Please check the bellow sample 

Sample: http://www.syncfusion.com/downloads/support/directtrac/172750/ze/customer_sample207190048 

 

Please let us know if you need any further assistance.  

Regards, 

Rajesh kumar.A 

[Ranjani Prabhakaran]

From: Eric Griffith  

Sent: Thursday, March 16, 2017 7:23 PM
To: Syncfusion Support <[e-mail]>
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]

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 

Sample link: http://www.syncfusion.com/downloads/support/forum/129306/ze/customer_sample81596745 

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]

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]

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: 

Sample link:   http://www.syncfusion.com/downloads/support/directtrac/174656/ze/customer_sample_expand_and_collapse_(2)1471226656 

Please let us know if any queries. 

Regards, 

Rajesh Kumar. A