jQWidgets Forums
Forum Replies Created
-
Author
-
May 8, 2015 at 6:54 am in reply to: Losing filter after grid printing Losing filter after grid printing #70830
Hello Arneault,
Please, find the following example which shows how to filter and print grid. If you need to implement server filtering you may look at the Grid Server Filtering demo or refer to the Grid Filtering help topic for more information about jqxGrid Filtering.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxcheckbox.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.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = generatedata(10); var source = { localdata: data, datatype: "array", datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'date', type: 'date' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' } ] }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 850, autoheight: true, source: dataAdapter, altrows: true, sortable: true, filterable: true, selectionmode: 'multiplecellsextended', columns: [ { text: 'First Name', datafield: 'firstname', width: 120 }, { text: 'Last Name', datafield: 'lastname', width: 120 }, { text: 'Product', datafield: 'productname', width: 177 }, { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' }, { text: 'Ship Date', datafield: 'date', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'd' }, { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' }, { text: 'Price', datafield: 'price', cellsalign: 'right', align: 'right', cellsformat: 'c2' } ] }); $("#print").jqxButton(); $("#filter").jqxButton(); $("#print").click(function () { var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html'); var newWindow = window.open('', '', 'width=800, height=500'), document = newWindow.document.open(), pageContent = '<!DOCTYPE html>\n' + '<html>\n' + '<head>\n' + '<meta charset="utf-8" />\n' + '<title>jQWidgets Grid</title>\n' + '</head>\n' + '<body>\n' + gridContent + '\n</body>\n</html>'; document.write(pageContent); document.close(); newWindow.print(); }); var addfilter = function () { var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = 'Beate'; var filtercondition = 'contains'; var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); filtervalue = 'Andrew'; filtercondition = 'starts_with'; var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); filtergroup.addfilter(filter_or_operator, filter1); filtergroup.addfilter(filter_or_operator, filter2); // add the filters. $("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup); // apply the filters. $("#jqxgrid").jqxGrid('applyfilters'); } $("#filter").click(function () { addfilter(); }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"></div> <div style='margin-top: 20px;'> <div style='margin-left: 10px; float: left;'> <input type="button" value="Print" id='print' /> </div> <div style='margin-left: 10px; float: left;'> <input type="button" value="Filter" id='filter' /> </div> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/May 7, 2015 at 2:41 pm in reply to: gridindentwidth how to set lower than 25 px gridindentwidth how to set lower than 25 px #70797Hello jahnvi25,
Maybe you mean ‘groupindentwidth’ property? It cannot be set to a value lower than 25px.
You can find more information in the following forum topic: http://www.jqwidgets.com/community/topic/can-i-force-the-groupindentwidth-to-a-small-size/#post-57774.Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/May 7, 2015 at 12:53 pm in reply to: Selecting all text and erasing fails to clear minus sign on negative values Selecting all text and erasing fails to clear minus sign on negative values #70792Hi jcwren,
Thank you for your feedback. We will consider improving it in a future version of jQWidgets.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hello Kgdk,
You can set the ‘selectionMode’ property to “none”. If you want to disable current row selection you can use the following example:
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxdatatable.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript"> $(document).ready(function () { var employees = [{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" }, { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." }, { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." }, { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." }, { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" }, { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." }, { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }]; // prepare the data var source = { dataType: "json", dataFields: [ { name: 'EmployeeID', type: 'number' }, { name: 'ReportsTo', type: 'number' }, { name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'City', type: 'string' }, { name: 'Address', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'HireDate', type: 'date' }, { name: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: employees }; var dataAdapter = new $.jqx.dataAdapter(source); // create Tree Grid $("#treeGrid").jqxTreeGrid( { width: 500, source: dataAdapter, ready: function () { $("#treeGrid").jqxTreeGrid('expandRow', '2'); }, columns: [ { text: 'FirstName', dataField: 'FirstName', width: 150 }, { text: 'LastName', dataField: 'LastName', width: 150 }, { text: 'Title', dataField: 'Title', width: 200 } ] }); $('#treeGrid').on('rowSelect', function (event) { var args = event.args; var row = args.row; $("#treeGrid").jqxTreeGrid('unselectRow', row.uid); }); }); </script> </head> <body class='default'> <div id="treeGrid"> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hello jcwren,
Please, refer to the following forum topic which contains possible solution: http://www.jqwidgets.com/community/topic/positive-values-could-not-be-changed-in-jqxnumberinput-when-negative-value-are/.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/May 7, 2015 at 7:57 am in reply to: jqxColorPicker displays no colors when initial value black. jqxColorPicker displays no colors when initial value black. #70772Hello Gary,
Thank you for your suggestion. We will consider implementing this feature in a future version of jQWidgets.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/May 7, 2015 at 7:15 am in reply to: Dynamically Create docking windows Dynamically Create docking windows #70768Hello Kurt,
You can refer to the Getting Started with jqxDocking help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdocking/jquery-docking-getting-started.htm. If it does not help you, please, provide us with full sample and remember to format your code by selecting it and pressing the
code
button in the toolbar.Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/May 7, 2015 at 6:42 am in reply to: Filter Items for Number Filter in Filter Row Filter Items for Number Filter in Filter Row #70763Hi aser,
1)You can not reduce the filter-box size.
2)The above example works correctly on our side. Please, make sure you are using the latest version of jQWidgets(3.8.0).You may try as alternative example the Filter Conditions demo.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/May 5, 2015 at 2:03 pm in reply to: Scrollbar size on mobile browsers Scrollbar size on mobile browsers #70666Hello Chris,
There are no properties for changing scrollbar size. You also may look at the following forum topic which contains more information: http://www.jqwidgets.com/community/topic/scroll-issue-on-mobile-safari/#post-57573.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/May 5, 2015 at 10:28 am in reply to: jqxDropdownlist – inline Editing Grid jqxDropdownlist – inline Editing Grid #70655Hi User3i,
Please, provide us with jsfiddle example so that we may get a better understanding of your scenario and be able to help.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/May 5, 2015 at 8:12 am in reply to: loading when null is returned loading when null is returned #70644Hi cpuin,
Are there any errors thrown in your browser’s console when running the page with jqxDataTable? Please, find the following example where the source is null and jqxDataTable works as expected: http://jsfiddle.net/Dimitar_jQWidgets/48gbt9wj/.
You can make JSFiddle examples with or without user registration.Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hello kbloem,
Please, provide us with a sample including your calendar’s initialization code so we can determine the source of the issue.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Update: The Custom List Items with Key/Value demo works as expected in the latest version of jQWidgets(3.8.0). We suggest you update all your jQWidgets files to version 3.8.0.
Hello serdar88,
Thank you for your feedback. We reproduced the reported issue about the example. The filter operator’s value however is fine.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/May 4, 2015 at 7:35 am in reply to: Filter Items for Number Filter in Filter Row Filter Items for Number Filter in Filter Row #70581Hello aser,
Please, find the following example which shows how to customize filter conditions. You can find more information about possible filter conditions in the following help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-filtering.htm.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var data = generatedata(15); var source = { localdata: data, datafields: [ { name: 'name', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'date', type: 'date'}, { name: 'quantity', type: 'number' } ], datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").bind('bindingcomplete', function () { var localizationobj = {}; filterstringcomparisonoperators = ['empty', 'not empty', 'contains', 'contains(match case)', 'does not contain', 'does not contain(match case)', 'starts with', 'starts with(match case)', 'ends with', 'ends with(match case)', 'equal', 'equal(match case)', 'null', 'not null']; filternumericcomparisonoperators = ['equal', 'less than or equal', 'greater than or equal']; filterdatecomparisonoperators = ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null']; filterbooleancomparisonoperators = ['equal', 'not equal']; localizationobj.filterstringcomparisonoperators = filterstringcomparisonoperators; localizationobj.filternumericcomparisonoperators = filternumericcomparisonoperators; localizationobj.filterdatecomparisonoperators = filterdatecomparisonoperators; localizationobj.filterbooleancomparisonoperators = filterbooleancomparisonoperators; // apply localization. $("#jqxgrid").jqxGrid('localizestrings', localizationobj); }); $("#jqxgrid").jqxGrid( { width: 850, autoheight:true, source: dataAdapter, showfilterrow: true, filterable: true, updatefilterconditions: function (type, defaultconditions) { var stringcomparisonoperators = ['EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE', 'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE', 'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL']; var numericcomparisonoperators = ['EQUAL', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN_OR_EQUAL']; var datecomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL']; var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL']; switch (type) { case 'stringfilter': return stringcomparisonoperators; case 'numericfilter': return numericcomparisonoperators; case 'datefilter': return datecomparisonoperators; case 'booleanfilter': return booleancomparisonoperators; } }, selectionmode: 'multiplecellsextended', columns: [ { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 }, { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220 }, { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67, }, { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' }, { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' } ] }); $("#jqxgrid").on("filter", function (event) { }); $('#clearfilteringbutton').jqxButton({ height: 25}); $('#clearfilteringbutton').click(function () { $("#jqxgrid").jqxGrid('clearfilters'); }); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton" type="button" /> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts