1. Home
  2. Forum
  3. jQuery
  4. how do I use foreign keys in Kanban for column and swimlane?

how do I use foreign keys in Kanban for column and swimlane?

I would like to use foreign keys with the Kanban control for the column and swimlane. 

Currently I can only specify the key for the swimlane. I need to separate the name and value for the swimlane so that items are selected by the value but the swimlane is named by the text. this is similar to functionality you have in Grid column names.

Similarly, I need the same functionality for column names.

is there a way to do this now? 

5 Replies
BS Buvana Sathasivam Syncfusion Team December 6, 2017 04:40 PM UTC

Hi Mark, 
 
Thanks for using Syncfusion Products. 
 
Query #1: “Currently I can only specify the key for the swimlane. I need to separate the name and value for the swimlane so that items are selected by the value but the swimlane is named by the text.” 
 
As per current behavior, we did not have the support for “swimlane key value pair was defined in data source”.  So, We have already added it to our feature request list, and it can be tracked through our Features Management System:

 
 
Query #2: “Similarly, I need the same functionality for column names.” 
 
We are analyzing and working with high priority and we will update you more details on December 8, 2017.   
 
Regards, 
Buvana S. 
 
 


ML Mark Lummus December 6, 2017 05:51 PM UTC

Hi Buvana,

thanks for the reply.

regarding the feature request, I am unable to see the feature request in my support account.

regarding the column name, I am able to achieve something if/when I build the column list programmatically, using the foreign key (ID) as the key value and a foreign field (text) as the headerText. It would be nice to be able to specify these two foreign key fields in the configuration options hash and let the control do the rest for me.

seems that the columns must be statically defined and the swim lanes are dynamically defined. It would be nice if there were better consistency/parity in the definition of swimlanes and columns. Ideally, it would look like:
dynamic columns:
use values from the objects in the datasource to define column headerText based on a specified lookup field (allowing foreign keys).
static columns:
like what you have now, but with foreign keys
dynamic swim lanes:
like what you have now, but with foreign keys
static swim lanes:
use values from the objects in the datasource to define swim lane name based on a specified lookup field (allowing foreign keys).
And there should be an option to show the swim lane even when there are no cards to display. I believe that you added this option already to show empty columns.

I hope that this makes sense.

Mark



BS Buvana Sathasivam Syncfusion Team December 7, 2017 05:35 PM UTC

Hi Mark, 

Thanks for your update. 

Query #1: “I am unable to see the feature request in my support account.” 

We will check with website team and update you as soon as possible. 

Query #2: “Seems that the columns must be statically defined and the swim lanes are dynamically defined. It would be nice if there were better consistency/parity in the definition of swimlanes and columns.” 

We will consider your reported information and provide you more details on tomorrow.   

Query #3: “there should be an option to show the swim lane even when there are no cards to display.” 

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.       
         
To know more about the ejKanban component members.  Please refer the below reference.        
 
Regards, 
Buvana S.       

 


ML Mark Lummus December 8, 2017 09:11 AM UTC

Hi Buvana,

thanks for the information.
regarding Query #3 in your response, the issue I have is that in an initial state, there are no cards because there is no data. Swimlanes would need to be defined statically (like columns are defined today), i.e. I specify the names and keys of the swimlanes and they are displayed with no cards. Then, I can add a card, and it can be assigned to any of the swimlanes. 

Are you familiar with Trello? If you want to build a version of Trello that also had swimlanes, this is what you would need. Click button to add column. Click button to add swimlane. Click button to add card. use mouse to drag card between columns and swimlanes.

does that make any sense what I am suggesting?

thanks,
Mark

BS Buvana Sathasivam Syncfusion Team December 8, 2017 06:10 PM UTC

Hi Mark, 
 
Thanks for your update. 
 
Query #1: “Seems that the columns must be statically defined and the swim lanes are dynamically defined. It would be nice if there were better consistency/parity in the definition of swimlanes and columns.” 
 
Thanks for your update. We have checked your requirement completely.  Currently, we have option to map key field of columns only , not to header text. Because, column key is vital role on drag and drop, editing operation multiple column key binding and many other functionalities in Kanban board.  Also  we don't have editing support to cutomize the header text with foreign key value.  As per current structure, column foreign value is not feasible to achieve for header text.  We suggest, you can use programmatically assign foreign key into columns headerText and key value. 
  
Query #2: “I specify the names and keys of the swimlanes and they are displayed with no cards. Then, I can add a card, and it can be assigned to any of the swimlanes.” 
 
We have created Kanban empty column with empty swimlane when no cards to display state using load event keyFiltering property and showColumnWhenEmpty property.  If you click Kanban column add button, dialog box will open.  Now, you can specify any other swimlane name and add the card. Please find the below code. 
 
 
$("#Kanban").ejKanban( 
                { 
           showColumnWhenEmpty: true, 
           load: "load", 
           columns: [ 
                      { headerText: "Backlog", key: "Backlog", showAddButton: true }, 
                  ], 
            editSettings: { 
                 editItems: [ 
                            { field: "Id" }, 
                            { field: "Status" }, 
                            { field: "Assignee" }, 
                        ], 
                        allowEditing: true, 
                        allowAdding: true 
            }, 
}) 
 
function load(args) { 
            args.keyFiltering = false; 
        } 
 
                                     
 
We have externally created a button, if you click this button, add data on datasource using addCard public method but this data contains new swimlane mapping field value.  So, new swimlane was rendered on Kanban board.  Please find the below code. 
 
 
  <button id="button2">Add Swimlane</button> 
 
  $("#Kanban").ejKanban( 
                { 
                fields: { 
                       swimlaneKey: "Assignee" 
                    } 
}); 
                       
function addSwimlane(args){ 
                     var kanbanObj = $("#Kanban").data("ejKanban"); 
            kanbanObj.KanbanEdit.addCard("11",{Id:11, Status: "review", Summary: "Task 1", Assignee: "Added New Swimlane" });    // This assignee value was not defined on already added data 
              } 
 
 
Regards, 
Buvana S. 
  


Loader.
Up arrow icon