Set dynamically added columns to not allow drag/drop

[aevisner]

My Kanban board is populated only with dynamically added columns using this code.  This works well,

    $(function () {
        var kanbanObj = $("#KanbanBoard").data("ejKanban");
        var columnData = @Json.Serialize(ViewBag.ProposalKanbanStatusColumns);
        for (var i = 0; i < columnData.length; i++) {
            kanbanObj.columns(columnData[i].headerText, columnData[i].key, "add");
        }

    });


Once the columns are added, I need to be able to set some of these columns to not allow dragging from the column, or dropping into the column.

I suppose I could have logic in the card drag/drop events to disallow the actions on the appropriate columns. 

But since there are  'allow-drop' and 'allow-drag' properties when defining columns in the markup, is there a way to set these column properties dynamically?

[Arun Palaniyandi]

Hi Elaine Visner,   

   

Thanks for contacting Syncfusion Support.   

   

Query1:” Once the columns are added, I need to be able to set some of these columns to not allow dragging from the column, or dropping into the column.I suppose I could have logic in the card drag/drop events to disallow the actions on the appropriate columns”   

   

Your requirement is to define the dragging and dropping for specific columns, we suggest you to set at initial column rendering itself. Please find the below code snippets.     

   

   

   

   

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

                <e-kanbanfield content="Summary" primary-key="Id">   

                </e-kanbanfield>   

            </ej-kanban>   

   

   

<script>   

   

   

    function onCreate(e) { //create event   

   

   

    var columnsData = [];   

   

    var colsData = @Json.Serialize(ViewBag.ProposalKanbanStatusColumns);   

   

    for (var i = 0; i < colsData.length; i++) {   

            columnsData.push({ headerText: colsData[i]['HeaderText'], key: colsData[i]['Key'], allowDrag: colsData[i]['AllowDrag'], allowDrop: colsData[i]['AllowDrop'] });  // set the allowDrag and allowDrop property to your column   

        }    

   

     $("#KanbanBoard").ejKanban({ columns: columnsData }); //assign to columns property   

   

   

    }   

</script>   

   

   

   

Controller:   

   

//set value to your columns   

List<Tasks1> Task1 = new List<Tasks1>();   

            Task1.Add(new Tasks1() { HeaderText = "Open", Key = "Open", AllowDrag = true, AllowDrop = true });   

            Task1.Add(new Tasks1() { HeaderText = "InProgress", Key = "InProgress", AllowDrag = true, AllowDrop = true});   

            Task1.Add(new Tasks1() { HeaderText = "Validate", Key = "Validate", AllowDrag = false, AllowDrop = false});   

            Task1.Add(new Tasks1() { HeaderText = "Done", Key = "Close", AllowDrag = true, AllowDrop = true });   

   

   

   

   

   

   

Query2:” But since there are  'allow-drop' and 'allow-drag' properties when defining columns in the markup, is there a way to set these column properties dynamically?”   

   

After the Kanban columns are rendered, if you want to change the added columns for not to allow drag/drop dynamically, we suggest you to redefine the columns properties through set model options. Refer to the following code:   

   

   

<ej-button id="btn" text="Cilck to change" width="100px" click="onClick" />   

   

   

<script>   

   

   

function onClick(e) { // button click   

   

   

        var kanbanobj = $("#KanbanBoard").ejKanban("instance"); // take the Kanban instance   

   

        var newcolumns = kanbanobj.model.columns; // take the Kanban columns model using the instance   

   

        newcolumns[1].allowDrag = false;  // through the columns object change the allowdrag or drop model value dynamically   

        newcolumns[1].allowDrop = false;   

   

   

        $("#KanbanBoard").ejKanban({ columns: newcolumns }); // then again set the entire columns via setmodel   

   

   

    }   

   

   

</script>   

   

   

   

   

   

   

   

   

API Link: https://help.syncfusion.com/api/js/ejkanban#members:columns-allowdrop   

https://help.syncfusion.com/api/js/ejkanban#members:columns-allowdrag   

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

   

   

We have also prepared a sample below for your reference.   

   

http://www.syncfusion.com/downloads/support/directtrac/general/ze/CoreApplication-1199272378 

   

   

   

Regards,   

Arun P.   

[aevisner]

Thanks.  I decided to use the 'onCreate' option.  This gave me the ability to configure the drag/drop permission server-side based on other properties of the data being used for the Kanban column. 

As a suggestion, consider adding more demos showing the Kanban being manipulated dynamically by jquery code after initialization of the control.  This is probably a very typical use as the data being shown may not be static.

[Arun Palaniyandi]

Hi Elaine Visner,    

    

Thanks for your update. 

 

We are glad that our solution has resolved your issue. Also we will document this on our UG.          

 

Please let us know if you have any queries.  

 

Regards, 

Arun P.