jQWidgets Forums
Forum Replies Created
-
Author
-
I have SORTED IT OUT, PLEASE IGNORE POST.
Thanks,
KeshavanHi,
The problem is that my server code is called irrespective of whether Jqxvalidation fails or not and an unnecessary server call if jqxvalidation fails (as i am unable to check like , if ($scope.validate() {$scope.register()})
Thanks,
KeshavanISSUE SORTED, PLEASE IGNORE POST
Hi,
jQWidgets version 4.0
Thanks,
KeshavanMarch 9, 2016 at 6:15 am in reply to: jQWidgets-AngularJS issue using ng-include jQWidgets-AngularJS issue using ng-include #82245Hi,
jQWidgets ver 4.0.
I am copying Google chrome console error,
angular.js:12477 TypeError: $scope.validatorSettings.$apply is not a function at Scope.$scope.validate (authController.js:41) at new authController (authController.js:43) at Object.invoke (angular.js:4478) at extend.instance (angular.js:9136) at nodeLinkFn (angular.js:8248) at compositeLinkFn (angular.js:7680) at compositeLinkFn (angular.js:7684) at compositeLinkFn (angular.js:7684) at publicLinkFn (angular.js:7555) at angular.js:1662Thanks,
KeshavanMarch 9, 2016 at 2:59 am in reply to: jQWidgets-AngularJS issue using ng-include jQWidgets-AngularJS issue using ng-include #82241Hi,
The path to external HTML file (testForm.html) is also CORRECT.
Thanks,
KeshavanMarch 3, 2016 at 11:28 am in reply to: Jqx-Angularjs- browser fails to load updated pages Jqx-Angularjs- browser fails to load updated pages #82071Issue sorted. Please Ignore Post.
Thanks,
KeshavanMarch 3, 2016 at 7:31 am in reply to: jqxmenu with Angular and ui.router – issue with clickhandler jqxmenu with Angular and ui.router – issue with clickhandler #82055Hi Peter,
Doesn’t work even after binding to events.
Here is my updated code, Please help.
Thanks,
Keshavan<!DOCTYPE html> <html ng-app="demoApp" lang="en"> <head> <title id='Description'>The demo demonstrates the Minimized state of jqxMenu.</title> <link rel="stylesheet" type="text/css" href="/angularjs/jQWidgets/jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="/angularjs/jQWidgets/scripts/jquery-1.11.1.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/scripts/demos.js"></script> <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/globalization/globalize.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script> </head> <body ng-controller="MainCtrl"> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["ui.router", "jqwidgets"]); demoApp.config(function ($stateProvider, $urlRouterProvider) { // For any unmatched url, send to /route1 $urlRouterProvider.otherwise("Quotations") $stateProvider .state('Quotations', { templateUrl: "/body.html", controller: 'demoController', controllerAs: 'test' }) .state('Messages', { templateUrl: "/body2.html", controller: 'demoController', controllerAs: 'test' }) }) demoApp.controller('MainCtrl', function ($state) { $state.transitionTo('Quotations'); }) demoApp.controller('demoController', function ($state, $scope) { var test = this; test.Url = "/"; test.templateUrl = "/body.html"; $scope.checked = true; var menu = {}; $scope.menuSettings = { width: '100%', height: '32px', created: function (args) { menu = args.instance; menu.minimize(); } }; $scope.changeState = function () { if ($scope.checked) { menu.minimize(); } else { menu.restore(); } } $scope.clickHandler = function (event) { var args = event.args; $scope.log = "Clicked: " + $(args).text(); }; $scope.log = ""; }); </script> <jqx-menu jqx-on-itemclick="clickHandler($event)" jqx-settings="menuSettings"> <ul> <li><a sref="Quotations">Quotations</a></li> <li><a sref="Messages">Messages</a></li> <li><a sref="Logout">Logout</a></li> </ul> </jqx-menu> <jqx-check-box ng-model="checked " ng-change="changeState($event) ">Minimized</jqx-check-box> <br/> <div style='margin-left: 20px; float: left;'> {{log}} </div> <div ui-view></div> </body> </html>March 3, 2016 at 4:18 am in reply to: jqxmenu with Angular and ui.router – issue with clickhandler jqxmenu with Angular and ui.router – issue with clickhandler #82049Hi,
Please find the updated code.
jQWidgets Ver 4.0.
Jqxmenu clickHandler function is not working with ‘sref’. ui.router feature works but doesn’t change state upon menu click.
here is my code.Thanks,
Keshavan<!DOCTYPE html>
<html ng-app=”demoApp” lang=”en”><head> <title id='Description'>The demo demonstrates the Minimized state of jqxMenu.</title> <link rel="stylesheet" type="text/css" href="/angularjs/jQWidgets/jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="/angularjs/jQWidgets/scripts/jquery-1.11.1.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/scripts/demos.js"></script> <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/globalization/globalize.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["ui.router", "jqwidgets"]); demoApp.config(function ($stateProvider, $urlRouterProvider) { // For any unmatched url, send to /route1 $urlRouterProvider.otherwise("Quotations") $stateProvider .state('Quotations', { templateUrl: "/body.html", controller: 'demoController', controllerAs: 'test' }) .state('Messages', { templateUrl: "/body2.html", controller: 'demoController', controllerAs: 'test' }) }) demoApp.controller('MainCtrl', function ($state) { $state.transitionTo('Quotations'); }) demoApp.controller('demoController', function ($state, $scope) { var test = this; test.Url = "/"; test.templateUrl = "/body.html"; $scope.checked = true; var menu = {}; $scope.menuSettings = { width: '100%', height: '32px', created: function (args) { menu = args.instance; menu.minimize(); } }; $scope.changeState = function () { if ($scope.checked) { menu.minimize(); } else { menu.restore(); } } }); </script> </head> <body ng-controller="MainCtrl"> <jqx-menu jqx-settings="menuSettings" > <ul> <li><a sref="Quotations">Quotations</a></li> <li><a sref="Messages">Messages</a></li> <li><a sref="Logout">Logout</a></li> </ul> </jqx-menu> <jqx-check-box ng-model="checked " ng-change="changeState($event) ">Minimized</jqx-check-box> <br/> <div ui-view></div> </body> </html>July 1, 2015 at 10:30 am in reply to: jqXmenu – display Issue – ver 3.8 jqXmenu – display Issue – ver 3.8 #73242Hi Dimitar,
Thanks for the solution.
Best Regards,
KeshavanJune 30, 2015 at 8:08 am in reply to: Design flaw ? not possible to implement Nested Grid with Drag-drop Design flaw ? not possible to implement Nested Grid with Drag-drop #73186Hi Dimitar,
Thanks a million !!. With your help I am able to complete it.
Under pressure I didn’t see your solution earlier.Thanks,
KeshavanJune 30, 2015 at 6:12 am in reply to: Design flaw ? not possible to implement Nested Grid with Drag-drop Design flaw ? not possible to implement Nested Grid with Drag-drop #73179Hi,
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,
KeshavanJune 29, 2015 at 9:31 am in reply to: Design flaw ? not possible to implement Nested Grid with Drag-drop Design flaw ? not possible to implement Nested Grid with Drag-drop #73136Hi,
Here is the Shortened, formatted code.
Thanks,
KeshavanNested 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);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 29, 2015 at 9:22 am in reply to: Design flaw ? not possible to implement Nested Grid with Drag-drop Design flaw ? not possible to implement Nested Grid with Drag-drop #73134Nested 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,<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 29, 2015 at 8:32 am in reply to: Design flaw ? not possible to implement Nested Grid with Drag-drop Design flaw ? not possible to implement Nested Grid with Drag-drop #73132Hi 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> -
AuthorPosts