jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid – SpinButton doesn't showup
Tagged: grid popup edit
This topic contains 4 replies, has 2 voices, and was last updated by Keshavan 11 years, 12 months ago.
-
Author
-
Hi,
I have implemented Popup edit, i have implemented ‘Spin Buttons’ for the number field ‘Teritory’ , but popup edit doesn’t show
Spin buttons for the fields.jQWidgets v2.8.0 Release, Mar-22-2013
Here is my view code, Please let me know the issue.
<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="stylesheet" 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" /> <script type="text/javascript" src="/JqWidgets/scripts/gettheme.js"></script> <script type="text/javascript" src="/JqWidgets/scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxnumberinput.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.edit.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.filter.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/jqxwindow.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); // prepare the data var data = {}; var n1 = 0; var generaterow = function (id) { var row = {}; row["CustomerId"] = id; row["CustomerName"] = " "; row["IsPreferred"] = false; <strong> row["Teritory"] = 1;</strong> row["Sex"] = ' '; row["Age"] = 0; row["MaritalStatus"] = false; row["Rating"] = 0; row["EmailId"] = " "; row["Mobile"] = " "; row["BL_AddressLine1"] = " "; row["BL_AddressLine2"] = " "; row["BL_City"] = " "; row["BL_ZipCode"] = " "; row["BL_LandPhone"] = " "; row["SH_AddressLine1"] = " "; row["SH_AddressLine2"] = " "; row["SH_City"] = " "; row["SH_ZipCode"] = " "; row["SH_Phone"] = " "; return row; } var source = { datatype: "json", datafields: [ { name: 'CustomerId' }, { name: 'CustomerName', type: 'string' }, { name: 'IsPreferred', type: 'bool' }, <strong> { name: 'Teritory', type: 'number' },</strong> { name: 'Sex', type: 'char' }, { name: 'Age', type: 'Number' }, { name: 'MaritalStatus', type: 'Boolean' }, { name: 'Rating', type: 'Number' }, { name: 'EmailId', type: 'string' }, { name: 'Mobile', type: 'string' }, { name: 'BL_AddressLine1', type: 'string' }, { name: 'BL_AddressLine2', type: 'string' }, { name: 'BL_City', type: 'string' }, { name: 'BL_ZipCode', type: 'string' }, { name: 'BL_LandPhone', type: 'string' }, { name: 'SH_AddressLine1', type: 'string' }, { name: 'SH_AddressLine2', type: 'string' }, { name: 'SH_City', type: 'string' }, { name: 'SH_ZipCode', type: 'string' }, { name: 'SH_Phone', type: 'string' } ], id: 'CustomerId', url: 'Customer/GetCustomers', addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command $.ajax ({ cache: false, dataType: 'json', url: 'Customer/Add', data: rowdata, type: "POST", success: function (data, status, xhr) { // insert command is executed. commit(true); // $('#n1').val(data.GroupCompanyId); // alert("n1 value is " + n1); }, error: function (jqXHR, textStatus, errorThrown) { alert("err Occured " + errorThrown); commit(false); } }); }, updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command { $.ajax( { cache: false, dataType: 'json', url: 'Customer/Update', data: rowdata, type: "POST", success: function (data, status, xhr) { // update command is executed. // alert(success); // alert(xhr.responseText); alert("entry saved!"); console.log(xhr.rowdata); commit(true); }, error: function (jqXHR, textStatus, errorThrown) { alert("Fails ... "); commit(false); } } ); } } }; var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; // initialize the input fields. $("#customerId").jqxInput({ theme: theme }); $("#customerName").jqxInput({ theme: theme }); $("#isPreferred").jqxInput({ theme: theme }); $("#sex").jqxInput({ theme: theme }); $("#age").jqxInput({ theme: theme }); $("#maritalStatus").jqxInput({ theme: theme }); $("#rating").jqxInput({ theme: theme }); $("#emailId").jqxInput({ theme: theme }); $("#mobile").jqxInput({ theme: theme }); $("#bl_AddressLine1").jqxInput({ theme: theme }); $("#bl_AddressLine2").jqxInput({ theme: theme }); $("#bl_City").jqxInput({ theme: theme }); $("#bl_ZipCode").jqxInput({ theme: theme }); $("#bl_LandPhone").jqxInput({ theme: theme }); $("#sh_AddressLine1").jqxInput({ theme: theme }); $("#sh_AddressLine2").jqxInput({ theme: theme }); $("#sh_City").jqxInput({ theme: theme }); $("#sh_ZipCode").jqxInput({ theme: theme }); $("#sh_Phone").jqxInput({ theme: theme }); $("#customerId").width(30); $("#customerId").height(20); $("#customerName").width(250); $("#customerName").height(20); $("#isPreferred").width(250); $("#isPreferred").height(20);<strong> $("#teritory").jqxNumberInput({ width: 100, height: 20, theme: theme, decimalDigits: 0, spinButtons: true });</strong> $("#city").width(250); $("#city").height(20); $("#sex").width(250); $("#sex").height(20); $("#age").width(250); $("#age").height(20); $("#maritalStatus").width(250); $("#maritalStatus").height(20); $("#rating").width(250); $("#rating").height(20); $("#emailId").width(250); $("#emailId").height(20); $("#mobile").width(250); $("#mobile").height(20); $("#bl_AddressLine1").width(250); $("#bl_AddressLine1").height(20); $("#bl_AddressLine2").width(250); $("#bl_AddressLine2").height(20); $("#bl_City").width(250); $("#bl_City").height(20); $("#bl_ZipCode").width(250); $("#bl_ZipCode").height(20); $("#bl_LandPhone").width(250); $("#bl_LandPhone").height(20); $("#sh_AddressLine1").width(250); $("#sh_AddressLine1").height(20); $("#sh_AddressLine2").width(250); $("#sh_AddressLine2").height(20); $("#sh_City").width(250); $("#sh_City").height(20); $("#sh_ZipCode").width(250); $("#sh_ZipCode").height(20); $("#sh_Phone").width(250); $("#sh_Phone").height(20); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 1015, height: 350, source: dataAdapter, theme: 'ui-sunny', pageable: true, sortable: true, filterable: true, groupable: true, columnsresize: true, columnsreorder: true, // autoheight: true, columns: [ { text: 'Select/Update', datafield: 'select', columntype: 'button', cellsrenderer: function () { return "select"; }, buttonclick: function (row) { // open the popup window when the user clicks a button. editrow = row; var offset = $("#jqxgrid").offset(); $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 6, y: parseInt(offset.top) + (-150) } }); // get the clicked row's data and initialize the input fields. var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); $("#customerId").val(dataRecord.CustomerId); $("#customerName").val(dataRecord.CustomerName); $("#isPreferred").val(dataRecord.IsPreferred); <strong>$("#teritory").jqxNumberInput({ decimal: dataRecord.Teritory });</strong> $("#sex").val(dataRecord.Sex); $("#age").val(dataRecord.Age); $("#maritalStatus").val(dataRecord.MaritalStatus); $("#rating").val(dataRecord.Rating); $("#emailId").val(dataRecord.EmailId); $("#mobile").val(dataRecord.Mobile); $("#bl_AddressLine1").val(dataRecord.BL_AddressLine1); $("#bl_AddressLine2").val(dataRecord.BL_AddressLine2); $("#bl_City").val(dataRecord.BL_City); $("#bl_ZipCode").val(dataRecord.BL_ZipCode); $("#bl_LandPhone").val(dataRecord.BL_LandPhone); $("#sh_AddressLine1").val(dataRecord.SH_AddressLine1); $("#sh_AddressLine2").val(dataRecord.SH_AddressLine2); $("#sh_City").val(dataRecord.SH_City); $("#sh_ZipCode").val(dataRecord.SH_ZipCode); $("#sh_Phone").val(dataRecord.SH_Phone); // show the popup window. $("#popupWindow").jqxWindow('open'); } }, { text: 'Customer', datafield: 'CustomerName', width: 250 }, { text: 'Preferred ?', datafield: 'IsPreferred', threestatecheckbox: true, columntype: 'checkbox', width: 70 }, <strong> { text: 'Teritory ', datafield: 'teritory', width: 100, cellsalign: 'right' },</strong> { text: 'Sex', datafield: 'Sex', width: 100 }, { text: 'Age', datafield: 'Age', width: 100 }, { text: 'MaritalStatus', datafield: 'MaritalStatus', width: 250 }, { text: 'Rating', datafield: 'Rating', width: 250 }, { text: 'EmailId', datafield: 'EmailId', width: 150 }, { text: 'Mobile', datafield: 'Mobile', width: 150 }, { text: 'Billing Address', datafield: 'BL_AddressLine1', width: 250 }, { text: ' ', datafield: 'BL_AddressLine2', width: 50 }, { text: 'City', datafield: 'BL_City', width: 50 }, { text: 'ZipCode', datafield: 'BL_ZipCode', width: 50 }, { text: 'Land Phone', datafield: 'BL_LandPhone', width: 50 }, { text: 'Shipping Address', datafield: 'SH_AddressLine1', width: 250 }, { text: ' ', datafield: 'SH_AddressLine2', width: 50 }, { text: 'City', datafield: 'SH_City', width: 50 }, { text: 'ZipCode', datafield: 'SH_ZipCode', width: 50 }, { text: 'Land Phone', datafield: 'SH_Phone', width: 50 } ] }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: 600, resizable: false, theme: 'ui-sunny', isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#popupWindow").on('open', function () { $("#customerId").jqxInput('selectAll'); }); $("#addrowbutton").jqxButton({ width: '90', height: '30', theme: 'ui-sunny' }); $("#updaterowbutton").jqxButton({ width: '90', height: '25', theme: 'ui-sunny' }); $("#deleterowbutton").jqxButton({ width: '90', height: '30', theme: 'ui-sunny' }); // update row. // create new row. $("#addrowbutton").bind('click', function () { var datainformation = $("#jqxgrid").jqxGrid('getdatainformation'); var rowscount = datainformation.rowscount; editrow = rowscount + 1; var datarow = generaterow(rowscount + 1); $("#jqxgrid").jqxGrid('addrow', (rowscount + 1), generaterow(), 'top'); }); $("#updaterowbutton").bind('click', function () { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); $("#jqxgrid").jqxGrid('updaterow', id, datarow); } }); $("#Cancel").jqxButton({ theme: 'ui-sunny' }); $("#Save").jqxButton({ theme: 'ui-sunny' }); $('#testForm').jqxValidator({ rules: [ { input: '#customerName', message: 'Customer Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#customerName', message: 'Customer Name must be between 20 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#isPreferred', message: 'isPreferred is required!', action: 'keyup, blur', rule: 'required' }, <strong> { input: '#teritory', message: 'teritory is required!', action: 'keyup, blur', rule: 'required' },</strong> { input: '#sex', message: 'sex, value is required!', action: 'keyup, blur', rule: 'required' }, { input: '#age', message: 'age is required!', action: 'keyup, blur', rule: 'required' }, { input: '#age', message: 'age must be between 2 and 3 digits!', action: 'keyup, focus', rule: 'length=2,3' }, { input: '#maritalStatus', message: 'MaritalStatus is required!', action: 'keyup, blur', rule: 'required' }, { input: '#rating', message: 'Rating is required!', action: 'keyup, blur', rule: 'required' }, { input: '#emailId', message: 'EmailId is required!', action: 'keyup, blur', rule: 'email' }, { input: '#mobile', message: 'Mobile is required!', action: 'keyup, blur', rule: 'required' }, { input: '#mobile', message: 'Mobile must be between 10 and 15 characters!', action: 'keyup, focus', rule: 'length=10,15' }, { input: '#bl_AddressLine1', message: 'Billing Address is required!', action: 'keyup, blur', rule: 'required' }, { input: '#bl_AddressLine1', message: 'Billing Address must be between 15 and 50 characters!', action: 'keyup, focus', rule: 'length=15,50' }, { input: '#bl_City', message: 'City is required!', action: 'keyup, blur', rule: 'required' }, { input: '#bl_City', message: 'City must be between 3 and 50 characters!', action: 'keyup, focus', rule: 'length=3,50' }, { input: '#bl_ZipCode', message: 'ZipCode is required!', action: 'keyup, blur', rule: 'required' }, { input: '#bl_ZipCode', message: 'ZipCode level must be 6 characters!', action: 'keyup, focus', rule: 'length=6,10' }, { input: '#bl_LandPhone', message: 'LandPhone is required!', action: 'keyup, blur', rule: 'required' }, { input: '#bl_LandPhone', message: 'LandPhone level must be between 8 and 15 characters!', action: 'keyup, focus', rule: 'length=8,15' }, { input: '#sh_AddressLine1', message: 'Shipping Address is required!', action: 'keyup, blur', rule: 'required' }, { input: '#sh_AddressLine1', message: 'Shipping Address must be between 15 and 50 characters!', action: 'keyup, focus', rule: 'length=15,50' }, { input: '#sh_City', message: 'City is required!', action: 'keyup, blur', rule: 'required' }, { input: '#sh_City', message: 'City must be between 3 and 50 characters!', action: 'keyup, focus', rule: 'length=3,50' }, { input: '#sh_ZipCode', message: 'ZipCode is required!', action: 'keyup, blur', rule: 'required' }, { input: '#sh_ZipCode', message: 'ZipCode level must be 6 characters!', action: 'keyup, focus', rule: 'length=6,10' }, { input: '#sh_Phone', message: 'LandPhone is required!', action: 'keyup, blur', rule: 'required' }, { input: '#sh_Phone', message: 'LandPhone level must be between 8 and 15 characters!', action: 'keyup, focus', rule: 'length=8,15' } ] }); $('#Save').bind('click', function () { $('#testForm').jqxValidator('validate'); }); $("#Cancel").click(function () { $('#testForm').jqxValidator('hideHint', '#customerName'); }); var result = false; // update the edited row when the user clicks the 'Save' button. $("#Save").click(function () { if (editrow >= 0) { result = $('#testForm').jqxValidator('validate'); if (result == true) { row = { CustomerId: $("#customerId").val(), CustomerName: $("#customerName").val(), IsPreferred: $("#isPreferred").val(), <strong>Teritory: parseInt($("#teritory").jqxNumberInput('decimal')),</strong> Sex: $("#sex").val(), Age: $("#age").val(), MaritalStatus: $("#maritalStatus").val(), Rating: $("#rating").val(), EmailId: $("#emailId").val(), Mobile: $("#mobile").val(), BL_AddressLine1: $("#bl_AddressLine1").val(), BL_AddressLine2: $("#bl_AddressLine2").val(), BL_City: $("#bl_City").val(), BL_ZipCode: $("#bl_ZipCode").val(), BL_LandPhone: $("#bl_LandPhone").val(), SH_AddressLine1: $("#sh_AddressLine1").val(), SH_AddressLine2: $("#sh_AddressLine2").val(), SH_City: $("#sh_City").val(), SH_ZipCode: $("#sh_ZipCode").val(), SH_Phone: $("#sh_Phone").val() }; var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); $('#jqxgrid').jqxGrid('updaterow', rowID, row); $("#popupWindow").jqxWindow('hide'); } } }); }); </script></head><body class='default'> <div> <input id="addrowbutton" type="button" style="margin-top: 1px;" value=" (+) record" /> <input id="deleterowbutton" type="button" style="margin-top: 1px;" value=" (-) record" /> </div> <br/> <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 id="popupWindow"> <div>Edit</div> <div style="overflow: hidden;"> <form id="testForm" action="./"> <table> <tr> <td "align=""right">Id:</td> <td "align=""left"> <input id="customerId" /></td> </tr> <tr> <td "align=""right">Customer:</td> <td "align=""left"> <input id="customerName" /></td> </tr> <tr> <td "align=""right">Preferred ? :</td> <td "align=""left"> <input id="isPreferred" /></td> </tr> <strong> <tr> <td "align=""right">Teritory:</td> <td "align=""left"> <input id="teritory" /></td> </tr></strong> <tr> <td "align=""right">Sex:</td> <td "align=""left"> <input id="sex" /></td> </tr> <tr> <td "align=""right">Age:</td> <td "align=""left"> <input id="age" /></td> </tr> <tr> <td "align=""right">MaritalStatus:</td> <td "align=""left"> <input id="maritalStatus" /></td> </tr> <tr> <td "align=""right">Rating:</td> <td "align=""left"> <input id="rating" /></td> </tr> <tr> <td "align=""right">EmailId:</td> <td "align=""left"> <input id="emailId" /></td> </tr> <tr> <td "align=""right">Mobile:</td> <td "align=""left"> <input id="mobile" /></td> </tr> <tr> <td "align=""right">Bill Address Line1:</td> <td "align=""left"> <input id="bl_AddressLine1" /></td> </tr> <tr> <td "align=""right">Bill Address Line2:</td> <td "align=""left"> <input id="bl_AddressLine2" /></td> </tr> <tr> <td "align=""right">Bill City:</td> <td "align=""left"> <input id="bl_City" /></td> </tr> <tr> <td "align=""right">Bill ZipCode:</td> <td "align=""left"> <input id="bl_ZipCode" /></td> </tr> <tr> <td "align=""right">Bill LandPhone:</td> <td "align=""left"> <input id="bl_LandPhone" /></td> </tr> <tr> <td "align=""right">Ship Address Line1:</td> <td "align=""left"> <input id="sh_AddressLine1" /></td> </tr> <tr> <td "align=""right">Ship Address Line2:</td> <td "align=""left"> <input id="sh_AddressLine2" /></td> </tr> <tr> <td "align=""right">Ship City:</td> <td "align=""left"> <input id="sh_City" /></td> </tr> <tr> <td "align=""right">Ship ZipCode:</td> <td "align=""left"> <input id="sh_ZipCode" /></td> </tr> <tr> <td "align=""right">Ship LandPhone:</td> <td "align=""left"> <input id="sh_Phone" /></td> </tr> <tr> <td "align=""right"></td> <td style="padding-top: 10px;" align="right"> <input style="margin-right: 5px;" type="button" id="Save" value="Save" /> <input id="Cancel" type="button" value="Cancel" /></td> </tr> </table> </form> </div> </div> </div></body></html>
Hi Keshavan,
Please take a look at the provided example at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/popupediting.htm?web. It illustrates how to add a Number Input with Spin Buttons into a Popup Dialog.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi Maria,
I have used the code you sent as is. I have the same problem.
Is Version any issue ?
I have used,
1)jquery-1.8.3.min.js,
2) jQWidgets v2.8.0 Release, Mar-22-2013Please suggest to resolve issue.
Thanks,
Keshavan
Hi Keshavan,
Please, look exactly at our sample and how it is initialized. To use the jqxNumberInput, you should initialize it from DIV tag, not from Input tag. It is not a version error , because our sample works with previous versions, too.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi Mariya,
Thanks for excellent debugging and solution, Yes, I corrected as you mentioned, It’s working now.
Best Wishes,
Keshavan -
AuthorPosts
You must be logged in to reply to this topic.