Forum Replies Created
-
Author
-
April 27, 2015 at 6:32 am in reply to: How to disable edit on jqxInput How to disable edit on jqxInput #70271
Hi cpuin,
Right now we can offer you 2 solutions.
1. To add strict filtering of the clients option, that can be used in this input.
2. To add additional button, used if the client wants to change the value. The button will set the input’s property (“readonly”, false) untill the change of the value happens.Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comHi Pribadi Pamungkas,
You can add some CSS styles to detect when some button is pressed and then change the style.
Here is an example.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>The jqxButtonGroup widget creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.</title> <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttongroup.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script> <style> .jqx-group-button-pressed.jqx-success { background-color: #ff0000 !important; color: #aaaaaa !important; background-image: none !important; } </style> </head> <body class='default'> <div id='content'> <script type="text/javascript"> $(document).ready(function () { // Create jqxButtonGroup. $("#jqxWidget").jqxButtonGroup({ mode: 'checkbox' }); // Add templates to the jqxButtons. $("#Left").jqxButton({ template: "success" }); $("#Center").jqxButton({ template: "success" }); $("#Right").jqxButton({ template: "success" }); }); </script> <div id='jqxWidget'> <button style="padding:4px 16px;" id="Left"> Left </button> <button style="padding:4px 16px;" id="Center"> Center </button> <button style="padding:4px 16px;" id="Right"> Right </button> </div> </div> </body> </html>
Best Regards,
Ivaylo IvanovjQWidgets Team
http://www.jqwidgets.comApril 24, 2015 at 5:32 am in reply to: How to disable edit on jqxInput How to disable edit on jqxInput #70216Hi cpuin,
You can add this code after the presented part of your code
$("#company").on("select", function () { $("#company").prop("readonly", true); });
After selecting, the input goes “readonly”.
Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comApril 23, 2015 at 8:16 am in reply to: How to disable edit on jqxInput How to disable edit on jqxInput #70174Hi cpuin,
Try to use inline in the input “readonly” attribute.
<input type="text" id="input" value="Test Value" readonly/>
Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comApril 22, 2015 at 11:12 am in reply to: Copy paste of Cell values from Excel into grid Copy paste of Cell values from Excel into grid #70142Hi ravishankar.knln,
Unfortunately we cannot reproduce this type of behavior.
Try to update to the last version 3.7.1.Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comApril 21, 2015 at 11:37 am in reply to: Grid – data type:number – 0 value showing blank. Grid – data type:number – 0 value showing blank. #70114Hi Ajit,
Can you send the part of the code, that does not work correct.
Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comHi Vishnu,
You can combine these 2 modes, and also create whatever you want like custom design of the pager.
The way to do this is using “pagerrenderer” function.
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/custompager.htmIn the below post also you can see the solution about similar problem.
http://www.jqwidgets.com/community/topic/jqxgrid-pagerrenderer-code-to-recreate-go-to-page-and-show-rows-type-pager/#post-70048Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comP.S.
Here is the sample of code, with needed structure.
<!--Start of the first window--> <div id="window0"> <div id="windowHeader"><span>Pesquisa de MunicĂpios</span></div> <div> <div style="width: 100%; height: 110px; "> <table id="filter" style=" width: 100%; margin: auto; empty-cells: show; border-collapse: separate; border-spacing: 3px; "> <tr> <td class="TL" style=" width: 15%; "><label for="filcodmun">Cod. Mun: </label></td> <td class="TL" style=" width: 55%; "> <input name="filcodmun" id="filcodmun" type="text" style=" width: 150px; " maxlength="5" value="" onblur="Javascript: UpperCaseField( this );" /> </td> <td class="TL" style=" width: 30%; vertical-align: mmiddle; " rowspan="3"> <input type="button" id="filtrar" value="Filtrar" /> </td> </tr> <tr> <td class="TL"><label for="filestado">Estado: </label></td> <td class="TL"> <input name="filestado" id="filestado" type="text" style=" width: 150px; " maxlength="2" value="" onblur="Javascript: UpperCaseField( this );" /> EX: RS </td> </tr> <tr> <td class="TL"><label for="filestado">Nome: </label></td> <td class="TL"> <input name="filnome" id="filnome" type="text" style=" width: 320px; " maxlength="60" value="" onblur="Javascript: UpperCaseField( this );" /> </td> </tr> </table> </div> <div style=" margin-top: 5px; overflow: hidden;" id="windowContent"> </div> </div> </div> <!--End of the first window--> <!--Start of the second window--> <div id="window1"> <div id="window1Header"><span>Mensagem</span></div> <div> <div id="window1Content" style=" margin-top: 5px; overflow: hidden;"></div> </div> </div> <!--End of the second window-->
Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comHi amichelins,
In your structure the second window (window1) is nested. This raises the error.
Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comApril 21, 2015 at 5:41 am in reply to: Grid – data type:number – 0 value showing blank. Grid – data type:number – 0 value showing blank. #70091Hi Ajit,
Unfortionatly with curent version of jqWidgets we can not reproduce your problem.
In current demo version this feauture works fine:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cellediting.htm
Please try to upgrade to version 3.7.1Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comRight now we don’t have that kind of feauture, but we can give you acceptable solution.
You can try this work around:
Set a hiddein div (display:none) with loading gif for image.
When you select some ComboBox, the div goes visible, also with absolute position in top of the loading ComboBox (higher zIndex). It hides when the data is loaded. Then stays not visible and waits until next changes.Here is an example.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>In this sample is illustrated how to create a Grid with column which displays values from foreign data source. The ComboBox editor associated to the column is populated from the foreign data source.</title> <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var countries = [ { value: "AF", label: "Afghanistan" }, { value: "AL", label: "Albania" }, { value: "DZ", label: "Algeria" }, { value: "AR", label: "Argentina" }, { value: "AM", label: "Armenia" }, { value: "AU", label: "Australia" }, { value: "AT", label: "Austria" }, { value: "AZ", label: "Azerbaijan" }, { value: "BS", label: "Bahamas" }, { value: "BH", label: "Bahrain" }, { value: "BD", label: "Bangladesh" }, { value: "BB", label: "Barbados" }, { value: "BY", label: "Belarus" }, { value: "BE", label: "Belgium" }, { value: "BZ", label: "Belize" }, { value: "BJ", label: "Benin" }, { value: "BM", label: "Bermuda" }, { value: "BR", label: "Brazil" }, { value: "BN", label: "Brunei" }, { value: "BG", label: "Bulgaria" }, { value: "CM", label: "Cameroon" }, { value: "CA", label: "Canada" }, { value: "CL", label: "Chile" }, { value: "CN", label: "China" }, { value: "CO", label: "Columbia" }, { value: "CR", label: "Costa Rica" }, { value: "HR", label: "Croatia (Hrvatska)" }, { value: "CU", label: "Cuba" }, { value: "CY", label: "Cyprus" }, { value: "CZ", label: "Czech Republic" }, { value: "DK", label: "Denmark" }, { value: "TP", label: "East Timor" }, { value: "EC", label: "Ecuador" }, { value: "EG", label: "Egypt" }, { value: "ER", label: "Eritrea" }, { value: "EE", label: "Estonia" }, { value: "ET", label: "Ethiopia" }, { value: "FI", label: "Finland" }, { value: "FR", label: "France" }, { value: "DE", label: "Germany" }, { value: "GR", label: "Greece" }, { value: "HK", label: "Hong Kong" }, { value: "HU", label: "Hungary" }, { value: "IS", label: "Iceland" }, { value: "IN", label: "India" }, { value: "ID", label: "Indonesia" }, { value: "IR", label: "Iran" }, { value: "IQ", label: "Iraq" }, { value: "IE", label: "Ireland" }, { value: "IL", label: "Israel" }, { value: "IT", label: "Italy" }, { value: "JM", label: "Jamaica" }, { value: "JP", label: "Japan" }, { value: "MX", label: "Mexico" }, { value: "MC", label: "Monaco" }, { value: "MA", label: "Morocco" }, { value: "NL", label: "Netherlands" }, { value: "NZ", label: "New Zealand" }, { value: "NE", label: "Niger" }, { value: "NG", label: "Nigeria" }, { value: "KP", label: "North Korea" }, { value: "NO", label: "Norway" }, { value: "PA", label: "Panama" }, { value: "PE", label: "Peru" }, { value: "PH", label: "Philippines" }, { value: "PL", label: "Poland" }, { value: "PT", label: "Portugal" }, { value: "RO", label: "Romania" }, { value: "RU", label: "Russia" }, { value: "SA", label: "Saudi Arabia" }, { value: "SK", label: "Slovak Republic" }, { value: "SI", label: "Slovenia" }, { value: "ZA", label: "South Africa" }, { value: "KR", label: "South Korea" }, { value: "ES", label: "Spain" }, { value: "SE", label: "Sweden" }, { value: "CH", label: "Switzerland" }, { value: "TN", label: "Tunisia" }, { value: "TR", label: "Turkey" }, { value: "UA", label: "Ukraine" }, { value: "AE", label: "United Arab Emirates" }, { value: "UK", label: "United Kingdom" }, { value: "US", label: "United States" } ]; var countriesSource = { datatype: "array", datafields: [ { name: 'label', type: 'string' }, { name: 'value', type: 'string' } ], localdata: countries }; var countriesAdapter = new $.jqx.dataAdapter(countriesSource, { autoBind: true }); // prepare the data var gridSource = { datatype: "array", localdata: [ { countryCode: "UK" }, { countryCode: "US" }, { countryCode: "DE" }, { countryCode: "FR" }, { countryCode: "IN" }, { countryCode: "HK" } ], datafields: [ // name - determines the field's name. // value - the field's value in the data source. // values - specifies the field's values. // values.source - specifies the foreign source. The expected value is an array. // values.value - specifies the field's value in the foreign source. // values.name - specifies the field's name in the foreign source. // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter. { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } }, { name: 'countryCode', type: 'string' } ] }; var gridAdapter = new $.jqx.dataAdapter(gridSource); $("#jqxgrid").jqxGrid( { width: 600, source: gridAdapter, selectionmode: 'singlecell', autoheight: true, editable: true, columns: [ { text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'combobox', createeditor: function (row, value, editor) { var offset = $(editor).offset(); $("#ajaxLoader").show(); $('#ajaxLoader').css({ position: 'absolute', zIndex: 8888888, top: offset.top+'px', left: offset.left+'px' }); editor.jqxComboBox({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' }); $(editor).on('bindingComplete', function (event) { $('#ajaxLoader').css({ zIndex: -8888888 }); }); } } ] }); $("#jqxgrid").on('cellselect', function (event) { var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield); var value = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.datafield); var displayValue = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.displayfield); $("#eventLog").html("<div>Selected Cell<br/>Row: " + event.args.rowindex + ", Column: " + column.text + ", Value: " + value + ", Label: " + displayValue + "</div>"); }); $("#jqxgrid").on('cellendedit', function (event) { var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield); if (column.displayfield != column.datafield) { $("#eventLog").html("<div>Cell Edited:<br/>Index: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value.value + ", Label: " + event.args.value.label + "<br/>Old Value: " + event.args.oldvalue.value + ", Old Label: " + event.args.oldvalue.label + "</div>" ); } else { $("#eventLog").html("<div>Cell Edited:<br/>Row: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value + "<br/>Old Value: " + event.args.oldvalue + "</div>" ); } }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> <div style="font-size: 13px; margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;" id="eventLog"></div> <div id="ajaxLoader" style="display: none; z-index:'8888888'; background-color: white; width:200px; margin-top:3px; margin-left: 3px;"> <img height="15" width="15" src="http://images.all-digitall.com/pages/General/loading.gif" /> </div> </div> </body> </html>
Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comYou can access all the buttons via their IDs.
If the buttons don’t have IDs You must create them.Below is shown the way to make the relation betwen IDs and templates.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>The jqxButtonGroup widget creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.</title> <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttongroup.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script> </head> <body class='default'> <div id='content'> <script type="text/javascript"> $(document).ready(function () { // Create jqxButtonGroup. $("#jqxWidget").jqxButtonGroup({ mode: 'default' }); // Add templates to the jqxButtons. $("#Left").jqxButton({ template: "info" }); $("#Center").jqxButton({ template: "success" }); $("#Right").jqxButton({ template: "warning" }); }); </script> <div id='jqxWidget'> <button style="padding:4px 16px;" id="Left"> Left </button> <button style="padding:4px 16px;" id="Center"> Center </button> <button style="padding:4px 16px;" id="Right"> Right </button> </div> </div> </body> </html>
Best Regards,
Ivaylo IvanovjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts