Using JqGrid with TreeGrid + GridDnd

Question

I have been trying to implement the JqGrid with the TreeGrid and GridDnD functionality for some time now and I'm having trouble. I've seen it done before so I know it can be done.

Here is the code I use to create the TreeGrid, which works as desired:

$("#documentmanagementtree").jqGrid({
            url: '<%: Url.Action("GetDocumentManagementFolderStructure", "Document") %>',
            datatype: 'json',
            mtype: 'post',
            colNames: ['Id','Type',
        '<%: Html.TranslateUiElement(Function(x) x.SharedTranslations.EntityTypeCaption) %>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.FileNameCaption)%>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.DocumentFileSizeCaption) %>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.LastCheckinDateCaption)%>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.DocumentDownloadCaption) %>'],
            colModel: [
        { name: 'id', index: 'id', hidden: true },
        { name: 'type', index: 'type', hidden: true },
        { name: 'icon', index: 'icon', width: 5, align: 'left' },
        { name: 'name', index: 'name', width: 15 },
        { name: 'size', index: 'size', width: 5, sortable: false, align: 'right' },
        { name: 'lastcheckindate', index: 'lastcheckindate', width: 10, align: 'center', sorttype: 'date', datefmt: '<%= Html.GetGridDateFormat()%>' },
        { name: 'downloadlink', index: 'downloadlink', width: 5, align: 'center' }
        ],
            height: 'auto',
            width: 1013,
            sortname: 'id',
            treeGrid: true,
            cellEdit: true,
            treeGridModel: 'adjacency',
            treedatatype: "json",
            ExpandColumn: 'icon'
        });

Now, when I implement the GridDnD feature, (Which I have working correctly in other pages) nothing happens. Although, when I comment out the "treeGrid: true" line from the jqGrid code, I can drag and drop successfully.

Note: I connect with '#' because I implement the jqGrid to drag and drop unto itself, which I have working with jquery's droppable, and it works nicely.

$("#documentmanagementtree").gridDnD({
            connectWith: '#'
        });

So the issue stands that I cannot get the TreeGrid to work with GridDnd, although I can get both pieces of functionality working separately just fine and I know it can be done because I've seen demos of this happening (of which I cannot reproduce the results).

Let me know of anything you can suggest to help, thank you all in advance.

Answer 1

I have figured something out using tableDnD instead, here is the resulting code:

            $("#documentmanagementtree").tableDnD({ scrollAmount: 0 });

            $("#documentmanagementtree").jqGrid({
            url: '<%: Url.Action("GetDocumentManagementFolderStructure", "Document") %>',
            datatype: 'json',
            mtype: 'post',
            colNames: ['Id', 'Type',
        '<%: Html.TranslateUiElement(Function(x) x.SharedTranslations.EntityTypeCaption) %>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.FileNameCaption)%>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.DocumentFileSizeCaption) %>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.LastCheckinDateCaption)%>',
        '<%: Html.TranslateUiElement(Function(x) x.DocumentTranslations.DocumentDownloadCaption) %>'],
            colModel: [
        { name: 'id', index: 'id', key: true, hidden: true },
        { name: 'type', index: 'type', hidden: true },
        { name: 'icon', index: 'icon', width: 5, align: 'left' },
        { name: 'name', index: 'name', width: 15 },
        { name: 'size', index: 'size', width: 5, sortable: false, align: 'right' },
        { name: 'lastcheckindate', index: 'lastcheckindate', width: 10, align: 'center', sorttype: 'date', datefmt: '<%= Html.GetGridDateFormat()%>' },
        { name: 'downloadlink', index: 'downloadlink', width: 5, align: 'center' }
        ],
            height: 'auto',
            width: 1013,
            sortname: 'id',
            treeGrid: true,
            viewrecords: true,
            treeGridModel: 'adjacency',
            ExpandColumn: 'icon',
            gridComplete: function () {
                $("#documentmanagementtree").tableDnDUpdate();
            }
        });

The important addition to the jqgrid being:

            gridComplete: function () {
                 $("#documentmanagementtree").tableDnDUpdate();
            }

Although this drag and drop feature is not as nice as the gridDnD feature, it can be implemented to work better coupled with the treeGrid.

Enjoy if you were having similar issues!