Drag & drop between controls

[David]

HI,

i need drag and drop system between treeview control and grid control....

i dont find never about this...

Thank!

[Balaji Marimuthu]

Hi David,

We considered this requirement “Need drag and drop system between Treeview control and Grid control” as a Custom sample request and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Please let us know if you have any queries.

Regards,
Balaji Marimuthu

[David]

Hi David,

We considered this requirement “Need drag and drop system between Treeview control and Grid control” as a Custom sample request and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Please let us know if you have any queries.

Regards,
Balaji Marimuthu

Hi!

I try using ejDraggable and ejDroppable. Now, i need know which id i drop my item, that is to say , when i take my draggable item, i drop item in row (tr) but i cant know id tr.

I show code:

@{IDictionary<string, object> treeDragable = new Dictionary<string, object>();

  treeDragable.Add("data-brag", "true");

}

@{IDictionary<string, object> gDropable = new Dictionary<string, object>();

  gDropable.Add("data-brag", "true");

}

<div class="row">

    <div class="col-lg-2">

        @*@(Html.EJ().TreeView("treeInstalaciones")

            .TreeViewFields(s => s.Datasource((IEnumerable<Node>)ViewBag.arbol).Id("id").ParentId("pid").Text("name").HasChild("hasChild").Expanded("expanded")))*@

        

        @Html.EJ().TreeView("treeInstalaciones").Items(items =>

                {

                    items.Add().Text("Instalacion 1").Children(child =>

                    {

                        child.Add().Text("Subinstalacion 1.1").Children(subchild =>

                    {

                        subchild.Add().Text("Equipo 1").Id("1").HtmlAttributes(treeDragable);

                        subchild.Add().Text("Equipo 2").Id("2").HtmlAttributes(treeDragable);

                        subchild.Add().Text("Equipo 3").Id("3").HtmlAttributes(treeDragable);

                    });

                        child.Add().Text("Subinstalacion 1.2");

                        child.Add().Text("Subinstalacion 1.3");

                        child.Add().Text("Subinstalacion 1.4");

                        child.Add().Text("Subinstalacion 1.5");

                        child.Add().Text("Subinstalacion 1.6");

                        child.Add().Text("Subinstalacion 1.7");

                    });

                    items.Add().Text("Instalacion 2").Children(child =>

                    {

                        child.Add().Text("Subinstalacion 2.1");

                        child.Add().Text("Subinstalacion 2.2");

                        child.Add().Text("Subinstalacion 2.3");

                    });

                })

    </div>

    <div class="col-lg-7">

        @(Html.EJ().Grid<Orden>("GridTest")

        .EnableRowHover(false)

        .Datasource(ds => ds.Json((IEnumerable<Orden>)@Model.Ordenes).UpdateURL("Update").Adaptor(AdaptorType.RemoteSaveAdaptor))

                //.EnableAltRow(true)

        .EditSettings(e => e.AllowEditing(true).EditMode(EditMode.Dialog))

             .ToolbarSettings(toolbar =>

                        {

                            toolbar.ShowToolbar().ToolbarItems(items =>

                            {

                                items.AddTool(ToolBarItems.Add);

                                items.AddTool(ToolBarItems.Edit);

                                items.AddTool(ToolBarItems.Delete);

                                items.AddTool(ToolBarItems.Update);

                                items.AddTool(ToolBarItems.Cancel);

                            });

                        })

        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })

        .Columns(col =>

        {

            col.Field("OrdenId").IsPrimaryKey(true).Visible(false).Add();

            col.Field("Titulo").HeaderText("Titulo trabajo").Add();

            col.Field("Prioridad").Add();

            //col.Field("Titulo").Visible(true).AllowEditing(true)

            //    .Template("#treeCell").EditTemplate(c => c.Create("#cellEdit")).Add();

        })

        .ChildGrid(child =>

            {

                child.Datasource(d => d.Json(Model.Operaciones))

                .EnableRowHover(true)

                .QueryString("OrdenId")

                    .Columns(col =>

                    {

                        col.Field("Id").IsPrimaryKey(true).Visible(false).Add();

                        col.Field("TrabajoARealizar").HeaderText("Trabajo a realizar").Add();

                        col.Field("FechaPrevista").HeaderText("Fecha prevista").TextAlign(TextAlign.Right).Format("{0:dd/MM/yyyy}").Add();

                        col.Field("CuentaHoras").Add();

                    });

            })

            .ClientSideEvents(eve => { eve.ActionComplete("complete").ActionBegin("begin").EndEdit("endEdit").EndAdd("endAdd").DataBound("databound"); })

        )

    </div>

</div>

<script>

        function databound() {

            $("li[data-brag=true]").ejDraggable({

                handle: $("li[data-brag=true]"),

                clone: true,

                scope: "mine",

                dragStop: function (args) {

                    $('.e-drag-helper').remove();

                    //debugger;

                    //if (args.target.id != "rightContainer") {

                       

                    //}

                }

            });

        

            //// Droppable element

            $("#GridTest tr").clo.ejDroppable({

                scope: "mine", // First Draggable element object.

                drop: function (event, ui) {

                    debugger;

//We need know id of row item

                    alert("Dropped");

                    //event.dropTarget.text("Dropped..!");

                }

            });

        }

    </script>

 

Thanks!!

[K Kalai Selvi]

Hi David,
 
As we informed in the last update, we have created a support incident and provided the response in the incident. We request you to refer the support incident for further updates from us. Please log in to our support website using your Direct- Trac account credentials. 
 
https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents
 
Regards,
Kalaiselvi