Columns reorder ?

[George Rossopoulos]

Hi

is there any way for the user to change the column order?

Thank you

George

[Buvana Sathasivam]

Hi George,   

  

Thanks for using Syncfusion Products.   

  

By default, in Kanban control, you don’t specify any order of Kanban columns using properties.  This column is rendered, based on which order you are specified in the columns array in the sample level.  “Reordering of columns by dragging and dropping” feature is not available in Kanban.   

  

If you wish to change Kanban column order in application wise dynamically, you can follow the below sample level solution.  We have rendered external two dropdown list control.  One for specifying Kanban column header text and another for specifying the columns order. If you select the column order in the dropdown list, we can change the Kanban columns using columns public method based on the selected header text.  Please find the below code.   

  

Index.cshtml   

  

<table>   

    <tr>   

        <td>   

            <ej-drop-down-list id="dropdown1" target-id="carsList" value="Backlog"></ej-drop-down-list>   

             ……..   

        </td>   

        <td>   

            <ej-drop-down-list id="dropdown2" target-id="dropdownlist2" value="1"change="change"></ej-drop-down-list>   

            ………..   

        </td>   

    </tr>   

</table>   

   

<ej-kanban id="KanbanBoard" key-field="Status" dataSource="ViewBag.datasource">   

    …………….   

</ej-kanban>   

   

<script>   

    function change(args) { // Triggered when you change the second drop down list    

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

        columns = kanbanObj.model.columns;    

        var index = $.inArray(kanbanObj.getColumnByHeaderText($('#dropdown1').val()), kanbanObj.model.columns);  // Find the selected columns data   

        var column = columns.splice(index, 1); // Remove the specified column     

        var val = parseInt(args.text) - 1;   

        columns.splice(val, 0, column[0]);     // Add the specified column   

        $("#KanbanBoard").ejKanban({ columns: columns }); // Refresh the Kanban board using changed order column    

    }   

</script>   

  

For your convenience, we have prepared JS playground link based on your query.  Please find the below link.   

JS playground: http://jsplayground.syncfusion.com/ctuanhsq    

  

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

  

Sample: http://www.syncfusion.com/downloads/support/directtrac/198062/ze/Kanban-110165750    

  

Regards,   

Buvana S