jQWidgets Forums

Tagged: angular grid, drag, drag to nested grid, drap row, drop, drop row, grid, jquery grid, jqxgrid, nested grids

This topic contains 9 replies, has 2 voices, and was last updated by Keshavan 9 years, 10 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Design flaw ? not possible to implement Nested Grid with Drag-drop Posts

June 28, 2015 at 1:47 am Design flaw ? not possible to implement Nested Grid with Drag-drop #73107

Participant

Hi,

I tried implementing Nested grid with drag drop feature, (Nested grid and another grid from which I tried to drag drop in to inner grid of nested grid).
I checked and found inner grid’s ID starts with grid0, grid1, …. gridn accordingly depending on the row of outer grid of the nested grid.
I have taken care for the same using a variable ‘referencerow’ which I properly update based on nested grid’s Outer grid.

                             var grid = "grid" + referencerow;
                              cell = $("#grid").jqxGrid('getcellatposition', position.left, position.top);

But drop doesn’t happen. below is my full code.
Please let me know if drag and drop with nested grid is not possible to implement, please suggest solution.

Thanks,
Keshavan


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>
        In order to enter in edit mode, click any of the 'Edit' buttons. To save the changes, click the 'Save' button in the popup dialog. To cancel the changes
        click the 'Cancel' button in the popup dialog.
    </title>
    <link rel="stylesrIdheet" href="/Content/Site.css" type="text/css" />
    <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
    <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.fresh.css" type="text/css" />
    <script type="text/javascript" src="/JqWidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/JqWidgets/scripts/check_browser_close.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxselection.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxselection.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        var refGrid;
        $(document).ready(function () {
            var gid1 = gid2 = quantity = sellprice = psquantity = Tamt = Tqty = rqty = ctr = ref = ref1 = order_id = id = rowcount = mode = 0;
            var gid3 = 1;
            var data = {};
            var cartItems = [];
            var valueDesc = " ";
            var arowid = [];
            var jsonString1 = new Array();
            var jsonString2 = [];
            var theme = "ui-sunny";
            var url = "/Ship/GetOrders";
            var urunId, oid, odid, refoid, invqty, refpsq, refsq, Rcell, desc, rselect, datarow, pid, cid, refdata, pc;
            var orderstatus = "Shipment Pending";
            var grid;
            var referencerow = 0;
            var generaterow = function (id) {
                var row = {};
                row["OrderId"] = id;
                row["CustomerId"];
                row["OrderDate"];
                row["OrderAmount"];
                row["OrderStatus"];
                return row;
            }
            var shipurl = "/Ship/GetShips";
            var shipSource =
            {
                datafields: [
					{ name: 'ShipId' },
					{ name: 'OrderId' },
					{ name: 'ProductCode' },
                    { name: 'ProductDesc' },
					{ name: 'OrderQty' },
                    { name: 'PendingShipQty' },
                    { name: 'ShipQty' },
                    { name: 'ShipDate', type: 'datetime' },
					{ name: 'OrderDetailId' },
                    { name: 'ShipStatus' },
                    { name: 'Notes' },
                    { name: 'Cancelled' },

                ],
                id: 'ShipId',
                datatype: "json",
                url: shipurl,
                async: false
            };
            var shipDataAdapter = new $.jqx.dataAdapter(shipSource);
            Ships = shipDataAdapter.records;
            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                grid = $($(parentElement).children()[0]);
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = id;
                var filtercondition = 'equal';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                // fill the orders depending on the id.
                var shipssbyid = [];
                for (var m = 0; m < Ships.length; m++) {
                    var result = filter.evaluate(Ships[m]["OrderId"]);
                    if (result)
                        shipssbyid.push(Ships[m]);
                }
                var generaterow = function (id) {
                    var row = {};
                    row["ShipId"];
                    row["OrderId"] = id;
                    row["Notes"] = " ";
                    row["ProductCode"];
                    row["ProductDesc"];
                    row["OrderQty"];
                    row["PendingShipQty"];
                    row["ShipQty"] = 0;
                    row["ShipDate"];
                    row["OrderDetailId"];
                    row["ShipStatus"] = false;
                    row["Cancelled"];
                    return row;
                }
                var shipsource = {
                    datafields: [
                        { name: 'ShipId' },
                        { name: 'OrderId' },
                        { name: 'Notes' },
                        { name: 'ProductCode' },
                        { name: 'ProductDesc' },
                        { name: 'OrderQty' },
                        { name: 'PendingShipQty' },
                        { name: 'ShipQty' },
                        { name: 'ShipDate', type: 'date' },
                        { name: 'OrderDetailId' },
                        { name: "ShipStatus" },
                        { name: "Cancelled" },
                    ],
                    id: 'OrderId',
                    localdata: shipssbyid
                }
                if (grid != null) {
                    grid.jqxGrid({
                        source: shipsource, theme: 'fresh', width: 870, height: 150,
                        editable: true,
                        width: 900,
                        showstatusbar: true,
                        columnsresize: true,
                        columnsreorder: true,
                        enabletooltips: true,
                        sortable: true,
                        renderstatusbar: function (statusbar) {
                            // appends buttons to the status bar.
                            var container = $("<div style='overflow: hidden; position: relative; margin: 2px;'></div>");
                            var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' /><span style='margin-left: 4px; position: relative; top: -3px;'>Add row</span></div>");
                            var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' /><span style='margin-left: 4px; position: relative; top: -3px;'>Delete row</span></div>");
                            var saveButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' /><span style='margin-left: 4px; position: relative; top: -3px;'>Save row</span></div>");
                            var emailButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' /><span style='margin-left: 4px; position: relative; top: -3px;'>eMail carrier</span></div>");
                            var prnButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' /><span style='margin-left: 4px; position: relative; top: -3px;'>Print</span></div>");
                            container.append(addButton);
                            container.append(saveButton);
                            container.append(deleteButton);
                            container.append(emailButton);
                            container.append(prnButton);
                            statusbar.append(container);
                            addButton.jqxButton({ theme: 'ui-sunny', width: 60, height: 15 });
                            deleteButton.jqxButton({ theme: 'ui-sunny', width: 65, height: 15 });
                            saveButton.jqxButton({ theme: 'ui-sunny', width: 65, height: 15 });
                            emailButton.jqxButton({ theme: 'ui-sunny', width: 80, height: 15 });
                            prnButton.jqxButton({ theme: 'ui-sunny', width: 65, height: 15 });
                            // add new row.
                            addButton.click(function (event) {
                                var datainformation = grid.jqxGrid('getdatainformation');
                                var rowscount = datainformation.rowscount;
                                if (rowscount == null || rowscount == undefined)
                                    var rowscount = 0;
                                var editrow = rowscount + 1;
                                var datarow = generaterow(rowscount + 1);
                                datarow.ShipId = (rowscount + 1);
                                datarow.OrderId = id;
                                grid.jqxGrid('addrow', (rowscount + 1), datarow, 'top');
                                mode = 1;
                            });
                            // delete selected row.
                            deleteButton.click(function (event) {
                                var rowscount = grid.jqxGrid('getdatainformation').rowscount;
                                var selectedrowindex = grid.jqxGrid('getselectedrowindex');
                                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                                    var id = grid.jqxGrid('getrowid', selectedrowindex);
                                    var dataRecord = grid.jqxGrid('getrowdata', selectedrowindex);
                                    grid.jqxGrid('deleterow', id);
                                    mode = 0;
                                }
                                var args = event.args;
                                var rowindex = args.rowindex;
                                grid.jqxGrid('deleterow', rowindex);
                             });
                            prnButton.click(function (event) { DoPrintableSections(100, 200) })
                            // save selected row.
                            saveButton.click(function (event) {
                                mode = 0;
                                var selectedrowindex = grid.jqxGrid('getselectedrowindex');
                                var rowscount = grid.jqxGrid('getdatainformation').rowscount;
                                if (selectedrowindex >= 0 && selectedrowindex <= rowscount) {
                                    var id = grid.jqxGrid('getrowid', selectedrowindex);
                                    var dataRecord = grid.jqxGrid('getrowdata', selectedrowindex);
                                    var bal1 = dataRecord.ShipQty;
                                    var bal2 = dataRecord.PendingShipQty;
                                    var val3 = dataRecord.OrderId;
                                    psquantity = psquantity - bal1;
                                    $('#grid').jqxGrid('setcellvalue', Rcell.row, "PendingShipQty", psquantity);
                                    if (shipssbyid.length > 0)
                                        for (var i = 0; i < shipssbyid.length; i++) {
                                            if (dataRecord.PendingShipQty == 0 && shipssbyid[i]["OrderId"] == val3) {
                                                orderstatus = "Payment Pending ";
                                                break;
                                            }
                                        }
                                    else
                                        if (dataRecord.PendingShipQty == 0)
                                            orderstatus = "Payment Pending";
                                    if (dataRecord.ProductCode == null || dataRecord.ProductDesc == null || dataRecord.ShipQty == 0 || dataRecord.OrderQty == 0) {
                                        alert("Incomplete data!!");
                                    }
                                    else {
                                        var jsonString11 = new Array();
                                        var jsonString2 = new Array();
                                        var jsonString3 = new Array();
                                        var dateString = dataRecord.ShipDate;
                                        var month = dateString.getMonth() + 1;
                                        var day = dateString.getDate();
                                        var year = dateString.getFullYear();
                                        key2 = month + "/" + day + "/" + year;
                                        dataRecord.ShipDate = key2;
                                        {
                                            jsonString11 = JSON.stringify(dataRecord);
                                            jsonString2 = jsonString11.replace(/{/, '');
                                            jsonString11 = jsonString2.replace(/}/, '');
                                            jsonString2 = jsonString11.replace(/"/g, '');
                                            jsonString11 = jsonString2.replace(/\w+:/g, '^');
                                            jsonString2 = jsonString11.replace(/\,d+,/g, '');
                                        }
                                        var jsonOfLog;
                                        jsonOfLog = jsonString2;
                                        {
                                            $.ajax
                                            (
                                              {
                                                  cache: false,
                                                  dataType: 'json',
                                                  url: '/Ship/Create?var1=' + orderstatus,
                                                  type: "POST",
                                                  data: { jsonOfLog: jsonOfLog },
                                                  traditional: true,
                                                  success: function (data, status, xhr) {
                                                      alert("returned from server " + data);
                                                  },
                                                  error: function (jqXHR, textStatus, errorThrown) {
                                                      alert(errorThrown);
                                                  }
                                              }
                                            );
                                        }
                                    }
                                }
                            });
                        },
                        columns: [
                          { text: 'OrderId', datafield: 'OrderId', width: 200, hidden: true},
                          { text: 'OrderDtId', datafield: 'OrderDetailId', width: 200, hidden: true },
                          { text: 'Description', datafield: 'ProductDesc',   width: 200 },
                          { text: 'Code', datafield: 'ProductCode', editable: false, width: 100 },
                          {
                              text: 'Ship Date', datafield: 'ShipDate', width: 100, columntype: 'datetimeinput', cellsformat: "MM/dd/yyyy",
                              align: 'center', cellsalign: 'center', cellbeginedit: rowEdit,
                              validation: function (cell, value) {
                                  if (value < new Date()) {
                                      return { result: false, message: " error !! Ship date should be >= today!!" };
                                  }
                                  return true;
                              }
                          },
                          { text: 'Ord Qty', datafield: 'OrderQty', editable: false, width: 70 },
                          { text: 'Ship Bal', datafield: 'PendingShipQty', editable: false, width: 70},
                          {
                              text: 'Stock Qty', datafield: 'StockQty', editable: false, width: 70, cellbeginedit: rowEdit
                          },
                          {
                              text: 'Ship Qty', datafield: 'ShipQty', width: 70, 
                              validation: function (cell, value) {
                                  if (value <= 0) {
                                      return { result: false, message: " error !! Ship Quantity should be >= 1 " };
                                  }
                                  if ((value > psquantity)) {
                                      return { result: false, message: " error !! Ship Quantity should be <= pending ship Quantity !!! " };
                                  }
                                  else if (value <= psquantity) {
                                      $('#grid').jqxGrid('setcellvalue', cell.row, "PendingShipQty", (psquantity - value));
                                      return true;
                                  }
                              }
                          },
                          { text: 'Shipped?', datafield: 'ShipStatus', editable: true, width: 80, columntype: 'checkbox'},
                          { text: 'Notes', datafield: 'Notes', editable: true, width: 330 }
                        ]
                    })
                }
                // nested grid rowclick binding
                $("#grid").on("rowclick", function (event) {
                    var args = event.args;
                    var rowindex = args.rowindex;
                    referencerow = rowindex;
                });
            }
            function DoPrintableSections(wdth, hght) {
                // CreateVirtualCarrier("ContentCarrier");
                var cc = document.getElementById("ContentCarrier");
                var e = document.getElementsByTagName("div");
                var cc = document.getElementById("cc");
                cc.innerHTML = "Cancer curing drugs";
                var content = "Packing slip";
                content += "<br/>" + cc.innerHTML;

                OpenPreviewPage(content, 500, 200);
                cc.innerHTML = "";
            }
            function CreateVirtualCarrier(carriername) {
                var vc = document.createElement('<div id="' + carriername + '" style="+ "width:600; height:200;"></div>');
                document.body.appendChild(vc);
            }
            function OpenPreviewPage(content, wdth, hght) {
                var imgsdir;
                PreviewPage = window.open('', 'PreviewPage', 'width=' + wdth + ',height=' + hght + ',menubar=0,toolbar=1,status=0,scrollbars=1,resizable=1');
                PreviewPage.document.open("text/html", "replace");
                PreviewPage.document.writeln('<html><head><title>PrintPreview</title>'
                + '</head><body align="left"  onLoad="self.focus()">'
                + content
                + '</body>' + '<button onclick="javascript:window.print()">Print</button>' + '</html>');
                PreviewPage.document.close();
            }

            var rowEdit = function (row, column) {
                if (row != 0 && column != "ShipStatus")
                    return false;
                else if (row == 0 && column != "ShipStatus" && mode == 0) {
                    return false;
                }
                else if (row == 0 && mode == 1)
                    return true;
            }
            var renderer = function (row, column, value) {
                return '<span style="margin-left: 4px; margin-top: 5px; float: left;">' + value + '</span>';
            }
            var source3 =
            {
                datatype: "json",
                datafields:
                [
                    { name: 'CustomerId' },
                    { name: 'CustomerName' }
                ],
                url: '/Ship/GetCustomer',
                async: false
            }

            var dropDownLS = new $.jqx.dataAdapter(source3, {
            });
            var source =
                {
                    datafields: [
                        { name: 'OrderId' },
                        { name: 'CustomerName', value: 'CustomerId', values: { source: dropDownLS.records, value: 'CustomerId', name: 'CustomerName' } },
                        { name: 'CustomerId' },
                        { name: 'OrderDate', type: 'date', format: 'MM/dd/yyyy' },
                        { name: 'OrderAmount' },
                        { name: 'OrderStatus' },
                    ],
                    id: 'OrderId',
                    datatype: "json",
                    async: false,
                    url: url
                }
            var orderAdapter = new $.jqx.dataAdapter(source);
            // create jqxgrid
            var invoiceNumRenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                var theStatus = $("#orderheaderGrid").jqxGrid('getrowdata', row).OrderStatus;
                if (theStatus == "Shipment Pending") {
                    return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + ';color: #ff0000;font-weight: bold">' + value + '</span>';
                } else if (theStatus == "Part Shipment") {
                    return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + ';color: #006638;font-weight: bold">' + value + '</span>';
                } else if (theStatus == "New Order") {
                    return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + ';color: #9B30FF;font-weight: bold">' + value + '</span>';
                }
            }
            var OrderNumRenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                var theStatus = $("#orderheaderGrid").jqxGrid('getrowdata', row).OrderAmount;
                if (theStatus > 100000) {
                    return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + ';color: #ff0000;font-weight: bold">' + value + '</span>';
                } else if (theStatus <= 10000) {
                    return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + ';color: #006638;font-weight: bold">' + value + '</span>';
                } else if (theStatus > 10000 && theStatus <= 100000) {
                    return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + ';color: #9B30FF;font-weight: bold">' + value + '</span>';
                }
            }
            var AgeNumRenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                var one_day = 1000 * 60 * 60 * 24;
                var dt = $("#orderheaderGrid").jqxGrid('getrowdata', row).OrderDate;
                var date1 = new Date(dt); //Month is 0-11 in JavaScript
                var date2 = new Date();
                var date1_ms = date1.getTime();
                var date2_ms = date2.getTime();
                var difference_ms = date2_ms - date1_ms;
                theStatus = Math.round(difference_ms / one_day);
                if (theStatus > 2) {
                    return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + ';color: #ff0000;font-weight: bold">' + value + '</span>';
                } else if (theStatus <= 1) {
                    return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + ';color: #006638;font-weight: bold">' + value + '</span>';
                } else if (theStatus == 2) {
                    return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + ';color: #9B30FF;font-weight: bold">' + value + '</span>';
                }
            }
            $("#orderheaderGrid").jqxGrid(
            {
                width: 945,
                height: 370,
                source: orderAdapter,
                theme: 'ui-sunny',
                editable: true,
                rowdetails: true,
                rowsheight: 25,
                columnsresize: true,
                columnsreorder: true,
                enabletooltips: true,
                sortable: true,
                groupable: true,
                filterable: true,
                initrowdetails: initrowdetails,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 3px;'></div>", rowdetailsheight: 150, rowdetailshidden: true },
                ready: function () {
                    $("#orderheaderGrid").jqxGrid('showrowdetails', -1);
                },
                columns:
                [
                      { text: 'OrderId', datafield: 'OrderId', width: 100, editable: false, cellsrenderer: renderer },
                      {
                          text: 'Customer', datafield: 'CustomerId', displayfield: 'CustomerName', columntype: 'dropdownlist', editable: false, width: 380, cellsrenderer: renderer
                      },
                      { text: 'Order Date', datafield: 'OrderDate', formatString: 'MM/dd/yyyy', editable: false, theme: 'ui-sunny', width: 180, cellsrenderer: AgeNumRenderer },
                      { text: 'Order Amount', datafield: 'OrderAmount', width: 100, editable: false, cellsrenderer: OrderNumRenderer },
                      { text: 'Status', datafield: 'OrderStatus', width: 130, cellsalign: 'right', cellsrenderer: invoiceNumRenderer },
                ],
            });
            var generaterow1 = function (id) {
                var row = {};
                row["OrderDetailId"] = id; 
                row["ProductId"];
                row["CategoryId"] = gid1;
                row["BrandId"] = gid2;
                row["OrderId"];
                row["ProductCode"] = " ";
                row["ProductDesc"] = " ";
                row["StockQty"];
                row["Quantity"];
                row["SellPrice"];
                row["ItemValue"];
                row["PendingShipQty"] = 0;
                row["Cancelled"] = 0;
                return row;
            }
            $("#orderheaderGrid").on('rowselect', function (event) {
                gid1 = event.args.row.OrderId;
                orefid = gid1;
                var source1 =
               {
                   //  datafields: dataFields,
                   datatype: "json",
                   datafields:
                   [
                      { name: 'OrderDetailId' },
                      { name: 'ProductId' },
                      { name: 'CategoryId' },
                      { name: 'BrandId' },
                      { name: 'OrderId' },
                      { name: 'ProductCode', type: 'string' },
                      { name: 'ProductDesc', type: 'string' },
                      { name: 'StockQty' },
                      { name: 'Quantity' },
                      { name: 'SellPrice' },
                      { name: 'ItemValue' },
                      { name: 'PendingShipQty' },
                      { name: 'Cancelled' }
                   ],
                   id: 'OrderDetailId',
                   url: '/AmendOrder/GetOrderDetail?var1=' + gid1
               }
                var dataAdapter = new $.jqx.dataAdapter(source1);  //   on 11 feb 2014
                $("#orderdetailGrid").jqxGrid(
                 {
                     width: 945,
                     height: 400,
                     source: dataAdapter,
                     theme: 'ui-sunny',
                     sortable: true,
                     groupable: true,
                     columnsresize: true,
                     columnsreorder: true,
                     keyboardnavigation: false,
                     filterable: true,
                     sortable: true,
                     enabletooltips: true,
                     rendered: function (type) {
                         // select all grid cells.
                         var gridCells = $('#orderdetailGrid').find('.jqx-grid-cell');
                         // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
                         gridCells.jqxDragDrop({
                             appendTo: 'body', theme: "ui-sunny", dragZIndex: 99999,
                             dropAction: 'none',
                             initFeedback: function (feedback) {
                                 feedback.height(25);
                             },
                             onTargetDrop: function (a, b, c, d, e) {

                             },
                             dropTarget: $('#grid0'), revert: true
                         });
                         gridCells.off('dragStart');
                         gridCells.off('dragEnd');
                         gridCells.off('dropTargetEnter');
                         gridCells.off('dropTargetLeave');
                         // disable revert when the dragged cell is over the second Grid.
                         gridCells.on('dropTargetEnter', function () {
                             gridCells.jqxDragDrop({ revert: false });
                         });
                         // enable revert when the dragged cell is outside the second Grid.
                         gridCells.on('dropTargetLeave', function () {
                             gridCells.jqxDragDrop({ revert: true });
                         });
                         // initialize the dragged object.
                         gridCells.on('dragStart', function (event) {
                             var value = $(this).text();
                             var position = $.jqx.position(event.args);
                             var cell = $("#orderdetailGrid").jqxGrid('getcellatposition', position.left, position.top);  // original line
                             refdata = 0; // ADDED 30 jan 2014
                             refdata = $('#orderdetailGrid').jqxGrid('getcellvalue', cell.row, "OrderDetailId");  // ADDED 30 jan 2014
                             $(this).jqxDragDrop('data', {
                                 value: value
                             });
                         });
                         // set the new cell value when the dragged cell is dropped over the second Grid.
                         gridCells.on('dragEnd', function (event) {
                             oldvalue = 0; 
                             var idx = 0;
                             var valueDesc = $(this).text(); 
                             var position = $.jqx.position(event.args);
                             var cell;
                             var grid = "grid" + referencerow;
                             cell = $("#grid").jqxGrid('getcellatposition', position.left, position.top);
                             Rcell = cell;
                             if (valueDesc != null) {
                            //     idx = getItemIndex(valueDesc + refdata);  // ADDED refdata on 30 Jan 2014
                                 idx = 1;
                                 if (idx != -1) {
                                     if (cell != null) {
                                         var vd2 = $('#grid').jqxGrid('getcellvalue', cell.row, " ProductDesc");
                                         var aq2 = $('#grid').jqxGrid('getcellvalue', cell.row, "OrderQty");
                                         var pq2 = $('#grid').jqxGrid('getcellvalue', cell.row, "PendingShipQty");
                                         var sid = $('#grid').jqxGrid('getcellvalue', cell.row, "ShipId");
                                         var oid = $('#grid').jqxGrid('getcellvalue', cell.row, "OrderId");
                                         if ((vd2 == null) && (aq2 != 0 || pq2 != 0) && (orefid == oid)) {  // changed both from /
                                             //addded oid==gid
                                             cartItems.push(valueDesc);
                                             $("#grid").jqxGrid('setcellvalue', cell.row, "ProductDesc", valueDesc);
                                             $("#grid").jqxGrid('setcellvalue', cell.row, "ProductCode", pc);
                                             $("#grid").jqxGrid('setcellvalue', cell.row, "OrderQty", stockqty);
                                             $("#grid").jqxGrid('setcellvalue', cell.row, "PendingShipQty", psquantity);
                                             $("#grid").jqxGrid('setcellvalue', cell.row, "OrderDetailId", odid);
                                             $("#grid").jqxGrid('setcellvalue', cell.row, "StockQty", invqty);
                                             cartItems.push(valueDesc + refdata);// ADDED refdata on 30 Jan 2014
                                             var sri = 0;
                                             valueDesc = " "; // added today
                                         }
                                         else {
                                             alert("Drop properly on a empty row / add new row / check OrderId, Drag and drop item on it !!!");
                                         }
                                     }
                                 }
                                 else {
                                     var sq2 = $('#grid').jqxGrid('getcellvalue', cell.row, "OrderQty");
                                     oldvalue = sq2;
                                     alert("Item already exists !!!  ");
                                 }
                             }
                         })
                         function getItemIndex(value) {
                             for (var i = 0; i < cartItems.length; i += 1) {
                                 if (cartItems[i] == value) {
                                     return -1;
                                 }
                             }
                             return i;
                         };
                         $("#orderdetailGrid").bind('cellclick', function (event) {
                             alert("cell clicked order detail ");
                             var index = event.args.rowindex;
                             var dataRecord = $("#orderdetailGrid").jqxGrid('getrowdata', index);
                             stockqty = dataRecord.Quantity;
                             sellprice = dataRecord.SellPrice;
                             pc = dataRecord.ProductCode;
                             psquantity = dataRecord.PendingShipQty;
                             pid = dataRecord.ProductId;
                             gid1 = dataRecord.CategoryId;
                             gid2 = dataRecord.BrandId;
                             oid = dataRecord.OrderId;
                             odid = dataRecord.OrderDetailId;
                             invqty = dataRecord.StockQty;
                         });
                     },
                     theme: 'ui-sunny',
                     selectionmode: 'singlerow',
                     columns:
                     [
                        { text: 'ProductId', datafield: 'ProductId', hidden: true, width: 100 },
                        { text: 'CategoryId', datafield: 'CategoryId', hidden: true, width: 100 },
                        { text: 'BrandId', datafield: 'BrandId', hidden: true, width: 100 },
                        { text: 'OrderId', datafield: 'OrderId', width: 50 },
                        { text: 'O-DetlId', datafield: 'OrderDetailId', width: 60 },
                        { text: 'Product Code', datafield: 'ProductCode', width: 115 },
                        { text: 'Description', datafield: 'ProductDesc', width: 300 },
                        { text: 'Model', datafield: 'Model', width: 180 },
                        { text: 'Stock Qty', datafield: 'StockQty', width: 80 },
                        { text: 'Qty', datafield: 'Quantity', width: 80 },
                        { text: 'Price', datafield: 'SellPrice', width: 80 },
                        { text: 'Pending Ship Qty', datafield: 'PendingShipQty', width: 80 },
                     ]
                 });
            });
            var menuNo = 12;
            var lenth = 14;

            for (var j = 1; j <= lenth; j++) {
                if (j == menuNo) {
                    $(("#") + (j)).css("background-color", "maroon");
                }
                else
                    $(("#") + (j)).css("background-color", "null");
            }
            wireUpEvents();
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="orderheaderGrid"></div>
        <div id="grid"></div>
        <div id="orderdetailGrid" style="margin-left: 1px; margin-top: 7px;"></div>
        <div id="cc" style="margin-left: 1px; margin-top: 7px;"></div>
    </div>
</body>
</html>

June 28, 2015 at 1:52 am Design flaw ? not possible to implement Nested Grid with Drag-drop #73108

Keshavan

Participant

Hi,

Jqwidgets version 3.8

Thanks,
Keshavan

June 29, 2015 at 8:10 am Design flaw ? not possible to implement Nested Grid with Drag-drop #73127

Dimitar

Participant

Hi Keshavan,

We cannot test your example, because we do not have access to your grid data. Your code is also too extensive for us to look into thoroughly. If you can reproduce the behaviour on a smaller scale or if you wish us to examine only a part of the code, we may be able to assist you. Share if any errors are thrown in your browser’s console, too.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

June 29, 2015 at 8:32 am Design flaw ? not possible to implement Nested Grid with Drag-drop #73132

Keshavan

Participant

Hi Dimitar,

I have removed code not relevant and here is the shortened code.
Thanks
Keshavan

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>
        In order to enter in edit mode, click any of the 'Edit' buttons. To save the changes, click the 'Save' button in the popup dialog. To cancel the changes
        click the 'Cancel' button in the popup dialog.
    </title>
    <link rel="stylesrIdheet" href="/Content/Site.css" type="text/css" />
    <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
    <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.fresh.css" type="text/css" />
    <script type="text/javascript" src="/JqWidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/JqWidgets/scripts/check_browser_close.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxselection.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxselection.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        var refGrid;
        $(document).ready(function () {
            var gid1 = gid2 = quantity = sellprice = psquantity = Tamt = Tqty = rqty = ctr = ref = ref1 = order_id = id = rowcount = mode = 0;
            var gid3 = 1;
            var data = {};
            var cartItems = [];
            var valueDesc = " ";
            var arowid = [];
            var jsonString1 = new Array();
            var jsonString2 = [];
            var theme = "ui-sunny";
            var url = "/Ship/GetOrders";
            var urunId, oid, odid, refoid, invqty, refpsq, refsq, Rcell, desc, rselect, datarow, pid, cid, refdata, pc;
            var orderstatus = "Shipment Pending";
            var grid;
            var referencerow = 0;
            var generaterow = function (id) {
                var row = {};
                row["OrderId"] = id;
                row["CustomerId"];
                row["OrderDate"];
                row["OrderAmount"];
                row["OrderStatus"];
                return row;
            }
            var shipurl = "/Ship/GetShips";
            var shipSource =
            {
                datafields: [
					{ name: 'ShipId' },
					{ name: 'OrderId' },
					{ name: 'ProductCode' },
                    { name: 'ProductDesc' },
					{ name: 'OrderQty' },
                    { name: 'PendingShipQty' },
                    { name: 'ShipQty' },
                    { name: 'ShipDate', type: 'datetime' },
					{ name: 'OrderDetailId' },
                    { name: 'ShipStatus' },
                    { name: 'Notes' },
                    { name: 'Cancelled' },

                ],
                id: 'ShipId',
                datatype: "json",
                url: shipurl,
                async: false
            };
            var shipDataAdapter = new $.jqx.dataAdapter(shipSource);
            Ships = shipDataAdapter.records;
            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                grid = $($(parentElement).children()[0]);
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = id;
                var filtercondition = 'equal';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                // fill the orders depending on the id.
                var shipssbyid = [];
                for (var m = 0; m < Ships.length; m++) {
                    var result = filter.evaluate(Ships[m]["OrderId"]);
                    if (result)
                        shipssbyid.push(Ships[m]);
                }
                var generaterow = function (id) {
                    var row = {};
                    row["ShipId"];
                    row["OrderId"] = id;
                    row["Notes"] = " ";
                    row["ProductCode"];
                    row["ProductDesc"];
                    row["OrderQty"];
                    row["PendingShipQty"];
                    row["ShipQty"] = 0;
                    row["ShipDate"];
                    row["OrderDetailId"];
                    row["ShipStatus"] = false;
                    row["Cancelled"];
                    return row;
                }
                var shipsource = {
                    datafields: [
                        { name: 'ShipId' },
                        { name: 'OrderId' },
                        { name: 'Notes' },
                        { name: 'ProductCode' },
                        { name: 'ProductDesc' },
                        { name: 'OrderQty' },
                        { name: 'PendingShipQty' },
                        { name: 'ShipQty' },
                        { name: 'ShipDate', type: 'date' },
                        { name: 'OrderDetailId' },
                        { name: "ShipStatus" },
                        { name: "Cancelled" },
                    ],
                    id: 'OrderId',
                    localdata: shipssbyid
                }
                if (grid != null) {
                    grid.jqxGrid({
                        source: shipsource, theme: 'fresh', width: 870, height: 150,
                        editable: true,
                        width: 900,
                        showstatusbar: true,
                        columnsresize: true,
                        columnsreorder: true,
                        enabletooltips: true,
                        sortable: true,
                        renderstatusbar: function (statusbar) {
                            // appends buttons to the status bar.
                            var container = $("<div style='overflow: hidden; position: relative; margin: 2px;'></div>");
                            var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' /><span style='margin-left: 4px; position: relative; top: -3px;'>Add row</span></div>");
                            var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' /><span style='margin-left: 4px; position: relative; top: -3px;'>Delete row</span></div>");
                            var saveButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' /><span style='margin-left: 4px; position: relative; top: -3px;'>Save row</span></div>");
                            var emailButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' /><span style='margin-left: 4px; position: relative; top: -3px;'>eMail carrier</span></div>");
                            var prnButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' /><span style='margin-left: 4px; position: relative; top: -3px;'>Print</span></div>");
                            container.append(addButton);
                            container.append(saveButton);
                            container.append(deleteButton);
                            container.append(emailButton);
                            container.append(prnButton);
                            statusbar.append(container);
                            addButton.jqxButton({ theme: 'ui-sunny', width: 60, height: 15 });
                            deleteButton.jqxButton({ theme: 'ui-sunny', width: 65, height: 15 });
                            saveButton.jqxButton({ theme: 'ui-sunny', width: 65, height: 15 });
                            emailButton.jqxButton({ theme: 'ui-sunny', width: 80, height: 15 });
                            prnButton.jqxButton({ theme: 'ui-sunny', width: 65, height: 15 });
                            // add new row.
                            addButton.click(function (event) {
                                var datainformation = grid.jqxGrid('getdatainformation');
                                var rowscount = datainformation.rowscount;
                                if (rowscount == null || rowscount == undefined)
                                    var rowscount = 0;
                                var editrow = rowscount + 1;
                                var datarow = generaterow(rowscount + 1);
                                datarow.ShipId = (rowscount + 1);
                                datarow.OrderId = id;
                                grid.jqxGrid('addrow', (rowscount + 1), datarow, 'top');
                                mode = 1;
                            });
                            // delete selected row.
                            deleteButton.click(function (event) {
                                var rowscount = grid.jqxGrid('getdatainformation').rowscount;
                                var selectedrowindex = grid.jqxGrid('getselectedrowindex');
                                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                                    var id = grid.jqxGrid('getrowid', selectedrowindex);
                                    var dataRecord = grid.jqxGrid('getrowdata', selectedrowindex);
                                    grid.jqxGrid('deleterow', id);
                                    mode = 0;
                                }
                                var args = event.args;
                                var rowindex = args.rowindex;
                                grid.jqxGrid('deleterow', rowindex);
                             });
                            prnButton.click(function (event) { DoPrintableSections(100, 200) })
                            // save selected row.
                            saveButton.click(function (event) {
                                mode = 0;
                                var selectedrowindex = grid.jqxGrid('getselectedrowindex');
                                var rowscount = grid.jqxGrid('getdatainformation').rowscount;
                                if (selectedrowindex >= 0 && selectedrowindex <= rowscount) {
                                    var id = grid.jqxGrid('getrowid', selectedrowindex);
                                    var dataRecord = grid.jqxGrid('getrowdata', selectedrowindex);
                                    var bal1 = dataRecord.ShipQty;
                                    var bal2 = dataRecord.PendingShipQty;
                                    var val3 = dataRecord.OrderId;
                                    psquantity = psquantity - bal1;
                                    $('#grid').jqxGrid('setcellvalue', Rcell.row, "PendingShipQty", psquantity);
                                    if (shipssbyid.length > 0)
                                        for (var i = 0; i < shipssbyid.length; i++) {
                                            if (dataRecord.PendingShipQty == 0 && shipssbyid[i]["OrderId"] == val3) {
                                                orderstatus = "Payment Pending ";
                                                break;
                                            }
                                        }
                                    else
                                        if (dataRecord.PendingShipQty == 0)
                                            orderstatus = "Payment Pending";
                                    if (dataRecord.ProductCode == null || dataRecord.ProductDesc == null || dataRecord.ShipQty == 0 || dataRecord.OrderQty == 0) {
                                        alert("Incomplete data!!");
                                    }
                                    else {
                                        var jsonString11 = new Array();
                                        var jsonString2 = new Array();
                                        var jsonString3 = new Array();
                                        var dateString = dataRecord.ShipDate;
                                        var month = dateString.getMonth() + 1;
                                        var day = dateString.getDate();
                                        var year = dateString.getFullYear();
                                        key2 = month + "/" + day + "/" + year;
                                        dataRecord.ShipDate = key2;
                                        {
                                            jsonString11 = JSON.stringify(dataRecord);
                                            jsonString2 = jsonString11.replace(/{/, '');
                                            jsonString11 = jsonString2.replace(/}/, '');
                                            jsonString2 = jsonString11.replace(/"/g, '');
                                            jsonString11 = jsonString2.replace(/\w+:/g, '^');
                                            jsonString2 = jsonString11.replace(/\,d+,/g, '');
                                        }
                                        var jsonOfLog;
                                        jsonOfLog = jsonString2;
                                        {
                                            $.ajax
                                            (
                                              {
                                                  cache: false,
                                                  dataType: 'json',
                                                  url: '/Ship/Create?var1=' + orderstatus,
                                                  type: "POST",
                                                  data: { jsonOfLog: jsonOfLog },
                                                  traditional: true,
                                                  success: function (data, status, xhr) {
                                                      alert("returned from server " + data);
                                                  },
                                                  error: function (jqXHR, textStatus, errorThrown) {
                                                      alert(errorThrown);
                                                  }
                                              }
                                            );
                                        }
                                    }
                                }
                            });
                        },
                        columns: [
                          { text: 'OrderId', datafield: 'OrderId', width: 200, hidden: true},
                          { text: 'OrderDtId', datafield: 'OrderDetailId', width: 200, hidden: true },
                          { text: 'Description', datafield: 'ProductDesc',   width: 200 },
                          { text: 'Code', datafield: 'ProductCode', editable: false, width: 100 },
                          {
                              text: 'Ship Date', datafield: 'ShipDate', width: 100, columntype: 'datetimeinput', cellsformat: "MM/dd/yyyy",
                              align: 'center', cellsalign: 'center'
                              validation: function (cell, value) {
                                  if (value < new Date()) {
                                      return { result: false, message: " error !! Ship date should be >= today!!" };
                                  }
                                  return true;
                              }
                          },
                          { text: 'Ord Qty', datafield: 'OrderQty', editable: false, width: 70 },
                          { text: 'Ship Bal', datafield: 'PendingShipQty', editable: false, width: 70},
                          {
                              text: 'Stock Qty', datafield: 'StockQty', editable: false, width: 70
                          },
                          {
                              text: 'Ship Qty', datafield: 'ShipQty', width: 70, 
                              validation: function (cell, value) {
                                  if (value <= 0) {
                                      return { result: false, message: " error !! Ship Quantity should be >= 1 " };
                                  }
                                  if ((value > psquantity)) {
                                      return { result: false, message: " error !! Ship Quantity should be <= pending ship Quantity !!! " };
                                  }
                                  else if (value <= psquantity) {
                                      $('#grid').jqxGrid('setcellvalue', cell.row, "PendingShipQty", (psquantity - value));
                                      return true;
                                  }
                              }
                          },
                          { text: 'Shipped?', datafield: 'ShipStatus', editable: true, width: 80, columntype: 'checkbox'},
                          { text: 'Notes', datafield: 'Notes', editable: true, width: 330 }
                        ]
                    })
                }
                // nested grid rowclick binding
                $("#grid").on("rowclick", function (event) {
                    var args = event.args;
                    var rowindex = args.rowindex;
                    referencerow = rowindex;
                });
            }
            var source3 =
            {
                datatype: "json",
                datafields:
                [
                    { name: 'CustomerId' },
                    { name: 'CustomerName' }
                ],
                url: '/Ship/GetCustomer',
                async: false
            }

            var dropDownLS = new $.jqx.dataAdapter(source3, {
            });
            var source =
                {
                    datafields: [
                        { name: 'OrderId' },
                        { name: 'CustomerName', value: 'CustomerId', values: { source: dropDownLS.records, value: 'CustomerId', name: 'CustomerName' } },
                        { name: 'CustomerId' },
                        { name: 'OrderDate', type: 'date', format: 'MM/dd/yyyy' },
                        { name: 'OrderAmount' },
                        { name: 'OrderStatus' },
                    ],
                    id: 'OrderId',
                    datatype: "json",
                    async: false,
                    url: url
                }
            var orderAdapter = new $.jqx.dataAdapter(source);
            $("#orderheaderGrid").jqxGrid(
            {
                width: 945,
                height: 370,
                source: orderAdapter,
                theme: 'ui-sunny',
                editable: true,
                rowdetails: true,
                rowsheight: 25,
                columnsresize: true,
                columnsreorder: true,
                enabletooltips: true,
                sortable: true,
                groupable: true,
                filterable: true,
                initrowdetails: initrowdetails,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 3px;'></div>", rowdetailsheight: 150, rowdetailshidden: true },
                ready: function () {
                    $("#orderheaderGrid").jqxGrid('showrowdetails', -1);
                },
                columns:
                [
                      { text: 'OrderId', datafield: 'OrderId', width: 100, editable: false },
                      {
                          text: 'Customer', datafield: 'CustomerId', displayfield: 'CustomerName', columntype: 'dropdownlist', editable: false, width: 380
                      },
                      { text: 'Order Date', datafield: 'OrderDate', formatString: 'MM/dd/yyyy', editable: false, theme: 'ui-sunny', width: 180 },
                      { text: 'Order Amount', datafield: 'OrderAmount', width: 100, editable: false },
                      { text: 'Status', datafield: 'OrderStatus', width: 130, cellsalign: 'right'},
                ],
            });
            var generaterow1 = function (id) {
                var row = {};
                row["OrderDetailId"] = id; 
                row["ProductId"];
                row["CategoryId"] = gid1;
                row["BrandId"] = gid2;
                row["OrderId"];
                row["ProductCode"] = " ";
                row["ProductDesc"] = " ";
                row["StockQty"];
                row["Quantity"];
                row["SellPrice"];
                row["ItemValue"];
                row["PendingShipQty"] = 0;
                row["Cancelled"] = 0;
                return row;
            }
            $("#orderheaderGrid").on('rowselect', function (event) {
                gid1 = event.args.row.OrderId;
                orefid = gid1;
                var source1 =
               {
                   //  datafields: dataFields,
                   datatype: "json",
                   datafields:
                   [
                      { name: 'OrderDetailId' },
                      { name: 'ProductId' },
                      { name: 'CategoryId' },
                      { name: 'BrandId' },
                      { name: 'OrderId' },
                      { name: 'ProductCode', type: 'string' },
                      { name: 'ProductDesc', type: 'string' },
                      { name: 'StockQty' },
                      { name: 'Quantity' },
                      { name: 'SellPrice' },
                      { name: 'ItemValue' },
                      { name: 'PendingShipQty' },
                      { name: 'Cancelled' }
                   ],
                   id: 'OrderDetailId',
                   url: '/AmendOrder/GetOrderDetail?var1=' + gid1
               }
                var dataAdapter = new $.jqx.dataAdapter(source1);  //   on 11 feb 2014
                $("#orderdetailGrid").jqxGrid(
                 {
                     width: 945,
                     height: 400,
                     source: dataAdapter,
                     theme: 'ui-sunny',
                     sortable: true,
                     groupable: true,
                     columnsresize: true,
                     columnsreorder: true,
                     keyboardnavigation: false,
                     filterable: true,
                     sortable: true,
                     enabletooltips: true,
                     rendered: function (type) {
                         // select all grid cells.
                         var gridCells = $('#orderdetailGrid').find('.jqx-grid-cell');
                         // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
                         gridCells.jqxDragDrop({
                             appendTo: 'body', theme: "ui-sunny", dragZIndex: 99999,
                             dropAction: 'none',
                             initFeedback: function (feedback) {
                                 feedback.height(25);
                             },
                             onTargetDrop: function (a, b, c, d, e) {

                             },
                             dropTarget: $('#grid0'), revert: true
                         });
                         gridCells.off('dragStart');
                         gridCells.off('dragEnd');
                         gridCells.off('dropTargetEnter');
                         gridCells.off('dropTargetLeave');
                         // disable revert when the dragged cell is over the second Grid.
                         gridCells.on('dropTargetEnter', function () {
                             gridCells.jqxDragDrop({ revert: false });
                         });
                         // enable revert when the dragged cell is outside the second Grid.
                         gridCells.on('dropTargetLeave', function () {
                             gridCells.jqxDragDrop({ revert: true });
                         });
                         // initialize the dragged object.
                         gridCells.on('dragStart', function (event) {
                             var value = $(this).text();
                             var position = $.jqx.position(event.args);
                             var cell = $("#orderdetailGrid").jqxGrid('getcellatposition', position.left, position.top);  // original line
                             refdata = 0; // ADDED 30 jan 2014
                             refdata = $('#orderdetailGrid').jqxGrid('getcellvalue', cell.row, "OrderDetailId");  // ADDED 30 jan 2014
                             $(this).jqxDragDrop('data', {
                                 value: value
                             });
                         });
                         // set the new cell value when the dragged cell is dropped over the second Grid.
                         gridCells.on('dragEnd', function (event) {
                             oldvalue = 0; 
                             var idx = 0;
                             var valueDesc = $(this).text(); 
                             var position = $.jqx.position(event.args);
                             var cell;
                             var grid = "grid" + referencerow;
                             cell = $("#grid").jqxGrid('getcellatposition', position.left, position.top);
                             Rcell = cell;
                             if (valueDesc != null) {
                            //     idx = getItemIndex(valueDesc + refdata);  // ADDED refdata on 30 Jan 2014
                                 idx = 1;
                                 if (idx != -1) {
                                     if (cell != null) {
                                         var vd2 = $('#grid').jqxGrid('getcellvalue', cell.row, " ProductDesc");
                                         var aq2 = $('#grid').jqxGrid('getcellvalue', cell.row, "OrderQty");
                                         var pq2 = $('#grid').jqxGrid('getcellvalue', cell.row, "PendingShipQty");
                                         var sid = $('#grid').jqxGrid('getcellvalue', cell.row, "ShipId");
                                         var oid = $('#grid').jqxGrid('getcellvalue', cell.row, "OrderId");
                                         if ((vd2 == null) && (aq2 != 0 || pq2 != 0) && (orefid == oid)) {  // changed both from /
                                             //addded oid==gid
                                             cartItems.push(valueDesc);
                                             $("#grid").jqxGrid('setcellvalue', cell.row, "ProductDesc", valueDesc);
                                             $("#grid").jqxGrid('setcellvalue', cell.row, "ProductCode", pc);
                                             $("#grid").jqxGrid('setcellvalue', cell.row, "OrderQty", stockqty);
                                             $("#grid").jqxGrid('setcellvalue', cell.row, "PendingShipQty", psquantity);
                                             $("#grid").jqxGrid('setcellvalue', cell.row, "OrderDetailId", odid);
                                             $("#grid").jqxGrid('setcellvalue', cell.row, "StockQty", invqty);
                                             cartItems.push(valueDesc + refdata);// ADDED refdata on 30 Jan 2014
                                             var sri = 0;
                                             valueDesc = " "; // added today
                                         }
                                         else {
                                             alert("Drop properly on a empty row / add new row / check OrderId, Drag and drop item on it !!!");
                                         }
                                     }
                                 }
                                 else {
                                     var sq2 = $('#grid').jqxGrid('getcellvalue', cell.row, "OrderQty");
                                     oldvalue = sq2;
                                     alert("Item already exists !!!  ");
                                 }
                             }
                         })
                         function getItemIndex(value) {
                             for (var i = 0; i < cartItems.length; i += 1) {
                                 if (cartItems[i] == value) {
                                     return -1;
                                 }
                             }
                             return i;
                         };
                         $("#orderdetailGrid").bind('cellclick', function (event) {
                             alert("cell clicked order detail ");
                             var index = event.args.rowindex;
                             var dataRecord = $("#orderdetailGrid").jqxGrid('getrowdata', index);
                             stockqty = dataRecord.Quantity;
                             sellprice = dataRecord.SellPrice;
                             pc = dataRecord.ProductCode;
                             psquantity = dataRecord.PendingShipQty;
                             pid = dataRecord.ProductId;
                             gid1 = dataRecord.CategoryId;
                             gid2 = dataRecord.BrandId;
                             oid = dataRecord.OrderId;
                             odid = dataRecord.OrderDetailId;
                             invqty = dataRecord.StockQty;
                         });
                     },
                     theme: 'ui-sunny',
                     selectionmode: 'singlerow',
                     columns:
                     [
                        { text: 'ProductId', datafield: 'ProductId', hidden: true, width: 100 },
                        { text: 'CategoryId', datafield: 'CategoryId', hidden: true, width: 100 },
                        { text: 'BrandId', datafield: 'BrandId', hidden: true, width: 100 },
                        { text: 'OrderId', datafield: 'OrderId', width: 50 },
                        { text: 'O-DetlId', datafield: 'OrderDetailId', width: 60 },
                        { text: 'Product Code', datafield: 'ProductCode', width: 115 },
                        { text: 'Description', datafield: 'ProductDesc', width: 300 },
                        { text: 'Model', datafield: 'Model', width: 180 },
                        { text: 'Stock Qty', datafield: 'StockQty', width: 80 },
                        { text: 'Qty', datafield: 'Quantity', width: 80 },
                        { text: 'Price', datafield: 'SellPrice', width: 80 },
                        { text: 'Pending Ship Qty', datafield: 'PendingShipQty', width: 80 },
                     ]
                 });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="orderheaderGrid"></div>
        <div id="grid"></div>
        <div id="orderdetailGrid" style="margin-left: 1px; margin-top: 7px;"></div>
        <div id="cc" style="margin-left: 1px; margin-top: 7px;"></div>
    </div>
</body>
</html>

June 29, 2015 at 9:22 am Design flaw ? not possible to implement Nested Grid with Drag-drop #73134

Keshavan

Participant

Nested Grid – DRag/Drop implementation details.
Outer grid name – orderheaderGrid
Inner grid name – grid
Name of the Other Grid (seperate from Nested Grid) – orderdetailGrid.
Nested Grid is properly implemented and is working OK. orderdetail grid is seperately working OK.

Issue only in Drag-Drop.
———————–
I have Implemented Drag-Drop from the above mentioned Other Grid(orderdetailGrid) in to inner grid (name of Grid – grid) of nested Grid.
With below drag-drop implementation , i am referenncing “cell” in dragend as in the below line,

cell = $(“#grid”).jqxGrid(‘getcellatposition’, position.left, position.top);

Browser Console displayed – Invalid selctor – check Id or Css.

when i checked the Id programatically, in Nested Grid, The Inner grid (name of Grid : grid) the Id was grid0, grid1, grid2, …. gridn depending
on the row of the outer grid of nested grid.

so i used, var grid = “grid” + referencerow; in dragend code (pasted below).
cell = $(“#grid”).jqxGrid(‘getcellatposition’, position.left, position.top);

// nested grid rowclick binding
$(“#grid”).on(“rowclick”, function (event) {
var args = event.args;
var rowindex = args.rowindex;
referencerow = rowindex;
});

Now , browser console shows NO error but Drop doesn’t happen, the target row remains blank.

$(“#orderdetailGrid”).jqxGrid(
{
width: 945,
height: 400,
source: dataAdapter,
theme: ‘ui-sunny’,
sortable: true,
groupable: true,
columnsresize: true,
columnsreorder: true,
keyboardnavigation: false,
filterable: true,
sortable: true,
enabletooltips: true,
rendered: function (type) {
// select all grid cells.
var gridCells = $(‘#orderdetailGrid’).find(‘.jqx-grid-cell’);
// initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
gridCells.jqxDragDrop({
appendTo: ‘body’, theme: “ui-sunny”, dragZIndex: 99999,
dropAction: ‘none’,
initFeedback: function (feedback) {
feedback.height(25);
},
onTargetDrop: function (a, b, c, d, e) {

},
dropTarget: $(‘#grid0’), revert: true
});
gridCells.off(‘dragStart’);
gridCells.off(‘dragEnd’);
gridCells.off(‘dropTargetEnter’);
gridCells.off(‘dropTargetLeave’);
// disable revert when the dragged cell is over the second Grid.
gridCells.on(‘dropTargetEnter’, function () {
gridCells.jqxDragDrop({ revert: false });
});
// enable revert when the dragged cell is outside the second Grid.
gridCells.on(‘dropTargetLeave’, function () {
gridCells.jqxDragDrop({ revert: true });
});
// initialize the dragged object.
gridCells.on(‘dragStart’, function (event) {
var value = $(this).text();
var position = $.jqx.position(event.args);
var cell = $(“#orderdetailGrid”).jqxGrid(‘getcellatposition’, position.left, position.top); // original line
refdata = 0; // ADDED 30 jan 2014
refdata = $(‘#orderdetailGrid’).jqxGrid(‘getcellvalue’, cell.row, “OrderDetailId”); // ADDED 30 jan 2014
$(this).jqxDragDrop(‘data’, {
value: value
});
});
// set the new cell value when the dragged cell is dropped over the second Grid.
gridCells.on(‘dragEnd’, function (event) {
oldvalue = 0;
var idx = 0;
var valueDesc = $(this).text();
var position = $.jqx.position(event.args);
var cell;
var grid = “grid” + referencerow;
cell = $(“#grid”).jqxGrid(‘getcellatposition’, position.left, position.top);
Rcell = cell;
if (valueDesc != null) {
// idx = getItemIndex(valueDesc + refdata); // ADDED refdata on 30 Jan 2014
idx = 1;
if (idx != -1) {
if (cell != null) {
var vd2 = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, ” ProductDesc”);
var aq2 = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “OrderQty”);
var pq2 = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “PendingShipQty”);
var sid = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “ShipId”);
var oid = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “OrderId”);
if ((vd2 == null) && (aq2 != 0 || pq2 != 0) && (orefid == oid)) { // changed both from /
//addded oid==gid
cartItems.push(valueDesc);
$(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “ProductDesc”, valueDesc);
$(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “ProductCode”, pc);
$(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “OrderQty”, stockqty);
$(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “PendingShipQty”, psquantity);
$(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “OrderDetailId”, odid);
$(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “StockQty”, invqty);
cartItems.push(valueDesc + refdata);// ADDED refdata on 30 Jan 2014
var sri = 0;
valueDesc = ” “; // added today
}
else {
alert(“Drop properly on a empty row / add new row / check OrderId, Drag and drop item on it !!!”);
}
}
}
else {
var sq2 = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “OrderQty”);
oldvalue = sq2;
alert(“Item already exists !!! “);
}
}
})
My HTML is as below,

June 29, 2015 at 9:31 am Design flaw ? not possible to implement Nested Grid with Drag-drop #73136

Keshavan

Participant

Hi,

Here is the Shortened, formatted code.
Thanks,
Keshavan

cell = $(“#grid”).jqxGrid(‘getcellatposition’, position.left, position.top);

Browser Console displayed – Invalid selctor – check Id or Css.

when i checked the Id programatically, in Nested Grid, The Inner grid (name of Grid : grid) the Id was grid0, grid1, grid2, …. gridn depending
on the row of the outer grid of nested grid.

so i used, var grid = “grid” + referencerow; in dragend code (pasted below).
cell = $(“#grid”).jqxGrid(‘getcellatposition’, position.left, position.top);

referencerow is a global variable.

// nested grid rowclick binding
$(“#grid”).on(“rowclick”, function (event) {
var args = event.args;
var rowindex = args.rowindex;
referencerow = rowindex;
});

Now , browser console shows NO error but Drop doesn’t happen, the target row remains blank.

$(“#orderdetailGrid”).jqxGrid(
 {
 width: 945,
 height: 400,
 source: dataAdapter,
 theme: ‘ui-sunny’,
sortable: true,
 groupable: true,
 columnsresize: true,
 columnsreorder: true,
 keyboardnavigation: false,
 filterable: true,
 sortable: true,
 enabletooltips: true,
 rendered: function (type) {
 // select all grid cells.
 var gridCells = $(‘#orderdetailGrid’).find(‘.jqx-grid-cell’);
 // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
 gridCells.jqxDragDrop({
 appendTo: ‘body’, theme: “ui-sunny”, dragZIndex: 99999,
 dropAction: ‘none’,
initFeedback: function (feedback) {
 feedback.height(25);
 },
 onTargetDrop: function (a, b, c, d, e) {

},
 dropTarget: $(‘#grid0′), revert: true
 });
 gridCells.off(‘dragStart’);
gridCells.off(‘dragEnd’);
gridCells.off(‘dropTargetEnter’);
gridCells.off(‘dropTargetLeave’);
 // disable revert when the dragged cell is over the second Grid.
 gridCells.on(‘dropTargetEnter’, function () {
 gridCells.jqxDragDrop({ revert: false });
 });
 // enable revert when the dragged cell is outside the second Grid.
 gridCells.on(‘dropTargetLeave’, function () {
 gridCells.jqxDragDrop({ revert: true });
 });
 // initialize the dragged object.
 gridCells.on(‘dragStart’, function (event) {
 var value = $(this).text();
 var position = $.jqx.position(event.args);
 var cell = $(“#orderdetailGrid”).jqxGrid(‘getcellatposition’, position.left, position.top); // original line
 refdata = 0; // ADDED 30 jan 2014
 refdata = $(‘#orderdetailGrid’).jqxGrid(‘getcellvalue’, cell.row, “OrderDetailId”); // ADDED 30 jan 2014
 $(this).jqxDragDrop(‘data’, {
value: value
 });
 });
 // set the new cell value when the dragged cell is dropped over the second Grid.
 gridCells.on(‘dragEnd’, function (event) {
 oldvalue = 0;
 var idx = 0;
 var valueDesc = $(this).text();
 var position = $.jqx.position(event.args);
 var cell;
 var grid = “grid” + referencerow;
 cell = $(“#grid”).jqxGrid(‘getcellatposition’, position.left, position.top);
 Rcell = cell;
 if (valueDesc != null) {
 // idx = getItemIndex(valueDesc + refdata); // ADDED refdata on 30 Jan 2014
 idx = 1;
 if (idx != -1) {
 if (cell != null) {
 var vd2 = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, ” ProductDesc”);
var aq2 = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “OrderQty”);
var pq2 = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “PendingShipQty”);
var sid = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “ShipId”);
var oid = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “OrderId”);
if ((vd2 == null) && (aq2 != 0 || pq2 != 0) && (orefid == oid)) { // changed both from /
 //addded oid==gid
 cartItems.push(valueDesc);
 $(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “ProductDesc”, valueDesc);
 $(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “ProductCode”, pc);
 $(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “OrderQty”, stockqty);
 $(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “PendingShipQty”, psquantity);
 $(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “OrderDetailId”, odid);
 $(“#grid”).jqxGrid(‘setcellvalue’, cell.row, “StockQty”, invqty);
 cartItems.push(valueDesc + refdata);// ADDED refdata on 30 Jan 2014
 var sri = 0;
 valueDesc = ” “; // added today
 }
 else {
 alert(“Drop properly on a empty row / add new row / check OrderId, Drag and drop item on it !!!”);
 }
 }
 }
else {
 var sq2 = $(‘#grid’).jqxGrid(‘getcellvalue’, cell.row, “OrderQty”);
oldvalue = sq2;
 alert(“Item already exists !!! “);
 }
 }
 })
My HTML is as below,

<body class=’default’>
 <div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
 <div id=”orderheaderGrid”></div>
 <div id=”grid”></div>
 <div id=”orderdetailGrid” style=”margin-left: 1px; margin-top: 7px;”></div>
 </div>
 </body>

June 30, 2015 at 6:07 am Design flaw ? not possible to implement Nested Grid with Drag-drop #73177

Dimitar

Participant

Hi Keshavan,

You have defined a variable grid:

var grid = "grid" + referencerow;

yet you never use it anywhere else in your code, but continue to use the selection $('#grid'). We suggest to modify the dragEnd event handler as follows:

gridCells.on('dragEnd', function (event) {
    oldvalue = 0;
    var idx = 0;
    var valueDesc = $(this).text();
    var position = $.jqx.position(event.args);
    var cell;
    var grid = $("#grid" + referencerow);
    cell = grid.jqxGrid('getcellatposition', position.left, position.top);
    Rcell = cell;
    if (valueDesc != null) {
        // idx = getItemIndex(valueDesc + refdata); // ADDED refdata on 30 Jan 2014
        idx = 1;
        if (idx != -1) {
            if (cell != null) {
                var vd2 = grid.jqxGrid('getcellvalue', cell.row, " ProductDesc");
                var aq2 = grid.jqxGrid('getcellvalue', cell.row, "OrderQty");
                var pq2 = grid.jqxGrid('getcellvalue', cell.row, "PendingShipQty");
                var sid = grid.jqxGrid('getcellvalue', cell.row, "ShipId");
                var oid = grid.jqxGrid('getcellvalue', cell.row, "OrderId");
                if ((vd2 == null) && (aq2 != 0 || pq2 != 0) && (orefid == oid)) { // changed both from /
                    //addded oid==gid
                    cartItems.push(valueDesc);
                    grid.jqxGrid('setcellvalue', cell.row, "ProductDesc", valueDesc);
                    grid.jqxGrid('setcellvalue', cell.row, "ProductCode", pc);
                    grid.jqxGrid('setcellvalue', cell.row, "OrderQty", stockqty);
                    grid.jqxGrid('setcellvalue', cell.row, "PendingShipQty", psquantity);
                    grid.jqxGrid('setcellvalue', cell.row, "OrderDetailId", odid);
                    grid.jqxGrid('setcellvalue', cell.row, "StockQty", invqty);
                    cartItems.push(valueDesc + refdata); // ADDED refdata on 30 Jan 2014
                    var sri = 0;
                    valueDesc = " "; // added today
                } else {
                    alert("Drop properly on a empty row / add new row / check OrderId, Drag and drop item on it !!!");
                }
            }
        } else {
            var sq2 = grid.jqxGrid('getcellvalue', cell.row, "OrderQty");
            oldvalue = sq2;
            alert("Item already exists !!! ");
        }
    }
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

June 30, 2015 at 6:12 am Design flaw ? not possible to implement Nested Grid with Drag-drop #73179

Keshavan

Participant

Hi,

I have updated with minimum code and pasted in the post, Please let me know whether implementing Drag-Drop on nested grid is Possible / Not Possible
so that I can alter my solution to use different layout etc.

Thanks,
Keshavan

June 30, 2015 at 7:48 am Design flaw ? not possible to implement Nested Grid with Drag-drop #73184

Dimitar

Participant

Hi Keshavan,

I am not sure if you saw my post – http://www.jqwidgets.com/community/topic/design-flaw-not-possible-to-implement-nested-grid-with-drag-drop/#post-73177.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

June 30, 2015 at 8:08 am Design flaw ? not possible to implement Nested Grid with Drag-drop #73186

Keshavan

Participant

Hi Dimitar,

Thanks a million !!. With your help I am able to complete it.
Under pressure I didn’t see your solution earlier.

Thanks,
Keshavan

Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.