Drag Jqgrid one column value to another like in excel

Question

How to drag the column value of jqgrid to another like dragging in excel? Can it be resolved? Below is my jgrid code :

$(document).ready(function () {
    $('#form_table').jqGrid('setCell', 2, 'column Name', '', {color: 'red'});
        jQuery("#form_table").jqGrid({
            datatype: "local",
            mtype: "POST",
            url: '',
            colNames: ['Id', 'तालीममा सहभागीको नाम थर', 'जिल्ला', 'गा.वि.स', 'वडा नं', 'जातजाती', 'लिङ्ग', 'उमेर'],
            colModel: [
                {name: 'id', index: 'id', jsonmap: "id", hidden: true, },
                {name: 'name', index: 'name', jsonmap: "name", width: 250, editable: true},
                {name: 'district', index: 'district', jsonmap: "district", width: 100, editable: true, align: 'center', edittype: 'select', editoptions: {
                        value: {"":"",<?php
                    foreach ($districts as $district) {
                        echo "'" . $district->dis_nepali . "': '" . $district->dis_nepali . "', ";
                    }
                    ?>
                        }, defaultValue: ''}, formatter: 'select'},

                {name: 'vdc', index: 'vdc', jsonmap: "vdc", width: 100, editable: true},
                {name: 'ward_no', index: 'ward_no', jsonmap: "ward_no", width: 80, editable: true},
                {name: 'caste', index: 'caste', jsonmap: "caste", width: 100, editable: true, align: "center", edittype: 'select', editoptions: {value: {"दलीत": "दलीत","आ/जनजाती": "आ/जनजाती", "बा छ्य": "बा छ्य", "मधेसी": "मधेसी", "अन्य": "अन्य","":""}, defaultValue: ''}, formatter: "select"},
                {name: 'gender', index: 'gender', jsonmap: "gender", width: 100, editable: true, align: "center", edittype: 'select', editoptions: {value: {"महिला": "महिला", "पूरूष": "पूरूष","":""}}, formatter: "select"},
                {name: 'age_group', index: 'age_group', jsonmap: "age_group", width: 100, editable: true,}
            ],
            loadComplete: function (data) {
                var grid = jQuery("#form_table"),
                        pageSize = parseInt(grid.jqGrid("getGridParam", "rowNum")),
                        emptyRows = pageSize - data.rows.length;

                if (data.rows.length == 0) {
                    for (var j = 1; j <= emptyRows; j++)
                        // Send rowId as undefined to force jqGrid to generate random rowId
                        grid.jqGrid('addRowData', undefined, {});
                }
                if (emptyRows > 0) {
                    for (var i = 1; i <= emptyRows; i++)
                        // Send rowId as undefined to force jqGrid to generate random rowId
                        grid.jqGrid('addRowData', undefined, {});
                }
            },
            jsonreader: {repeatitems: false, id: 'id', root: 'root'},
            pager: '#form_pager',
            rowNum: 10,
            toppager: true, //for pager on top
            height: "auto",
            rowList: [10, 20, 50, 100],
//            sortname: 'id',
            viewrecords: true,
            gridview: true,
            resizable: true,
            rownumbers: true,
            loadonce: true,
            //shrinkToFit:false,
            loadtext: 'Loading...',
            cellEdit: true,
            contentType: "application/json",
            cellsubmit: 'clientArray',
            cellurl: ""
        });
        jQuery("#form_table").jqGrid('navGrid', '#form_pager', {
            cloneToTop: true,
            edit: false,
            add: false,
            del: false
        });
        jQuery("#form_table").jqGrid('setGroupHeaders', {
            useColSpanStyle: true,
            groupHeaders: [
                {startColumnName: 'district', numberOfColumns: 3, titleText: 'ठेगाना'}
            ]
        });
}):

Now i want the column 2 name of row 1 to be dragged to the column 2 name upto row 15 is there any solution? Any help would be highly appreciated. Thank You

Sandell

I have many questions to the code. I'm not sure what you mean under "dragging in excel". I suppose that you need just add the option sortable: true and verify that you includes jQuery UI JS file. After that one can change the order of columns by drag&drop the column headers. If you want to drag&drop the values of one row only and not the whole column, then I have to disappoint you: the feature is not exist in jqGrid. – Kickstand

Thanks, but is there any alternative method or any other table?? – Sandell

To tell the trust it's the feature of excel, which disturbs me only, because one can make drag&drop not when one really want it. It's my personal opinion. If you still have to implement the feature then you can use jQuery UI Draggable and Droppable. Cell editing mode, which you use, have many callbacks (see here). Thus you can call $.draggable after editing is initialized. – Kickstand