Dragging between Sub-Sub-Grids

2 posts, 0 answers
  1. Suzanne
    Suzanne avatar
    6 posts
    Member since:
    Jul 2013

    Posted 27 Oct Link to this post

    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>

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 31 Oct Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
Back to Top