jQuery UI Widgets Forums Plugins Validator, Drag & Drop, Sortable Invalid Selector – grid defined in initrowDetails

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • Keshavan
    Participant

    Hi,

    I am not able to drop dragged row (from orderdetailGrid in to shipGrid).
    I have implemented nested grid with drag/drop (nested grid and another separate grid from which I drag drop in to nested (inner) shipGrid).
    I get the error,
    “Uncaught Error: Invalid Selector – #shipGrid! Please, check whether the used ID or CSS Class name is correct.
    jqxcore.js:7”.
    (in my gridCells.on(‘dragEnd’, function (event) {}).
    I tried defining shipGrid as a var in line above document.ready(), instead of in initrowdetails(), but problem persists.

    below is my code, please help.

    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 shipGrid;
            $(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 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();
                    shipGrid = $($(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 (shipGrid != null) {
                        shipGrid.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 = shipGrid.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;
                                    shipGrid.jqxGrid('addrow', (rowscount + 1), datarow, 'top');
                                    mode = 1;
                                });
                                // delete selected row.
                                deleteButton.click(function (event) {
                                    var rowscount = shipGrid.jqxGrid('getdatainformation').rowscount;
                                    var selectedrowindex = shipGrid.jqxGrid('getselectedrowindex');
                                    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                                        var id = shipGrid.jqxGrid('getrowid', selectedrowindex);
                                        var dataRecord = shipGrid.jqxGrid('getrowdata', selectedrowindex);
                                        shipGrid.jqxGrid('deleterow', id);
                                        mode = 0;
                                    }
                                    var args = event.args;
                                    var rowindex = args.rowindex;
                                    shipGrid.jqxGrid('deleterow', rowindex);
                                 });
                                prnButton.click(function (event) { DoPrintableSections(100, 200) })
                                // save selected row.
                                saveButton.click(function (event) {
                                    mode = 0;
                                    var selectedrowindex = shipGrid.jqxGrid('getselectedrowindex');
                                    var rowscount = shipGrid.jqxGrid('getdatainformation').rowscount;
                                    if (selectedrowindex >= 0 && selectedrowindex <= rowscount) {
                                        var id = shipGrid.jqxGrid('getrowid', selectedrowindex);
                                        var dataRecord = shipGrid.jqxGrid('getrowdata', selectedrowindex);
                                        var bal1 = dataRecord.ShipQty;
                                        var bal2 = dataRecord.PendingShipQty;
                                        var val3 = dataRecord.OrderId;
                                        psquantity = psquantity - bal1;
                                        $('#shipGrid').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, cellbeginedit: rowEdit },
                              { text: 'OrderDtId', datafield: 'OrderDetailId', width: 200, hidden: true, cellbeginedit: rowEdit },
                              { text: 'Description', datafield: 'ProductDesc', editable: false, 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, cellbeginedit: rowEdit },
                              { text: 'Ship Bal', datafield: 'PendingShipQty', editable: false, width: 70, cellbeginedit: rowEdit },
                              {
                                  text: 'Stock Qty', datafield: 'StockQty', editable: false, width: 70, cellbeginedit: rowEdit
                              },
                              {
                                  text: 'Ship Qty', datafield: 'ShipQty', width: 70, cellbeginedit: rowEdit,
                                  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', cellbeginedit: rowEdit },
                              { text: 'Notes', datafield: 'Notes', editable: true, width: 330, cellbeginedit: rowEdit }
                            ]
                        })
                    }
                    // nested grid rowclick binding
                    shipGrid.on("rowclick", function (event) {
                        var args = event.args;
                        var rowindex = args.rowindex;
                        alert(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: $('#shipGrid'), 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
                                 });
                             });
                             function getItemIndex(value) {
                                 for (var i = 0; i < cartItems.length; i += 1) {
                                     if (cartItems[i] == value) {
                                         return -1;
                                     }
                                 }
                                 return i;
                             };
                             // 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 = $("#shipGrid").jqxGrid('getcellatposition', position.left, position.top);
                                 Rcell = cell;
                                 if (valueDesc != null) {
                                     idx = getItemIndex(valueDesc + refdata);  // ADDED refdata on 30 Jan 2014
                                     if (idx != -1) {
                                         if (cell != null) {
                                             var vd2 = $('#shipGrid').jqxGrid('getcellvalue', cell.row, " ProductDesc");
                                             var aq2 = $('#shipGrid').jqxGrid('getcellvalue', cell.row, "OrderQty");
                                             var pq2 = $('#shipGrid').jqxGrid('getcellvalue', cell.row, "PendingShipQty");
                                             var sid = $('#shipGrid').jqxGrid('getcellvalue', cell.row, "ShipId");
                                             var oid = $('#shipGrid').jqxGrid('getcellvalue', cell.row, "OrderId");
                                             if ((vd2 == null || vd2 == undefined || vd2 == ' ' || vd2 == " ") && (aq2 != 0 || pq2 != 0) && (orefid == oid)) {  // changed both from /
                                                 //addded oid==gid
                                                 cartItems.push(valueDesc);
                                                 $("#shipGrid").jqxGrid('setcellvalue', cell.row, "ProductDesc", valueDesc);
                                                 $("#shipGrid").jqxGrid('setcellvalue', cell.row, "ProductCode", pc);
                                                 $("#shipGrid").jqxGrid('setcellvalue', cell.row, "OrderQty", stockqty);
                                                 $("#shipGrid").jqxGrid('setcellvalue', cell.row, "PendingShipQty", psquantity);
                                                 $("#shipGrid").jqxGrid('setcellvalue', cell.row, "OrderDetailId", odid);
                                                 $("#shipGrid").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 = $('#shipGrid').jqxGrid('getcellvalue', cell.row, "OrderQty");
                                         oldvalue = sq2;
                                         alert("Item already exists !!!  ");
                                     }
                                 }
                             })
                             $("#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="orderdetailGrid" style="margin-left: 1px; margin-top: 7px;"></div>
            <div id="cc" style="margin-left: 1px; margin-top: 7px;"></div>
        </div>
    </body>
    </html>

    Dimitar
    Participant

    Hi Keshavan,

    When you are calling $('#shipGrid').jqxGrid(...), the jqxGrid API expects there to be an element (div) in the DOM with an id of shipGrid. However, there is no such element and that is why the error is thrown.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.