jQWidgets Forums

jQuery UI Widgets › Forums › Grid › NestedGrid – Dragdrop – Unable to fire js validation code

Tagged: 

This topic contains 1 reply, has 1 voice, and was last updated by  Keshavan 11 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    NestedGrid – Dragdrop – Unable to fire js validation code Posts
  • January 30, 2014 at 11:35 am NestedGrid – Dragdrop – Unable to fire js validation code #48685

    Keshavan
    Participant

    Hi,

    I have totlly 3 grids, One Nested and One standalone Grid.

    The Nested grid have Order and Shipping (nested) grid.

    One Javascript function which checks for duplicate ‘productcode’ in Nested grid is not getting called, when i dragdrop from Standalone grid. The same drag & drop is working fine in another implementation where i don’t have Nested Grid.

                         function getItemIndex(value) {
                         for (var i = 0; i < cartItems.length; i += 1) {
                             alert("value-INSIDE getItemIndex(value) " + value);
                             if (cartItems[i] == value) {
                                 return -1;
                             }
                         }
                         return i;
                     };

    Is the location of function code a problem ?
    below is my entire 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" />
    <script type="text/javascript" src="/JqWidgets/scripts/gettheme.js"></script>
    <script type="text/javascript" src="/JqWidgets/scripts/jquery-1.8.3.min.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/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" src="generatedata.js"></script>
    <script type="text/javascript" src="/JqWidgets/scripts/gettheme.js"></script>	
    <script type="text/javascript">
        $(document).ready(function () {

            //
            var gid1 = 0;
            var gid2 = 0;
            var gid3 = 1;
            var data = {};
            var cartItems = [];
            var stockqty = 0;
            var sellprice = 0;
            var Tamt = 0;
            var Tqty = 0;
            var rqty = 0;
            var valueDesc = " ";
            var ctr = 0;
            var desc;
            var rselect;
            var rowcount = 0;
            var ref = 0;
            var ref1 = 0;
            //   var arowdata = [];
            var arowid = [];
            var order_id = 0;
            var id = 0;
            var datarow;
            var pid;
            var jsonString1 = new Array();
            var jsonString2 = [];
            var cid;

            //

            var theme = getDemoTheme();
            var url = "/Ship/GetOrders";
            var source =
            {
                datafields: [
                    { name: 'OrderId' },
                    { name: 'CustomerId' },
                    { name: 'OrderDate' },
                    { name: 'OrderAmount' },
                    { name: 'OrderStatus' }
                ],
         /*       root: "Orders",
                record: "Order",*/    // b'cos it generates err
                id: 'OrderId',
                datatype: "json",
                async: false,
                url: url
            }
            var orderAdapter = new $.jqx.dataAdapter(source);
            var shipurl = "/Ship/GetShips";
            var shipSource =
            {
                datafields: [
					{ name: 'ShipId' },
					{ name: 'OrderId' },
					{ name: 'ProductCode' },
                    { name: 'ProductDesc' },
					{ name: 'OrderQty' },
                    { name: 'ShipQty' },
					{ name: 'OrderDetailId' }
                ],
                root: "Ships",
                record: "Ship",
                id: 'ShipId',
                datatype: "json",
                url: shipurl,
                async: false
            };

            var shipDataAdapter = new $.jqx.dataAdapter(shipSource, { autoBind: true });
            Ships = shipDataAdapter.records;
            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) 
            {
                var id = record.uid.toString();
                var 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"] = id;
                    row["OrderId"];
                    row["ProductCode"];
                    row["ProductDesc"];
                    row["OrderQty"]=0 ;
                    row["ShipQty"];
                    row["OrderDetailId"];
                    return row;
                }
                var shipsource = {
                    datafields: [
                        { name: 'ShipId' },
                        { name: 'OrderId' },
                        { name: 'ProductCode' },
                        { name: 'ProductDesc' },
                        { name: 'OrderQty'},
                        { name: 'ShipQty' },
                        { name: 'OrderDetailId' }
                    ],
                    id: 'OrderId',
                    localdata: shipssbyid
                }
                if (grid != null) {
                    grid.jqxGrid({
                        source: shipsource, theme: 'ui-sunny', width: 900, height: 150,
                        showstatusbar: true,
                        renderstatusbar: function (statusbar) {
                            // appends buttons to the status bar.
                            var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></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</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</span></div>");
                            container.append(addButton);
                            container.append(deleteButton);
                            statusbar.append(container);
                            addButton.jqxButton({ theme: 'ui-sunny', width: 60, height: 15 });
                            deleteButton.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);
                                grid.jqxGrid('addrow', (rowscount + 1), generaterow());
                            });
                            // delete selected row.
                            deleteButton.click(function (event) {
                                var selectedrowindex = grid.jqxGrid('getselectedrowindex');
                                var rowscount = grid.jqxGrid('getdatainformation').rowscount;
                                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                                    var id = grid.jqxGrid('getrowid', selectedrowindex);
                                    grid.jqxGrid('deleterow', id);
                                }
                            });
                        },
                        columns: [
                          { text: 'Product Code', datafield: 'ProductCode', width: 200 },
                          { text: 'Product Desc', datafield: 'ProductDesc', width: 420 },
                          { text: 'Order Qty', datafield: 'OrderQty', width: 130 },
                          { text: 'Ship Qty', datafield: 'ShipQty', width: 130 },
                        ]
                    })
                }
            }
            var renderer = function (row, column, value) {
                return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
            }

            // create jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 960,
                height: 270,
                source: source,
                theme: 'ui-sunny',
                rowdetails: true,
                rowsheight: 25,
                columnsresize: true,
                columnsreorder: true,
                enabletooltips: true,
                sortable: true,
                groupable: true,
                initrowdetails: initrowdetails,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 3px;'></div>", rowdetailsheight: 150, rowdetailshidden: true },
                ready: function () {
                    $("#jqxgrid").jqxGrid('showrowdetails', 1);
                },
                columns: [
                      { text: 'OrderId', datafield: 'OrderId', width: 100, cellsrenderer: renderer },
                      { text: 'Customer', datafield: 'CustomerId', width: 420, cellsrenderer: renderer },
                      { text: 'Order Date', datafield: 'OrderDate', width: 150, cellsrenderer: renderer },
                      { text: 'Order Amount', datafield: 'OrderAmount', width: 100, cellsrenderer: renderer },
                      { text: 'Order Status', datafield: 'OrderStatus', width: 160, cellsrenderer: renderer }
                ]
            });
            //   ------------

            var generaterow1 = function (id) {
                var row = {};
                row["ProductId"] = id;
                row["CategoryId"] = gid1;
                row["BrandId"] = gid2;
                row["CategoryName"] = " ";
                row["BrandName"] = " ";
                row["Model"] = " ";
                row["ProductCode"] = " ";
                row["ProductDesc"] = " ";
                row["StockQty"] = stockqty;
                row["SellPrice"] = sellprice;
                return row;
            }
            var source1 =
            {
                datatype: "json",
                datafields:
                [
                   { name: 'ProductId' },
                   { name: 'CategoryId' },
                   { name: 'BrandId' },
                   { name: 'CategoryName' },
                   { name: 'BrandName' },
                   { name: 'Model', type: 'string' },
                   { name: 'ProductCode', type: 'string' },
                   { name: 'ProductDesc', type: 'string' },
                   { name: 'SellPrice' },
                   { name: 'StockQty' },
                ],
                id: 'ProductId' + 'CategoryId' + 'BrandId',
                url: '/Order/GetProducts'
            }
            var dataAdapter = new $.jqx.dataAdapter(source1);
            $("#grid1").jqxGrid(
             {
                 width: 960,
                 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 = $('#grid1').find('.jqx-grid-cell');

                     // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
                     gridCells.jqxDragDrop({
                         appendTo: 'body', theme: theme, dragZIndex: 99999,
                         dropAction: 'none',
                         initFeedback: function (feedback) {
                             feedback.height(25);
                         },
                         dropTarget: $("#grid"), 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 = $("#grid").jqxGrid('getcellatposition', position.left, position.top);  // original line
                         $(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();
                         alert("valuDesc  " + valueDesc);
                         var position = $.jqx.position(event.args);
                         var cell = $("#grid").jqxGrid('getcellatposition', position.left, position.top);
                         if (valueDesc != null || valueDesc != " " || valueDesc != ' ' || valueDesc != undefined)
                         {
                             alert("foo  "+valueDesc);
                             <strong>idx = getItemIndex(valueDesc);</strong>
                             if (idx != -1) {
                                 if (cell != null || cell != undefined || cell != " " || cell != ' ') {
                                     var vd2 = $('#grid').jqxGrid('getcellvalue', cell.row, "ProductDesc");
                                     alert("vd2 "+  vd2);
                                     var aq2 = $('#grid').jqxGrid('getcellvalue', cell.row, "OrderQty");
                                     alert("aq2 " + aq2);
                                     if ((vd2 == null || vd2 == undefined || vd2 == ' ' || vd2 == " ") && aq2 == 0) {
                                         $("#grid").jqxGrid('setcellvalue', cell.row, "ProductDesc", valueDesc);
                                         $("#grid").jqxGrid('setcellvalue', cell.row, "OrderQty", stockqty);
                                         $("#grid").jqxGrid('setcellvalue', cell.row, "SellPrice", sellprice);
                                         $("#grid").jqxGrid('setcellvalue', cell.row, "CategoryId", gid1);    // Added 11 jan 2014
                                         $("#grid").jqxGrid('setcellvalue', cell.row, "BrandId", gid2);       // Added 11 jan 2014
                                         $("#grid").jqxGrid('setcellvalue', cell.row, "ProductId", pid);       // Added 11 jan 2014
                                         cartItems.push(valueDesc);
                                         valueDesc = " "; // added today
                                     }
                                     else {
                                         alert("Drop properly on a empty row / add new row, Drag and drop item on it !!!");
                                     }
                                 }
                             }
                             else {
                                 var sq2 = $('#grid').jqxGrid('getcellvalue', cell.row, "Quantity");
                                 oldvalue = sq2;
                                 alert("Item already exists !!!  ");
                             }
                         }
                     })

                     <strong>function getItemIndex(value) {
                         for (var i = 0; i < cartItems.length; i += 1) {
                             alert("value-INSIDE getItemIndex(value) " + value);
                             if (cartItems[i] == value) {
                                 return -1;
                             }
                         }
                         return i;
                     };</strong>

                     $("#grid1").bind('cellclick', function (event) {
                         var index = event.args.rowindex;
                         var dataRecord = $("#grid1").jqxGrid('getrowdata', index);
                         stockqty = dataRecord.StockQty;
                         sellprice = dataRecord.SellPrice;
                         pid = dataRecord.ProductId;
                         gid1 = dataRecord.CategoryId;    // added 11 jan 2014
                         gid2 = dataRecord.BrandId;       // added 11 jan 2014
                     });
                 },
                 theme: 'ui-sunny',
                 selectionmode: 'singlecell',
                 columns:
                 [
                      { text: 'ProductId', datafield: 'ProductId', hidden: true, width: 450 },
                      { text: 'CategoryId', datafield: 'CategoryId', hidden: true, width: 450 },
                      { text: 'BrandId', datafield: 'BrandId', hidden: true, width: 450 },
                      { text: 'Description', datafield: 'ProductDesc', width: 310 },
                      { text: 'Category', datafield: 'CategoryName', width: 140 },
                      { text: 'Brand', datafield: 'BrandName', width: 140 },
                      { text: 'Model', datafield: 'Model', width: 150 },
                      { text: 'Product Code', datafield: 'ProductCode', width: 100 },
                      { text: 'Stock Qty', datafield: 'StockQty', width: 80 },
                      { text: 'Price', datafield: 'SellPrice', width: 80 }
                 ]
             });

            //  -------------

        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left; ">
        <div id="jqxgrid"></div>
        <div id="grid1" style="margin-left: 1px; margin-top: 2px;"></div>
    </div>
</body>
</html>
    January 30, 2014 at 1:18 pm NestedGrid – Dragdrop – Unable to fire js validation code #48695

    Keshavan
    Participant

    Hi,

    Issue sorted. Please Ignore Post.

    Thanks,

    Keshavan

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

You must be logged in to reply to this topic.