Dynamically add and re-order columns using the column HeaderTemplate

[Sam Tran]

Hi,

Is it possible to dynamically rename, add, and re-order columns on KanBan?

Example:

I'm trying to use a custom column HeaderTemplate to edit the name of the column, like this:

<script id="editableColumn" type="text/x-jsrender">

    <table style="width: 100%;">

        <tr>

            <td><input type="button" value="Add" id="addLeft"></td>

            <td><input type="button" value="Move" id="moveLeft"></td>

            <td><input type="text" value="{{:Name}}" style="width: 50px;"/></td>

            <td><input type="button" value="Add" id="addRight"></td>

            <td><input type="button" value="Move" id="moveRight"></td>

        </tr>

    </table>

</script>

And when a user clicks the "addLeft" button, I would like to add a column to the left of this column...etc.

Also, how can I display the name of the column in the custom HeaderTemplate?

Using:  {{:Name}}

does not work.

[Selvamani Sankarappan]

Hi Sam, 

 

Thanks for contacting Syncfusion support. 

 

You can add the column in dynamically in Kanban using columns method. Refer to the following code example: 

 

function myFunction() { 

        var kanbanObj = $("#Kanban").data("ejKanban"); 

        kanbanObj.columns("Review","Review","add");  

    } 

 

You can modify the header template column name by using the following code example: 

 

[html] 

<div id="column4"> 

    <td><button onclick="myFunction()">Add</button></td> 

    Done!!  //here you can edit 

</div> 

 

Or else use the headerText field in columns property. 

 

Please refer to the following code example: 

 

http://jsplayground.syncfusion.com/etclks0d 

 

Refer to the following API documentation link: 

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

 

If the above solutions are does not meet your requirement, kindly let us know with more details. We will be happy to help you. 

 

Regards, 

 

Selvamani S. 

[Sam Tran]

Hi,

How can I add a new column to a specific position (between existing columns)?

[Buvana Sathasivam]

Hi Sam,   

  

Thanks for your update.   

  

As per the current Structure, newly added column will be placed at last position of the Kanban board.  If you wish to position the newly added column, please follow the below work around solution. Click left or right button of header column, then get the current columns array of object and insert into new column data with their position and refresh the Kanban columns using set model.  Please find the below code.   

  

     

KanbanFeatures.cshtml   

  

@(Html.EJ().Kanban("Kanban")   

   .Columns(col =>{   

         col.HeaderText("Backlog").Key("Open").HeaderTemplate("#column1").Add();   

        ………….   

   })   

)   

   

<div id="column1">   

    <td><button onclick="myFunctionLeft(this)">Left</button></td> // Click event   

    <span class="e-temp">Backlog</span>   

    <td><button onclick="myFunctionRight(this)">Right</button></td>   

</div>   

   

<script>   

       var i=0, newColumn, column, kanbanObj, headertext, index;   

   

     function myFunctionLeft(ele) {  // Triggered when left button was clicked   

         newColumn = {headerText: "Left" +i , key: "left" +i}; // New column   

         kanbanObj = $("#Kanban").data("ejKanban");   

         column = kanbanObj.model.columns;  // Get current columns    

         headertext = $($(ele).parents(".e-headerdiv")).find(".e-temp").text(); // Get currently clicked header text   

         index = $.inArray(kanbanObj.getColumnByHeaderText(headertext),  kanbanObj.model.columns); // Get column index of currently clicked button   

         column.splice(index, 0, newColumn); // Add new column into existing columns   

         $("#Kanban").ejKanban({columns: column}); // Render column with newly added column   

        }   

       ……………..   

       </script>   

  

For your convenience, we have prepared a simple sample with your requirement. Refer the playground link on below.      

   

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

   

MVC sample: http://www.syncfusion.com/downloads/support/forum/133257/ze/SyncfusionMvcApplication71-349993449    

   

Regards,   

Buvana S