Treeview control with either UrlAdaptor or RemoteSaveAdaptor

[Ross Woodward]

I've got a page which has a Treeview control and a Kanban control, which I'm trying to do drag and drop.

I've got the Treeview populating from Viewbag, but when i remove something from the Kanban control it should re-appear in the treeview, and the only way i've found of doing that is to reload the whole page.

I can do the drag/drop from the treeview into the kanban, which does a post to the CRUD url to populate the data. However, the kanban then shows the spinner and just sits there. again if i refresh the page it loads properly.

So, i was trying to load the treeview from remote data, but this doesnt seem to work;

@Html.EJS().TreeView("tree").Fields(fields => fields.DataSource(d => d.Url("/Planning/GetPendingJobs3").Adaptor("UrlAdaptor").CrossDomain(true)).Id("ordID").Text("tncAddress1")).Render()

the call to the /Planning/GetPendingJobs3 results in the following json

{"result":[{"ordID":238049,"Subject":"238049 Smith\u003cbr /\u003e31 Avison Street NE4 5JF\u003cbr /\u003eSIS (60)","Starttime":null,"EndTime":null,"IsAllDay":0,"ProjectID":0,"TaskId":0,"cusUUID":"D4D6C4D7-194E-4AFE-B30D-0F6D0C71D364","vtbVanName":null,"cusSurname":"Smith","tncAddress1":"31 Avison Street","tncPostcode":"NE4 5JF","otyName":"SIS","ordDuration":60,"ordEnterDate":"\/Date(1740355200000)\/","Colourway":"#ebb514","ColourwayText":"#ffffff","WarningCodes":" ","ordDate":"\/Date(1740355200000)\/"}],"count":1}

Thanks

Ross

[LeoLavanya Dhanaraj]

Hi Ross,

Greetings from Syncfusion support.

As per the shared details, we have prepared the TreeView with a URL adapter and Kanban components, both of which support drag-and-drop functionality. We successfully performed a drag action from the TreeView to the Kanban, removed the dragged tree node from the TreeView, and added a new card to the Kanban. This action works properly on our end without requiring a page refresh. For your reference, we have included a validated sample.

If you are facing issues related to this, please check the details, or if we have misunderstood your needs, kindly provide additional information about your specific use case, along with video footage and a sample. This information will help us better understand your situation and provide a timely resolution.

Additionally, check the documentation links below to see if they suit your needs.

https://ej2.syncfusion.com/aspnetmvc/documentation/kanban/data-binding#url-adaptor

https://ej2.syncfusion.com/aspnetmvc/documentation/kanban/drag-and-drop#treeview-to-kanban

https://ej2.syncfusion.com/aspnetmvc/documentation/kanban/dialog#url-adaptor

Regards,

Leo Lavanya Dhanaraj

Attachment: TreeViewURL_84bd38c1.zip

[Ross Woodward]

Thanks for that, i've looked at the code supplied and i've still got 2 problems.

1 - when the treeview item is dragged onto the kanban, there's no CRUD post to update the data. The main issue i'm hanivg is that whilst i can add a crudURL on to the Kanban, once that post is made I just get the spinning icon as though its waiting for a response from the crudURL post command.

2 - I can't drag an item back from the kanban to the treeview (and have that do a CRUD post to update the data accordingly.

for example, i made these changes :

    public class KanbanPost

    {

        public string action { get; set; }

        public KanbanDataModels value { get; set; }

    }

[HttpPost]

public JsonResult KanbanCrud(KanbanPost myModel)

{

//this does nothing yet, but when called I just get the spinning logo on the Kanban

    return Json(myModel, JsonRequestBehavior.AllowGet);

}

[HttpPost]

public JsonResult KanbanData()

{

    var data = new KanbanDataModels().KanbanTasks();

    return Json(data, JsonRequestBehavior.AllowGet);

}

@Html.EJS().Kanban("Kanban2").KeyField("Status").DataSource(ds=>ds.Url("/Planning/KanbanData").Adaptor("UrlAdaptor").CrudUrl("/Planning/KanbanCRUD")).ExternalDropId((string[])ViewBag.externalDropId).Columns(col =>

           {

          col.HeaderText("To Do").KeyField("Open").Add();

          col.HeaderText("Done").KeyField("Close").Add();

      }).CardSettings(card =>

            {

          card.ContentField("Summary").HeaderField("Id");

      }).Render()

this breaks the drag ONTO the kanban, as I just get the spinning logo as though its waiting for a response from the 

[Yaswin Vikhaash Rajaretenam]

Hi Ross,


Query 1: No CRUD POST when dragging an item onto the Kanban

Yes, it is possible to perform a CRUD POST operation when dragging an item onto the Kanban board. The modified card data can be persisted in the database using RESTful web services.

All CRUD operations in Kanban are managed through DataManager, which provides seamless server-side data binding for CRUD actions. Please refer to the documentation for a step-by-step guide on implementing CRUD operations in Kanban.

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/kanban/dialog#persisting-data-in-server

Query 2: Dragging an item from Kanban back to the TreeView

We have reviewed your query and would like to clarify that dragging an item from the Kanban board back to the TreeView is not supported. The Kanban component card dragging and dropping is designed to restrict items within its boundaries to maintain a smooth and structured workflow. This ensures that drag-and-drop operations within the Kanban board function effectively.

However, dragging items from the TreeView to Kanban is fully supported and works as expected. Let us know if you need further assistance!

Regards,

Yaswin Vikhaash