jQWidgets Forums
Forum Replies Created
-
Author
-
You should update the information in this post because it IS possible to put the Pager on top of the Grid.
Also the example you have of the top of Grid paging does not return data because the service does not return anything (found at http://www.jqwidgets.com/community/topic/location-of-navigator-bar/).
But using your trusty generatedata routines work like a charm.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; // prepare the data var source = { localdata: generatedata(55), datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ], datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source); var self = this; $("#jqxgrid").jqxGrid( { width: 680, source: dataAdapter, theme: theme, columns: [ { text: 'First Name', dataField: 'firstname', width: 200 }, { text: 'Last Name', dataField: 'lastname', width: 200 }, { text: 'Product', dataField: 'productname', width: 170 }, { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', dataField: 'total', cellsalign: 'right', cellsformat: 'c2' } ], showtoolbar: true, pageable: true, autoheight: true, rendertoolbar: function (toolbar) { var container = $("<div style='margin-left: 10px; margin-top: 5px; width: 100%; height: 100%;'></div>"); var datainfo = $("#jqxgrid").jqxGrid('getdatainformation'); var paginginfo = datainfo.paginginformation; var leftButton = $("<div style='padding: 0px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>"); leftButton.find('div').addClass('jqx-icon-arrow-left'); leftButton.width(36); leftButton.jqxButton({ theme: theme }); var rightButton = $("<div style='padding: 0px; margin: 0px 3px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>"); rightButton.find('div').addClass('jqx-icon-arrow-right'); rightButton.width(36); rightButton.jqxButton({ theme: theme }); container.appendTo(toolbar); leftButton.appendTo(container); rightButton.appendTo(container); var label = $("<div style='font-size: 11px; margin: 2px 3px; font-weight: bold; float: left;'></div>"); label.text("1-" + paginginfo.pagesize + ' of ' + datainfo.rowscount); label.appendTo(container); self.label = label; // update buttons states. var handleStates = function (event, button, className, add) { button.on(event, function () { if (add == true) { button.find('div').addClass(className); } else button.find('div').removeClass(className); }); } if (theme != '') { handleStates('mousedown', rightButton, 'jqx-icon-arrow-right-selected-' + theme, true); handleStates('mouseup', rightButton, 'jqx-icon-arrow-right-selected-' + theme, false); handleStates('mousedown', leftButton, 'jqx-icon-arrow-left-selected-' + theme, true); handleStates('mouseup', leftButton, 'jqx-icon-arrow-left-selected-' + theme, false); handleStates('mouseenter', rightButton, 'jqx-icon-arrow-right-hover-' + theme, true); handleStates('mouseleave', rightButton, 'jqx-icon-arrow-right-hover-' + theme, false); handleStates('mouseenter', leftButton, 'jqx-icon-arrow-left-hover-' + theme, true); handleStates('mouseleave', leftButton, 'jqx-icon-arrow-left-hover-' + theme, false); } rightButton.click(function () { $("#jqxgrid").jqxGrid('gotonextpage'); }); leftButton.click(function () { $("#jqxgrid").jqxGrid('gotoprevpage'); }); }, pagerrenderer: function () { return ""; } }); $("#jqxgrid").on('pagechanged', function () { var datainfo = $("#jqxgrid").jqxGrid('getdatainformation'); var paginginfo = datainfo.paginginformation; self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + "-" + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ' of ' + datainfo.rowscount); }); }); </script> </head> <body class='default'> <div id='jqxgrid'> </div> </body> </html>Hi Peter,
Can you look into this issue? I don’t know if it makes a difference, but I have the grid contained in a jqxsplitter panel and the scrollbar stays active when I make a wide ranging sweep of the scrollbar — but only with virtual scrolling. Smaller increments do not seem to trigger the issue. It’s very strange because it doesn’t happen with every wide sweep and occurs only in Firefox (v24.5.0). IE is fine. Thanks!
June 4, 2014 at 7:25 pm in reply to: Problem switching between virtual/non-virtual mode Problem switching between virtual/non-virtual mode #55363Well…looks like I figured it out. Hopefully this will save you guys learning this some time. Issuing the following command appears to work when switching from virtual to non-virtual mode.
$(“#jqxGrid”).jqxGrid({ virtualmode: false, source: dataAdapter });
Just make sure the “source” parameter appears last.
Wondering if Crunch (Ton) was able to resolve the issue with mouseup and scrollbars and if Peter can lend additional insight on what the issue could be. We have the same exact issue. We’ve implemented virtual scrolling and when making a wide scroll from top to bottom, the mouse appears to think it’s mousedown button is still pressed. When you move the mouse within the grid, it continues to move the scroll position. This appears to only happen in Firefox and not in IE.
May 8, 2014 at 3:41 pm in reply to: Loading JSON data under a child tree node? Loading JSON data under a child tree node? #54218You guys have sold me on this product with your tech support!!! You should put this example on your site. How easy it looks now to implement with an example! Thanks again!!!
-
AuthorPosts