How can I edit or customize the Drag&Drop item template from TreeView to an external component (like Scheduler)?

[Joan Carles Ferran]

How can I edit or customize the Drag&Drop item template from TreeView to an external component (like Scheduler)?

So, I need to edit some paddings and styles of the dragged item from TreeView to Scheduler component.

[Indhumathy Loganathan]

Hi Joan,

Greetings from Syncfusion support.

We understand that you want to perform external drag and drop from the TreeView to the Scheduler component. In the below demo, we have achieved the exact same. You can refer to the code snippet and meet your requirements.

https://blazor.syncfusion.com/demos/scheduler/external-drag-and-drop?theme=fluent

In the demo, we have enabled Template support for the TreeView. You can also refer to the below links to understand TreeView Template support.

https://blazor.syncfusion.com/demos/treeview/template?theme=fluent

https://blazor.syncfusion.com/documentation/treeview/template

Please let us know if you need any further assistance.

Regards,

Indhumathy L

[Joan Carles Ferran]

Hi,

Thank you for your response.

I think you didn't understand my question. 

I already have a template for scheduler and for treeview nodes.

I only need to know how edit the "drag&drop" template for dragged item.

I show you an attached video to refer.

Best regards,

Attachment: 20220902_163540_97cd66ba.rar

[Prasanth Madhaiyan]

Hi Joan,

We have validated your reported query in the Blazor TreeView component by preparing the sample. We understand that you want to edit the dragged item when you perform the drag and drop operation. We have achieved your requirement in a workaround by making an interop call in the TreeView OnNodeDragStart event by tacking the draggable element item, and you can add the below code snippet to your sample to achieve your requirement.

[Index.razor]

 

<SfTreeView TValue="TreeData" AllowDragAndDrop="true">

    <TreeViewFieldsSettings Id="Id" Text="Name" ParentID="Pid" HasChildren="HasChild" Selected="Selected" Expanded="Expanded" DataSource="@LocalData"></TreeViewFieldsSettings>

    <TreeViewEvents TValue="TreeData" OnNodeDragStart="OnNodeDragStart" OnNodeDragStop="OnTreeViewDragStop"></TreeViewEvents>

    <TreeViewTemplates TValue="TreeData">

        <NodeTemplate>

            <div>

                <div class="treeviewdiv">

                    <div class="nodetext">

                        <span class="treeName">@((context as TreeData).Name)</span>

                    </div>

                </div>

            </div>

        </NodeTemplate>

    </TreeViewTemplates>

</SfTreeView>

@code {

    …

 

    public async Task OnNodeDragStart(DragAndDropEventArgs args)

    {

         await JSruntime.InvokeAsync<object>("Method");

    }

 

}

[Script.js]

 

function Method() {

    var dragEle = document.getElementsByClassName("e-drag-item")[0];

    // creates a <table> element and a <tbody> element

    const table = document.createElement("table");

    const tableBody = document.createElement("tbody");

    for (let a = 0; a < 2; a++) {

        const row = document.createElement("tr");

 

        for (let b = 0; b < 2; b++) {

            const cell = document.createElement("td");

            const cellText = document.createTextNode(`row ${a}, column ${b},`);

            cell.appendChild(cellText);

            row.appendChild(cell);

        }

        tableBody.appendChild(row);

    }

    table.appendChild(tableBody);

    table.setAttribute("border", "5");

    dragEle.appendChild(table);

}

 

For your reference, we have attached the sample.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorTreeView1332527315.zip

Please check the shared sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.