This is a migrated thread and some comments may be shown as answers.

Dragging between Sub-Sub-Grids

1 Answer 34 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Suzanne
Top achievements
Rank 1
Suzanne asked on 27 Oct 2016, 01:13 PM

Hello,

I have a Grid, which has sub grids, which themselves have sub grids. I would like to drag rows between the sub-sub-grids. The kendoDropTarget event fires when I drag and drop within the same grid, but not when I drag to another grid. Any thoughts?

I but my code below.

Thanks!

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <title></title>
        <script>
            var dsArray = new Array();
            var dragged;
            var dropped;

            $(document).ready(function () {
                var dataSource = new kendo.data.DataSource({
                    autoSync: true,
                    transport: {
                        read: {
                            url: "GroupHandler.ashx",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8"
                        }
                    },
                    schema: {
                        model: {
                            id: "G_Code",
                            fields: {
                                G_Code: { editable: false },
                                G_T_p_a: { field: "G_T_p_a" }
                            }
                        }
                    }
                });
                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    detailInit: typesInit,
                    columns: [
                        { field: "G_Code", filterable: false, hidden: true },
                        {field: "G_T_p_a", title: " "}
                    ],
                    editable: true
                })
            })

            function typesInit(e) {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    detailInit: deleguesInit,
                    dataSource: {
                        autoSync: true,
                        transport: {
                            read: {
                                url: "TypesHandler.ashx",
                                dataType: "json",
                                contentType: "application/json; charset=utf-8",
                                data: { g_code: e.data.G_Code }
                            }, 
                        },
                        schema: {
                            model: {
                                id: "T_Code",
                                fields: {
                                    T_Code: { editable: false },
                                    T_T_p_a: { field: "T_T_p_a" }
                                }
                            }
                        }
                    },
                    columns: [
                        { field: "T_Code", filterable: false, hidden: true },
                        { field: "T_T_p_a", title: " ", width: "400px" }
                    ],
                });
            }

            function deleguesInit(e) {
                var deldatasource = new kendo.data.DataSource({
                    autoSync: true,
                    //batch: true,
                    transport: {
                        read: {
                            url: "DeleguesHandler.ashx",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: { g_code: e.data.G_Code, t_code: e.data.T_Code, d_code_pays: "275", mode: "read" }
                        },
                        update: {
                            url: "DeleguesHandler.ashx",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: { mode: "update" }
                        },
                        create: {
                            url: "DeleguesHandler.ashx",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: { g_code: e.data.G_Code, t_code: e.data.T_Code, d_code_pays: "275", mode: "create" }
                        },
                        destroy: {
                            url: "DeleguesHandler.ashx",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: { mode: "destroy" }
                        }
                    },
                    schema: {
                        model: {
                            id: "D_Code",
                            fields: {
                                D_Code: { type: "number" },
                                D_Numseq: { type: "number" },
                                D_Appellation: { type: "string" },
                                D_Nom: { type: "string" },
                                D_Prenom: { type: "string" },
                                D_Titre: { type: "string" }
                            }
                        }
                    }
                });

                //save to array
                dsArray[e.data.G_Code + e.data.T_Code] = deldatasource;

                var delgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
                    toolbar: ["create"],
                    dataSource: deldatasource,                    
                    editable: true,
                    //editable:{
                    //    createAt: "bottom",
                    //    mode: "incell"
                    //},
                    navigatable: true,
                    columns: [
                        { field: "D_Code", hidden: true },
                        //{
                        //    command: [
                        //        {
                        //            name: "destroy",
                        //            text: ""
                        //            //click: function (e) {
                        //            //    e.preventDefault();
                        //            //    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                        //            //}
                        //        }
                        //    ],
                        //    title: "&nbsp;",
                        //    width: "110px"
                        //},
                        { field: "D_Numseq", width: "50px" },
                        { field: "D_Appellation", width: "50px" },
                        { field: "D_Nom", width: "200px" },
                        { field: "D_Prenom", width: "200px" },
                        { field: "D_Titre" }
                    ]
                }).data("kendoGrid");

                delgrid.tbody.on('keydown', function (e) {
                    if ($(e.target).closest('td').is(':last-child') && $(e.target).closest('tr').is(':last-child')) {
                        delgrid.addRow();
                    }
                });

                delgrid.table.kendoDraggable({
                    filter: "tbody > tr",
                    group: "gridGroup" + e.data.G_Code +  e.data.T_Code,
                    hint: function (e) {
                        return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
                    }
                });

                delgrid.table/*.find("tbody > tr")*/.kendoDropTarget({
                    group: "gridGroup" + e.data.G_Code + e.data.T_Code,
                    drop: function (e2) {
                        var dsDrop = dsArray[e.data.G_Code + e.data.T_Code];
                        var diDrop = dsDrop.getByUid(e2.draggable.currentTarget.data("uid"));
                        //var target = deldatasource.get($(e.draggable.currentTarget).data("id"));
                        //var dest = $(e.target);

                        //if (dest.is("th")) {
                        //    return;
                        //}
                        //dest = deldatasource.get(dest.parent().data("id"));

                        ////not on same item
                        //if (target.get("id") !== dest.get("id")) {
                        //    //reorder the items
                        //    var tmp = target.get("position");
                        //    target.set("position", dest.get("position"));
                        //    dest.set("position", tmp);

                        //    deldatasource.sort({ field: "position", dir: "asc" });
                        //}
                    }
                });
            }
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="grid"></div>
    </form>
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 31 Oct 2016, 08:18 AM

Hello Suzanne,

 

`The kendoDropTarget event fires when I drag and drop within the same grid, but not when I drag to another grid` - indeed this is by design. The events of the DropTarget will fire only over the element where it is initialized. Am I missing something obvious here?

 

In your code snippet DropTarget is initialized over the sub Grid `  delgrid.table/*.find("tbody > tr")*/.kendoDropTarget` and drop event will be triggered only when dropping inside the sub-grid table element.

 

Regards,
Nikolay Rusev
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
Tags
Grid
Asked by
Suzanne
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Share this question
or