jQWidgets Forums
Forum Replies Created
-
Author
-
Hi jondecker76,
Unfortunately it is not possible because every event is fired on any change no matter if it is from API or from UI. If you have any further question, please do not hesitate to contact us.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comJune 18, 2013 at 8:28 am in reply to: Filtering by a date/time column Filtering by a date/time column #23300Hi ohioguy67,
Thank you for your interest in jqxGrid. When you use the filtering menu you can only filter the date by entering it into a text box. If you want to use a calendar you can use the filter row as shown: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/filterrow.htm. Unfortunately you can not use two conditions in filter row. If you have any further questions, please do not hesitate to contact us.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi rafmoura,
Please take a look at the following examples:
1.In this example it is shown how we can manipulate data at client side by CRUD. The Grid plugin provides you callback functions when you add, remove or update a row.
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/createremoveupdatedata.htm
2. In the example in order to edit you should use the edit button which will trigger a pop-up window.
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/popupediting.htmBest Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi Peter Sloth,
If you want to use the ‘initialized’ event, you can do it before initializing the jqxTree. In other case the event would not be triggered because the initialized event because the Tree will be already initialized, in case you bind to the event after calling jqxTree’s constructor.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comJune 17, 2013 at 11:37 am in reply to: setcolumnproperty not working setcolumnproperty not working #23258Hi Maurizio,
Please take a look at the “id” of the jqxGrid. In your case the Grid’s “id” is “jqxgrid” and you try to call a property in “jqxGrid”.If you have any further questions please do not hesitate to contact us.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comJune 17, 2013 at 8:08 am in reply to: How to localize "Loading…" text ? How to localize "Loading…" text ? #23244Hi Stephan,
Thank you for your interest in jqxGrid. Unfortunately it is still not possible to localize the “Loading…” text but it would be in the next version.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comJune 17, 2013 at 8:04 am in reply to: How to set edited rows fore color? How to set edited rows fore color? #23243Hi snowyl,
In order to change the edited rows’ font color you can do the following things:
1. Create an Array
2. Fill the Array with the row indexes
3. Check whether the row has been changed or not
4. When the row has been changed the cellsrender would change the colorPlease take a look at the following example:
<!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.9.0.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.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> var MyArray = new Array(); $(document).ready(function () { var theme = getDemoTheme(); // prepare the data var data = generatedata(200); var source = { localdata: data, datatype: "array", updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command // call commit with parameter true if the synchronization with the server is successful // and with parameter false if the synchronization failder. commit(true); }, datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'date', type: 'date' } ] }; var dataAdapter = new $.jqx.dataAdapter(source); var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) { var inarray=false; for(var i=0;i<MyArray.length;i++){ if(MyArray[i] ==row) { inarray=true; } } if ( inarray==true ) { if (columnfield == "date") { value = dataAdapter.formatDate(value, "d"); } else if (columnfield == "price") { value = dataAdapter.formatNumber(value, "c2"); } return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span>'; } else { return defaulthtml; } } // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 680, source: dataAdapter, editable: true, theme: theme, selectionmode: 'multiplecellsadvanced', columns: [ { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80, cellsrenderer: cellsrenderer }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80, cellsrenderer: cellsrenderer }, { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195, cellsrenderer: cellsrenderer }, { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, cellsalign: 'right', cellsformat: 'd',cellsrenderer: cellsrenderer, validation: function (cell, value) { if (value == "") return true; var year = value.getFullYear(); if (year >= 2013) { return { result: false, message: "Ship Date should be before 1/1/2013" }; } return true; } }, { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput', cellsrenderer: cellsrenderer, validation: function (cell, value) { if (value < 0 || value > 150) { return { result: false, message: "Quantity should be in the 0-150 interval" }; } return true; }, createeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ decimalDigits: 0, digits: 3 }); } }, { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput', cellsrenderer: cellsrenderer, validation: function (cell, value) { if (value < 0 || value > 15) { return { result: false, message: "Price should be in the 0-15 interval" }; } return true; }, createeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ digits: 3 }); } } ] }); // events $("#jqxgrid").on('cellendedit', function (event) { var args = event.args; MyArray.push(args.rowindex); }); }); </script></head><body class='default'> <div id='jqxWidget'> <div id="jqxgrid"></div> <div style="margin-top: 30px;"> <div id="cellbegineditevent"></div> <div style="margin-top: 10px;" id="cellendeditevent"></div> </div> </div></body></html>
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comJune 17, 2013 at 7:12 am in reply to: Not able to Get Row data by Id Not able to Get Row data by Id #23241Hi Syai,
Could you please, provide additional information and a sample about your issue.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comMay 29, 2013 at 12:40 pm in reply to: Query regarding jqxvalidation. Query regarding jqxvalidation. #22035Hi Apeksha Singh,
If you want to hide all the hints you can use the jqxvalidator’s method – “hide”. Please take a look at the provided example: $(‘#jqxValidator’).jqxValidator(‘hide’);. You can call that method whenever you need. For example, when you trigger the ‘tabclick’ event.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comMay 22, 2013 at 5:20 am in reply to: Query regarding jqxvalidation. Query regarding jqxvalidation. #21586Hi Apeksha Singh,
Hints are not supposed to be hidden, if the validation has failed. They are HTML elements with absolute position displayed next to the Input with Failed Validation. In our samples we do not hide the hints, too. They are on the page, but are with lower z-index than the new displayed content in the same tabs widget.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi Peter Sloth,
In Json, you can escape special characters using backslash.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comMay 21, 2013 at 9:35 am in reply to: Select the Last Inserted Row Select the Last Inserted Row #21537Hi thiagoericson,
Please take a look at the following example:
<!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.9.0.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/jqxcheckbox.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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); // prepare the data var data = {}; var firstNames = [ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" ]; var lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" ]; var productNames = [ "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" ]; var priceValues = [ "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0" ]; var generaterow = function (i) { var row = {}; var productindex = Math.floor(Math.random() * productNames.length); var price = parseFloat(priceValues[productindex]); var quantity = 1 + Math.round(Math.random() * 10); row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["productname"] = productNames[productindex]; row["price"] = price; row["quantity"] = quantity; row["total"] = price * quantity; return row; } for (var i = 0; i < 10; i++) { var row = generaterow(i); data[i] = row; } var source = { localdata: data, datatype: "local", 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' } ], addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command // call commit with parameter true if the synchronization with the server is successful //and with parameter false if the synchronization failed. commit(true); }, }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 500, height: 350, source: dataAdapter, theme: theme, columns: [ { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' } ] }); $("#addrowbutton").jqxButton({ theme: theme }); // create new row. $("#addrowbutton").on('click', function () { var datarow = generaterow(); var commit = $("#jqxgrid").jqxGrid('addrow', null, {}); var rows = $('#jqxgrid').jqxGrid('getrows'); $('#jqxgrid').jqxGrid('selectrow',rows.length-1 ); }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div style="float: left;" id="jqxgrid"> </div> <div style="margin-left: 10px; float: left;"> <div> <input id="addrowbutton" type="button" value="Add New Row" /> </div> </div> </div></body></html>
Firstly, you add the new row. Secondly, you should get the last added row’s index by using the ‘getrows’ method. And thirdly, you can select the row by using the ‘selectrow’ method, where we pass the index as parameter.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi kzl,
Please take a look at the provided example:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.9.0.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/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); // Create jqxTree $('#jqxTree').jqxTree({ theme: theme }); $('#jqxTree2').jqxTree({ theme: theme }); // Create jqxExpander $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: 'auto', theme: theme }); $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: 'auto', theme: theme }); $('#jqxTree').on('select', function (event) { var args = event.args; $('#jqxTree2').jqxTree('selectItem', $('#Calendar')[0]); var label = item.label; }); }); </script></head><body class='default'> <div id='jqxWidget'> <div id='jqxExpander'> <div> Folders</div> <div id='jqxTree'> <ul> <li item-expanded='true'> <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' /><span item-title="true">Mail</span> <ul> <li item-expanded='true'> <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png' /><span item-title="true">Calendar</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span item-title="true">Contacts</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true"> <span>Inbox</span><span style='color: Blue;'> (3)</span></span> <ul> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">jQWidgets</span> <ul> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Admin</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Corporate</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Finance</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Other</span> </li> </ul> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Personal</span> </li> </ul> </li> <li item-expanded='true'> <img style='float: left; margin-right: 5px;' src='../../images/recycle.png' /><span item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span> <ul> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Today</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Last Week</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Last Month</span> </li> </ul> <li> <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png' /><span item-title="true">Notes</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/settings.png' /><span item-title="true">Settings</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span item-title="true">Favorites</span> </li> </li> </ul> </li> </ul> </div> <div id='jqxExpander2'> <div> Folders</div> <div id='jqxTree2'> <ul> <li item-expanded='true'> <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' /><span item-title="true">Mail</span> <ul> <li id="Calendar" item-expanded='true'> <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png' /><span item-title="true">Calendar</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span item-title="true">Contacts</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true"> <span>Inbox</span><span style='color: Blue;'> (3)</span></span> <ul> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">jQWidgets</span> <ul> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Admin</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Corporate</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Finance</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Other</span> </li> </ul> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Personal</span> </li> </ul> </li> <li item-expanded='true'> <img style='float: left; margin-right: 5px;' src='../../images/recycle.png' /><span item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span> <ul> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Today</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Last Week</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span item-title="true">Last Month</span> </li> </ul> <li> <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png' /><span item-title="true">Notes</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/settings.png' /><span item-title="true">Settings</span> </li> <li> <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span item-title="true">Favorites</span> </li> </li> </ul> </li> </ul> </div> </div> </div> </div></body></html>
In the ‘select’ event of jqxTree we call the ‘selectitem’ method of jqxTree2 and select an item with id=Calendar. You can use the same approach for selecting other items.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comMay 21, 2013 at 9:00 am in reply to: Query regarding jqxvalidation. Query regarding jqxvalidation. #21531Hi Apeksha Singh,
The first thing that we should know in order to help you is how are you navigating through the pages?
If you want to hide all the hints you can use the jqxvalidator’s method – “hide”. Please take a look at the provided example: $(‘#jqxValidator’).jqxValidator(‘hide’);Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comMay 14, 2013 at 12:23 pm in reply to: Tab code not working on Vertigo Server Tab code not working on Vertigo Server #21131Hi samik,
In order to solve your issue please make sure that you have added the three needed files for the jqxTab and that path to the files’ folder is the right one:
1. jqxcore.js
2. jqxtabs.js
3. jqx.base.cssIf you have any further questions, please do not hesitate to contact us.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.com -
AuthorPosts