jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Radio button select issue in popup edit in grid
This topic contains 4 replies, has 2 voices, and was last updated by ivailo 10 years, 1 month ago.
Viewing 5 posts - 1 through 5 (of 5 total)
-
Author
-
Hi,
I have defined 3 radio buttons , $(“#jqxRadioButton”),$(“#jqxRadioButton2”). $(“#jqxRadioButton3”)
I need to select only one radio button in popup window,, but when any one radio button is selected still I am able to select
all other 2 of them, none of other 2 get de-selected, Please help.
I have pasted the full code below.
Thanks,
Keshavan<!DOCTYPE html> <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/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttongroup.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxnumberinput.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/jqxdatetimeinput.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxradiobutton.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="http://maps.google.com/maps/api/js?key=AIzaSyACml1UshMGEbt1hZLg7rJ08X4qsbhqsMM&sensor=false"></script> <script type="text/javascript" src="/Scripts/google-map.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcalendar.js"></script> <style> input[type=text]:focus { border-color: #0000ff; border-width: 3px; background-color: aliceblue; } </style> <script type="text/javascript"> $(document).ready(function () { var theme = 'ui-sunny'; // prepare the data var data = {}; var n1 = 0; var valu; var valuR; var isChecked1; var isChecked2; var isChecked3; var dataSource = ["Male", "Female"]; var dataSourceCT = ["hospital", "clinic", "specialist", "wholesale", "retail", "nursing Home", "pharmacy", "doctor", "dentist"]; // var dataSourceTeritory = ["Excellent", "Good", "Average"]; $("#addrowbutton").jqxButton({ width: '4%', height: '30', theme: 'ui-sunny' }); $("#deleterowbutton").jqxButton({ width: '4%', height: '30', theme: 'ui-sunny' }); $("#resizebutton").jqxButton({ width: '7%', height: '30', theme: 'ui-sunny' }); $("#addressbutton").jqxButton({ width: '10%', height: '30', theme: 'ui-sunny' }); $("#Cancel").jqxButton({ theme: 'ui-sunny' }); $("#Save").jqxButton({ theme: 'ui-sunny' }); var generaterow = function (id) { var row = {}; row["CustomerId"] = id; row["CustomerName"]; row["ContactName"]; row["IsPreferred"] = false; row["teritory"]; row["rating"] = 1; row["EmailId"]; row["Mobile"]; row["BL_AddressLine1"]; row["BL_AddressLine2"]; row["BL_City"] = "Chennai"; row["BL_ZipCode"]; row["BL_LandPhone"]; row["SH_AddressLine1"]; row["SH_AddressLine2"]; row["SH_City"]; row["SH_ZipCode"]; row["SH_Phone"]; row["CutomerType"]; row["LastBusinessDate"]; row["Latitude"]; row["Longitude"]; row["CreditLimit"]; row["OverDraft"]; row["Receievebles"]; return row; } var source = { datatype: "json", datafields: [ { name: 'CustomerId' }, { name: 'CustomerName', type: 'string' }, { name: 'ContactName', type: 'string' }, { name: 'IsPreferred', type: 'bool' }, { name: 'teritory', type: 'string' }, { name: 'rating', type: 'numberinput' }, { 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' }, { name: 'CutomerType', type: 'string' }, { name: 'LastBusinessDate', type: 'date', format: 'mm/dd/yyyy' }, { name: 'Latitude', type: 'string' }, { name: 'Longitude', type: 'string' }, { name: 'CreditLimit', type: 'number' }, { name: 'OverDraft', type: 'number' }, { name: 'Receievebles', type: 'number' } ], id: 'CustomerId', url: '/Customer/GetCustomer', 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!"); // commented on 16 jul 13 console.log(xhr.rowdata); commit(true); }, error: function (jqXHR, textStatus, errorThrown) { alert("Fails ... "); commit(false); } } ); } } }; // initialize jqxGrid var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; $("#jqxgrid").jqxGrid( { width: '99%', //960 height: 220, source: dataAdapter, theme: 'ui-sunny', pageable: true, sortable: true, filterable: true, groupable: true, columnsresize: true, columnsreorder: true, // autoheight: true, enabletooltips: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: 'Select', datafield: 'select', width: '7%', 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) + 255, y: parseInt(offset.top) + (-149) } }); // 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); $("#contactName").val(dataRecord.ContactName); $("#isPreferred").val(dataRecord.IsPreferred); // $("#teritory22").val(dataRecord.teritory); if (dataRecord.teritory == "A") { $("#jqxRadioButton").jqxRadioButton('checked'); $("#teritory1").val(true); } if (dataRecord.teritory == "B") { $("#jqxRadioButton2").jqxRadioButton('checked'); $("#teritory2").val(true); } if (dataRecord.teritory == "C") { $("#jqxRadioButton3").jqxRadioButton('checked'); $("#teritory3").val(true); } $("#rating").jqxNumberInput({ decimal: dataRecord.rating }); $("#emailId").val(dataRecord.EmailId); $("#mobile").val(dataRecord.Mobile); $("#bl_AddressLine1").val(dataRecord.BL_AddressLine1); $("#address").val(dataRecord.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); $("#customerType").val(dataRecord.CutomerType); $("#lastBusinessDate").val(dataRecord.LastBusinessDate); $("#latitude").val(dataRecord.Latitude); $("#longitude").val(dataRecord.Longitude); $("#creditLimit").val(dataRecord.CreditLimit); $("#overDraft").val(dataRecord.OverDraft); $("#receievebles").val(dataRecord.Receievebles); // show the popup window. $("#popupWindow").jqxWindow('open'); } }, { text: 'Customer', datafield: 'CustomerName', width: 250, pinned: true }, { text: 'Contact', datafield: 'ContactName', width: 250 }, { text: 'Preferred ?', datafield: 'IsPreferred', threestatecheckbox: true, columntype: 'checkbox', width: 70 }, { text: 'Teritory ', datafield: 'teritory', width: 50, cellsalign: 'left' }, { text: 'Rating / 5 ', datafield: 'rating', width: 65, cellsalign: 'left' }, { text: 'EmailId', datafield: 'EmailId', width: 150 }, { text: 'Mobile', datafield: 'Mobile', width: 80 }, { 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 }, { text: 'Customer Type', datafield: 'CutomerType', width: 50 }, { text: 'Last Order On', datafield: 'LastBusinessDate', width: 50, columntype: 'datetimeinput', cellsformat: 'mm/dd/yyyy' }, { text: 'Latitude', datafield: 'Latitude', width: 50 }, { text: 'Longitude', datafield: 'Longitude', width: 50 }, { text: 'Credit Limit', datafield: 'CreditLimit', width: 50 }, { text: 'Over Draft', datafield: 'OverDraft', width: 50 }, { text: 'Receievebles', datafield: 'Receievebles', width: 50 } ] }); // 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'); $("#jqxgrid").jqxGrid('addrow', (rowscount + 1), datarow, 'top'); }); $("#resizebutton").click(function () { $("#jqxgrid").jqxGrid('autoresizecolumns'); }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: '50%', resizable: false, theme: 'ui-sunny', isModal: false, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#jqxRadioButton").jqxRadioButton({checked: true, theme: 'ui-sunny' , width: 30, height: 10, value: "A"}); $("#jqxRadioButton2").jqxRadioButton({ width: 30, height: 10, value: "B"}); $("#jqxRadioButton3").jqxRadioButton({ width: 30, height: 10, value: "C"}); /* $("#jqxRadioButton").on('change', function (event) { var checked = event.args.checked; var isChecked = $("#jqxRadioButton").jqxRadioButton('checked'); }); $("#jqxRadioButton2").on('change', function (event) { var checked = event.args.checked; var isChecked = $("#jqxRadioButton2").jqxRadioButton('checked'); }); $("#jqxRadioButton3").on('change', function (event) { var checked = event.args.checked; var isChecked = $("#jqxRadioButton3").jqxRadioButton('checked'); });*/ // initialize the input fields. $("#popupWindow").on('open', function () { $('#popupWindow').jqxWindow('bringToFront'); $("#customerId").jqxInput('selectAll'); }); $("#customerId").jqxInput({ theme: 'ui-sunny' }); $("#customerName").jqxInput({ theme: 'ui-sunny' }); $("#contactName").jqxInput({ theme: 'ui-sunny' }); // $("#teritory22").jqxRadioButton({ theme: 'ui-sunny' }); $("#teritory1").jqxRadioButton({ theme: 'ui-sunny' }); $("#teritory2").jqxRadioButton({ theme: 'ui-sunny' }); $("#teritory3").jqxRadioButton({ theme: 'ui-sunny' }); $("#isPreferred").jqxCheckBox({ width: 120, height: 20, checked: false, theme: 'ui-sunny' }); $("#rating").jqxNumberInput({ theme: 'ui-sunny' }); $("#emailId").jqxInput({ theme: 'ui-sunny' }); $("#mobile").jqxInput({ theme: 'ui-sunny' }); $("#bl_AddressLine1").jqxInput({ theme: 'ui-sunny' }); $("#bl_AddressLine2").jqxInput({ theme: 'ui-sunny' }); $("#bl_City").jqxInput({ theme: 'ui-sunny' }); $("#bl_ZipCode").jqxInput({ theme: 'ui-sunny' }); $("#bl_LandPhone").jqxInput({ theme: 'ui-sunny' }); $("#sh_AddressLine1").jqxInput({ theme: 'ui-sunny' }); $("#sh_AddressLine2").jqxInput({ theme: 'ui-sunny' }); $("#sh_City").jqxInput({ theme: 'ui-sunny' }); $("#sh_ZipCode").jqxInput({ theme: 'ui-sunny' }); $("#sh_Phone").jqxInput({ theme: 'ui-sunny' }); $("#lastBusinessDate").jqxDateTimeInput({ width: 120, height: 20, formatString: 'MM/dd/yyyy', theme: 'ui-sunny' }); $("#customerType").jqxDropDownList({ source: dataSourceCT, width: 120, height: 20, theme: 'ui-sunny' }); $("#latitude").jqxInput({ theme: 'ui-sunny' }); $("#longitude").jqxInput({ theme: 'ui-sunny' }); $("#creditLimit").jqxInput({ theme: 'ui-sunny' }); $("#overDraft").jqxInput({ theme: 'ui-sunny' }); $("#receievebles").jqxInput({ theme: 'ui-sunny' }); $("#address").jqxInput({ theme: 'ui-sunny' }); $("#customerId").width(30); $("#customerId").height(20); $("#customerName").width(250); $("#customerName").height(20); $("#contactName").width(250); $("#contactName").height(20); // $("#teritory22").width(150); // $("#teritory22").height(50); $("#isPreferred").width(100); $("#isPreferred").height(20); $("#rating").jqxNumberInput({ width: 50, height: 29, min: 1, max: 5, value: 1, inputMode: 'simple', theme: 'ui-sunny', decimalDigits: 0, spinButtons: true }); $("#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); $("#lastBusinessDate").width(100); $("#lastBusinessDate").height(20); $("#latitude").width(250); $("#latitude").height(20); $("#longitude").width(250); $("#longitude").height(20); $("#address").width(250); $("#address").height(20); $("#creditLimit").width(250); $("#creditLimit").height(20); $("#overDraft").width(250); $("#overDraft").height(20); $("#receievebles").width(250); $("#receievebles").height(20); $("#jqxVerticalScrollBar").jqxScrollBar({ width: 10, height: 600, min: 0, max: 600, vertical: true, theme: 'ui-sunny' }); $("#addressbutton").click(function () { result = $('#addressForm').jqxValidator('validate'); if (result == true) { adrs = $("#address").val(); $("#addressLine1").val(adrs); var geocoder, marker, infowindow; // call the function here if you want to move the map code to a seperate fuction if (!geocoder) { geocoder = new google.maps.Geocoder(); } var geocoderRequest = { address: adrs } geocoder.geocode(geocoderRequest, function (results, status) { // Check if status is OK before proceeding if (status == google.maps.GeocoderStatus.OK) { // Center the map on the returned location map.setCenter(results[0].geometry.location); // Check to see if we've already got a Marker object if (!marker) { // Creating a new marker and adding it to the map marker = new google.maps.Marker ({ map: map, title: 'Click me', icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/green/marker1.png' }); } } // Setting the position of the marker to the returned location marker.setPosition(results[0].geometry.location); $("#latitude").val(results[0].geometry.location.lat()); $("#longitude").val(results[0].geometry.location.lng()); if (!infoWindow) { infoWindow = new google.maps.InfoWindow(); } google.maps.event.addListener(marker, 'click', function () { var content = '<div id="info">' + "Latitude :" + results[0].geometry.location.lat() + '<br/>' + "Longitude:" + results[0].geometry.location.lng() + '</div>'; map.setZoom(17); map.setCenter(marker.getPosition()); infoWindow.setContent(content); infoWindow.open(map, marker); var myCircle = new google.maps.Circle({ center: marker.getPosition(), map: map, radius: 5000, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 }); }); }); } }); $('#addressForm').jqxValidator ({ rules: [ { input: '#address', message: 'Location name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#address', message: 'Location name must be between 3 and 50 characters!', action: 'keyup, focus', rule: 'length=3,50' } ] }); $('#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: '#contactName', message: 'Contact Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#contactName', message: 'Contact Name must be between 20 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { 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: function (input, commit) { // call commit with false, when you are doing server validation and you want to display a validation error on this field. if ('length=15,50') { $("#address").val($("#bl_AddressLine1").val()); $("#sh_AddressLine1").val($("#bl_AddressLine1").val()); return true; } return false; } }, { input: '#bl_City', message: 'City is required!', action: 'keyup, blur', rule: 'required' }, { input: '#bl_City', message: 'City must be between 5 and 50 characters!', action: 'keyup, focus', rule: function (input, commit) { // call commit with false, when you are doing server validation and you want to display a validation error on this field. if ('length=5,50') { $("#sh_City").val($("#bl_City").val()); return true; } return false; } }, { input: '#bl_ZipCode', message: 'ZipCode is required!', action: 'keyup, blur', rule: 'required' }, { input: '#bl_ZipCode', message: 'Zip Code must be between 6 and 10 characters!', action: 'keyup, focus', rule: function (input, commit) { // call commit with false, when you are doing server validation and you want to display a validation error on this field. if ('length=6,10') { $("#sh_ZipCode").val($("#bl_ZipCode").val()); return true; } return false; } }, { 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: function (input, commit) { // call commit with false, when you are doing server validation and you want to display a validation error on this field. if ('length=8,15') { $("#sh_Phone").val($("#bl_LandPhone").val()); return true; } return false; } }, { input: '#sh_AddressLine1', message: 'Shipping Address is required!', action: 'keyup, blur', rule: 'required' }, { 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 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' }, { input: '#latitude', message: 'Latitude is required!', action: 'keyup, blur', rule: 'required' }, { input: '#latitude', message: 'Latitude is must be between 6 and 10 characters!', action: 'keyup, focus', rule: 'length=6,20' }, { input: '#longitude', message: 'Longitude is required!', action: 'keyup, blur', rule: 'required' }, { input: '#longitude', message: 'Longitude must be between6 and 10 characters!', action: 'keyup, focus', rule: 'length=6,20' }, { input: '#creditLimit', message: 'Credit Limit is required!', action: 'keyup, blur', rule: 'required' }, { input: '#overDraft', message: 'Over Draft Limit is required!', action: 'keyup, blur', rule: 'required' }, { input: '#receievebles', message: 'Receieveble amount is required!', action: 'keyup, blur', rule: 'required' } ] }); // update row. $('#Save').bind('click', function () { $('#testForm').jqxValidator('validate'); }); $("#Cancel").click(function () { $('#testForm').jqxValidator('hide'); }); var result = false; // update the edited row when the user clicks the 'Save' button. $("#Save").click(function () { if ($("#teritory1").val()) { valu = 'A'; } if ($("#teritory2").val()) { valu = 'B'; } if ($("#teritory3").val()) { valu = 'C'; } if (editrow >= 0) { result = $('#testForm').jqxValidator('validate'); if (result == true) { row = { CustomerId: $("#customerId").val(), CustomerName: $("#customerName").val(), ContactName: $("#contactName").val(), IsPreferred: $("#isPreferred").val(), rating: parseInt($("#rating").jqxNumberInput('decimal')), 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(), CutomerType: $("#customerType").val(), LastBusinessDate: $("#lastBusinessDate").val(), Latitude: $("#latitude").val(), Longitude: $("#longitude").val(), CreditLimit: $("#creditLimit").val(), OverDraft: $("#overDraft").val(), Receievebles: $("#receievebles").val() }; var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); $('#jqxgrid').jqxGrid('updaterow', rowID, row); $("#popupWindow").jqxWindow('hide'); } } }); var map, geocoder, marker, infoWindow, latlng; // latlng = new google.maps.LatLng(13.06916, 80.19138); try { latlng = new google.maps.LatLng(13.06916, 80.19138); } catch (e) { alert("Can't render map : " + e.message) } $("#jqxWidget1").jqxPanel({ width: '99%', height: 200, theme: 'ui-sunny' }); $('#jqxWidget1').jqxPanel({ autoUpdate: true }); var options = { zoom: 3, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN }, streetViewControl: true }; map = new google.maps.Map(document.getElementById('map'), options); $('#map').width('99%').height(400); var menuNo = 8; var lenth = 14; for (var j = 1; j <= lenth; j++) { if (j == menuNo) { $(("#") + (j)).css("background-color", "maroon"); } else $(("#") + (j)).css("background-color", "null"); } }); </script> </head> <body class='default'> <div> <input id="addrowbutton" type="button" style="margin-top: 1px;" value="(+)" /> <input id="deleterowbutton" type="button" style="margin-top: 1px;" value="(-)" /> <input id="resizebutton" type="button" style="margin-top: 1px;" value="Resize" /> </div> <div id='jqxWidget'> <div id="jqxgrid"></div> <form id="addressForm"> <div> <table> <tr> <td> Location Name:</td> <td style="text-align:left"> <input type="text" id="address" class="text-input" /> </td> <td> <input id="addressbutton" type="button" style="margin-top: 1px;" value="Show location" /> </td> </tr> </table> </div> </form> <div id='jqxWidget1' style='width: 470px; height: auto; margin-top:1px'> <div id="map"></div> </div> <div style="margin-top: 10px;"> <div id="cellbegineditevent"></div> <div style="margin-top: 10px;" id="cellendeditevent"></div> </div> <div id="popupWindow"> <!--div style="overflow: hidden;"--> <div> <form id="testForm" action="./"> <table> <tr> <td style="text-align:right">Id:</td> <td style="text-align:left"> <input type="text" id="customerId" /> </td> </tr> <tr> <td style="text-align:right">Customer:</td> <td style="text-align:left"> <input type="text" id="customerName" class="text-input" placeholder="Customer name" autofocus required /> </td> </tr> <tr> <td style="text-align:right">Contact:</td> <td style="text-align:left"> <input type="text" id="contactName" class="text-input" placeholder="Contact name" autofocus required /> </td> </tr> <tr> <td style="text-align:right">Preferred?:</td> <td style="text-align:left"> <input type="checkbox" id="isPreferred"/> </td> </tr> <tr> <td style="text-align:right">Teritory:</td> <td style="text-align:left"> <div> <input type="radio" id='jqxRadioButton'/> <input type="radio" id='jqxRadioButton1' /> <input type="radio" id='jqxRadioButton2' /> </div> </td> </tr> <tr> <td style="text-align:right">Rating / 5 :</td> <td style="text-align:left"> <input type="number" id="rating"/> </td> <tr> <tr> <td style="text-align:right">EmailId:</td> <td style="text-align:left"> <input type="email" id="emailId" placeholder="Customer email Id" required /> </td> </tr> <tr> <td style="text-align:right">Mobile:</td> <td style="text-align:left"> <input type="text" id="mobile" placeholder="Customer mobile no" required /> </td> </tr> <tr> <td style="text-align:right">Bill Address Line1:</td> <td style="text-align:left"> <input type="text" id="bl_AddressLine1" placeholder="Customer billing address line1" required /> </td> </tr> <tr> <td style="text-align:right">Bill Address Line2:</td> <td style="text-align:left"> <input type="text" id="bl_AddressLine2" placeholder="Customer billing address line2" /> </td> </tr> <tr> <td style="text-align:right">Bill City:</td> <td style="text-align:left"> <input type="text" id="bl_City" placeholder="Customer billing city" required /> </td> </tr> <tr> <td style="text-align:right">Bill ZipCode:</td> <td style="text-align:left"> <input type="text" id="bl_ZipCode" placeholder="Customer billing zipcode" required /> </td> </tr> <tr> <td style="text-align:right">Bill LandPhone:</td> <td style="text-align:left"> <input type="text" id="bl_LandPhone" placeholder="Customer billing Land phone no" required /> </td> </tr> <tr> <td style="text-align:right">Ship Address Line1:</td> <td style="text-align:left"> <input type="text" id="sh_AddressLine1" placeholder="Customer shipping address line1" required /> </td> </tr> <tr> <td style="text-align:right">Ship Address Line2:</td> <td style="text-align:left"> <input type="text" id="sh_AddressLine2" placeholder="Customer shipping address line2" /> </td> </tr> <tr> <td style="text-align:right">Ship City:</td> <td style="text-align:left"> <input type="text" id="sh_City" placeholder="Customer shipping city" required /> </td> </tr> <tr> <td style="text-align:right">Ship ZipCode:</td> <td style="text-align:left"> <input type="text" id="sh_ZipCode" placeholder="Customer shipping zipcode" required /> </td> </tr> <tr> <td style="text-align:right">Ship LandPhone:</td> <td style="text-align:left"> <input type="text" id="sh_Phone" placeholder="Customer shipping land phone no" required /> </td> </tr> <tr> <td style="text-align:right">Customer Type:</td> <td style="text-align:left"> <input type="text" id="customerType"/> </td> </tr> <tr> <td style="text-align:right">Last Visited On:</td> <td style="text-align:left"> <input type="text" id="lastBusinessDate" /> </td> </tr> <tr> <td style="text-align:right">Latitude:</td> <td style="text-align:left"> <input type="text" id="latitude" class="text-input" /> </td> </tr> <tr> <td style="text-align:right">Longitude:</td> <td style="text-align:left"> <input type="text" id="longitude" class="text-input" /> </td> </tr> <tr> <td style="text-align:right">Credit Limit:</td> <td style="text-align:left"> <input type="text" id="creditLimit" class="text-input" placeholder="Credit limit" autofocus required /> </td> </tr> <tr> <td style="text-align:right">Over draft:</td> <td style="text-align:left"> <input type="text" id="overDraft" class="text-input" placeholder="Over draft" autofocus required /> </td> </tr> <tr> <td style="text-align:right">Receievebles:</td> <td style="text-align:left"> <input type="text" id="receievebles" class="text-input" placeholder="Receievebles" autofocus required /> </td> </tr> <tr> <td style="text-align:right"></td> <td style="padding-top: 10px;text-align:left"> <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> </div> </div> </body> </html>Hi Keshavan,
You use wrong syntax about your radio buttons:
<input type="radio" id='jqxRadioButton'/> <input type="radio" id='jqxRadioButton1' /> <input type="radio" id='jqxRadioButton2' />The right way is:
<div id='jqxRadioButton'></div> <div id='jqxRadioButton1'></div> <div id='jqxRadioButton2'></div>You can see an example here.
Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comHi Ivailo Ivanov,
When I use DIV tags, the radio buttons don’t appear. I replaced the code u sent accordingly.
I have pasted the full code with changes as mentioned, Please help. jqwidgets Ver 3.7
Thanks,
Keshavan<!DOCTYPE html> <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/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyACml1UshMGEbt1hZLg7rJ08X4qsbhqsMM&sensor=false"></script> <script type="text/javascript" src="/Scripts/google-map.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttongroup.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxinput.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="/JqWidgets/jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.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/globalization/globalize.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcalendar.js"></script> <style> input[type=text]:focus { border-color: #0000ff; border-width: 3px; background-color: aliceblue; } </style> <script type="text/javascript"> $(document).ready(function () { var theme = 'ui-sunny'; // prepare the data var data = {}; var n1 = 0; var valu; var valuR; var isChecked1; var isChecked2; var isChecked3; var dataSource = ["Male", "Female"]; var dataSourceCT = ["hospital", "clinic", "specialist", "wholesale", "retail", "nursing Home", "pharmacy", "doctor", "dentist"]; // var dataSourceTeritory = ["Excellent", "Good", "Average"]; $("#addrowbutton").jqxButton({ width: '4%', height: '30', theme: 'ui-sunny' }); $("#deleterowbutton").jqxButton({ width: '4%', height: '30', theme: 'ui-sunny' }); $("#resizebutton").jqxButton({ width: '7%', height: '30', theme: 'ui-sunny' }); $("#addressbutton").jqxButton({ width: '10%', height: '30', theme: 'ui-sunny' }); $("#Cancel").jqxButton({ theme: 'ui-sunny' }); $("#Save").jqxButton({ theme: 'ui-sunny' }); var generaterow = function (id) { var row = {}; row["CustomerId"] = id; row["CustomerName"]; row["ContactName"]; row["IsPreferred"] = false; row["teritory"]; row["rating"] = 1; row["EmailId"]; row["Mobile"]; row["BL_AddressLine1"]; row["BL_AddressLine2"]; row["BL_City"] = "Chennai"; row["BL_ZipCode"]; row["BL_LandPhone"]; row["SH_AddressLine1"]; row["SH_AddressLine2"]; row["SH_City"]; row["SH_ZipCode"]; row["SH_Phone"]; row["CutomerType"]; row["LastBusinessDate"]; row["Latitude"]; row["Longitude"]; row["CreditLimit"]; row["OverDraft"]; row["Receievebles"]; return row; } var source = { datatype: "json", datafields: [ { name: 'CustomerId' }, { name: 'CustomerName', type: 'string' }, { name: 'ContactName', type: 'string' }, { name: 'IsPreferred', type: 'bool' }, { name: 'teritory', type: 'string' }, { name: 'rating', type: 'numberinput' }, { 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' }, { name: 'CutomerType', type: 'string' }, { name: 'LastBusinessDate', type: 'date', format: 'mm/dd/yyyy' }, { name: 'Latitude', type: 'string' }, { name: 'Longitude', type: 'string' }, { name: 'CreditLimit', type: 'number' }, { name: 'OverDraft', type: 'number' }, { name: 'Receievebles', type: 'number' } ], id: 'CustomerId', url: '/Customer/GetCustomer', 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!"); // commented on 16 jul 13 console.log(xhr.rowdata); commit(true); }, error: function (jqXHR, textStatus, errorThrown) { alert("Fails ... "); commit(false); } } ); } } }; // initialize jqxGrid var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; $("#jqxgrid").jqxGrid( { width: '99%', //960 height: 220, source: dataAdapter, theme: 'ui-sunny', pageable: true, sortable: true, filterable: true, groupable: true, columnsresize: true, columnsreorder: true, // autoheight: true, enabletooltips: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: 'Select', datafield: 'select', width: '7%', 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) + 255, y: parseInt(offset.top) + (-149) } }); // 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); $("#contactName").val(dataRecord.ContactName); $("#isPreferred").val(dataRecord.IsPreferred); // $("#teritory22").val(dataRecord.teritory); if (dataRecord.teritory == "A") { $("#jqxRadioButton").jqxRadioButton('checked'); $("#teritory1").val(true); } if (dataRecord.teritory == "B") { $("#jqxRadioButton2").jqxRadioButton('checked'); $("#teritory2").val(true); } if (dataRecord.teritory == "C") { $("#jqxRadioButton3").jqxRadioButton('checked'); $("#teritory3").val(true); } $("#rating").jqxNumberInput({ decimal: dataRecord.rating }); $("#emailId").val(dataRecord.EmailId); $("#mobile").val(dataRecord.Mobile); $("#bl_AddressLine1").val(dataRecord.BL_AddressLine1); $("#address").val(dataRecord.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); $("#customerType").val(dataRecord.CutomerType); $("#lastBusinessDate").val(dataRecord.LastBusinessDate); $("#latitude").val(dataRecord.Latitude); $("#longitude").val(dataRecord.Longitude); $("#creditLimit").val(dataRecord.CreditLimit); $("#overDraft").val(dataRecord.OverDraft); $("#receievebles").val(dataRecord.Receievebles); // show the popup window. $("#popupWindow").jqxWindow('open'); } }, { text: 'Customer', datafield: 'CustomerName', width: 250, pinned: true }, { text: 'Contact', datafield: 'ContactName', width: 250 }, { text: 'Preferred ?', datafield: 'IsPreferred', threestatecheckbox: true, columntype: 'checkbox', width: 70 }, { text: 'Teritory ', datafield: 'teritory', width: 50, cellsalign: 'left' }, { text: 'Rating / 5 ', datafield: 'rating', width: 65, cellsalign: 'left' }, { text: 'EmailId', datafield: 'EmailId', width: 150 }, { text: 'Mobile', datafield: 'Mobile', width: 80 }, { 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 }, { text: 'Customer Type', datafield: 'CutomerType', width: 50 }, { text: 'Last Order On', datafield: 'LastBusinessDate', width: 50, columntype: 'datetimeinput', cellsformat: 'mm/dd/yyyy' }, { text: 'Latitude', datafield: 'Latitude', width: 50 }, { text: 'Longitude', datafield: 'Longitude', width: 50 }, { text: 'Credit Limit', datafield: 'CreditLimit', width: 50 }, { text: 'Over Draft', datafield: 'OverDraft', width: 50 }, { text: 'Receievebles', datafield: 'Receievebles', width: 50 } ] }); // 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'); $("#jqxgrid").jqxGrid('addrow', (rowscount + 1), datarow, 'top'); }); $("#resizebutton").click(function () { $("#jqxgrid").jqxGrid('autoresizecolumns'); }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: '50%', resizable: false, theme: 'ui-sunny', isModal: false, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#jqxRadioButton").jqxRadioButton({ theme: 'ui-sunny', width: 30, height: 10, value: "A", hasThreeStates: true }); $("#jqxRadioButton2").jqxRadioButton({ theme: 'ui-sunny', width: 30, height: 10, value: "B", hasThreeStates: true }); $("#jqxRadioButton3").jqxRadioButton({ theme: 'ui-sunny', width: 30, height: 10, value: "C", hasThreeStates: true }); /* $("#jqxRadioButton").on('change', function (event) { var checked = event.args.checked; var isChecked = $("#jqxRadioButton").jqxRadioButton('checked'); }); $("#jqxRadioButton2").on('change', function (event) { var checked = event.args.checked; var isChecked = $("#jqxRadioButton2").jqxRadioButton('checked'); }); $("#jqxRadioButton3").on('change', function (event) { var checked = event.args.checked; var isChecked = $("#jqxRadioButton3").jqxRadioButton('checked'); });*/ // initialize the input fields. $("#popupWindow").on('open', function () { $('#popupWindow').jqxWindow('bringToFront'); $("#customerId").jqxInput('selectAll'); }); $("#customerId").jqxInput({ theme: 'ui-sunny' }); $("#customerName").jqxInput({ theme: 'ui-sunny' }); $("#contactName").jqxInput({ theme: 'ui-sunny' }); // $("#teritory22").jqxRadioButton({ theme: 'ui-sunny' }); $("#teritory1").jqxRadioButton({ theme: 'ui-sunny' }); $("#teritory2").jqxRadioButton({ theme: 'ui-sunny' }); $("#teritory3").jqxRadioButton({ theme: 'ui-sunny' }); $("#isPreferred").jqxCheckBox({ width: 120, height: 20, checked: false, theme: 'ui-sunny' }); $("#rating").jqxNumberInput({ theme: 'ui-sunny' }); $("#emailId").jqxInput({ theme: 'ui-sunny' }); $("#mobile").jqxInput({ theme: 'ui-sunny' }); $("#bl_AddressLine1").jqxInput({ theme: 'ui-sunny' }); $("#bl_AddressLine2").jqxInput({ theme: 'ui-sunny' }); $("#bl_City").jqxInput({ theme: 'ui-sunny' }); $("#bl_ZipCode").jqxInput({ theme: 'ui-sunny' }); $("#bl_LandPhone").jqxInput({ theme: 'ui-sunny' }); $("#sh_AddressLine1").jqxInput({ theme: 'ui-sunny' }); $("#sh_AddressLine2").jqxInput({ theme: 'ui-sunny' }); $("#sh_City").jqxInput({ theme: 'ui-sunny' }); $("#sh_ZipCode").jqxInput({ theme: 'ui-sunny' }); $("#sh_Phone").jqxInput({ theme: 'ui-sunny' }); $("#lastBusinessDate").jqxDateTimeInput({ width: 120, height: 20, formatString: 'MM/dd/yyyy', theme: 'ui-sunny' }); $("#customerType").jqxDropDownList({ source: dataSourceCT, width: 120, height: 20, theme: 'ui-sunny' }); $("#latitude").jqxInput({ theme: 'ui-sunny' }); $("#longitude").jqxInput({ theme: 'ui-sunny' }); $("#creditLimit").jqxInput({ theme: 'ui-sunny' }); $("#overDraft").jqxInput({ theme: 'ui-sunny' }); $("#receievebles").jqxInput({ theme: 'ui-sunny' }); $("#address").jqxInput({ theme: 'ui-sunny' }); $("#customerId").width(30); $("#customerId").height(20); $("#customerName").width(250); $("#customerName").height(20); $("#contactName").width(250); $("#contactName").height(20); // $("#teritory22").width(150); // $("#teritory22").height(50); $("#isPreferred").width(100); $("#isPreferred").height(20); $("#rating").jqxNumberInput({ width: 50, height: 29, min: 1, max: 5, value: 1, inputMode: 'simple', theme: 'ui-sunny', decimalDigits: 0, spinButtons: true }); $("#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); $("#lastBusinessDate").width(100); $("#lastBusinessDate").height(20); $("#latitude").width(250); $("#latitude").height(20); $("#longitude").width(250); $("#longitude").height(20); $("#address").width(250); $("#address").height(20); $("#creditLimit").width(250); $("#creditLimit").height(20); $("#overDraft").width(250); $("#overDraft").height(20); $("#receievebles").width(250); $("#receievebles").height(20); $("#jqxVerticalScrollBar").jqxScrollBar({ width: 10, height: 600, min: 0, max: 600, vertical: true, theme: 'ui-sunny' }); $("#addressbutton").click(function () { result = $('#addressForm').jqxValidator('validate'); if (result == true) { adrs = $("#address").val(); $("#addressLine1").val(adrs); var geocoder, marker, infowindow; // call the function here if you want to move the map code to a seperate fuction if (!geocoder) { geocoder = new google.maps.Geocoder(); } var geocoderRequest = { address: adrs } geocoder.geocode(geocoderRequest, function (results, status) { // Check if status is OK before proceeding if (status == google.maps.GeocoderStatus.OK) { // Center the map on the returned location map.setCenter(results[0].geometry.location); // Check to see if we've already got a Marker object if (!marker) { // Creating a new marker and adding it to the map marker = new google.maps.Marker ({ map: map, title: 'Click me', icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/green/marker1.png' }); } } // Setting the position of the marker to the returned location marker.setPosition(results[0].geometry.location); $("#latitude").val(results[0].geometry.location.lat()); $("#longitude").val(results[0].geometry.location.lng()); if (!infoWindow) { infoWindow = new google.maps.InfoWindow(); } google.maps.event.addListener(marker, 'click', function () { var content = '<div id="info">' + "Latitude :" + results[0].geometry.location.lat() + '<br/>' + "Longitude:" + results[0].geometry.location.lng() + '</div>'; map.setZoom(17); map.setCenter(marker.getPosition()); infoWindow.setContent(content); infoWindow.open(map, marker); var myCircle = new google.maps.Circle({ center: marker.getPosition(), map: map, radius: 5000, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 }); }); }); } }); $('#addressForm').jqxValidator ({ rules: [ { input: '#address', message: 'Location name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#address', message: 'Location name must be between 3 and 50 characters!', action: 'keyup, focus', rule: 'length=3,50' } ] }); $('#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: '#contactName', message: 'Contact Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#contactName', message: 'Contact Name must be between 20 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { 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: function (input, commit) { // call commit with false, when you are doing server validation and you want to display a validation error on this field. if ('length=15,50') { $("#address").val($("#bl_AddressLine1").val()); $("#sh_AddressLine1").val($("#bl_AddressLine1").val()); return true; } return false; } }, { input: '#bl_City', message: 'City is required!', action: 'keyup, blur', rule: 'required' }, { input: '#bl_City', message: 'City must be between 5 and 50 characters!', action: 'keyup, focus', rule: function (input, commit) { // call commit with false, when you are doing server validation and you want to display a validation error on this field. if ('length=5,50') { $("#sh_City").val($("#bl_City").val()); return true; } return false; } }, { input: '#bl_ZipCode', message: 'ZipCode is required!', action: 'keyup, blur', rule: 'required' }, { input: '#bl_ZipCode', message: 'Zip Code must be between 6 and 10 characters!', action: 'keyup, focus', rule: function (input, commit) { // call commit with false, when you are doing server validation and you want to display a validation error on this field. if ('length=6,10') { $("#sh_ZipCode").val($("#bl_ZipCode").val()); return true; } return false; } }, { 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: function (input, commit) { // call commit with false, when you are doing server validation and you want to display a validation error on this field. if ('length=8,15') { $("#sh_Phone").val($("#bl_LandPhone").val()); return true; } return false; } }, { input: '#sh_AddressLine1', message: 'Shipping Address is required!', action: 'keyup, blur', rule: 'required' }, { 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 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' }, { input: '#latitude', message: 'Latitude is required!', action: 'keyup, blur', rule: 'required' }, { input: '#latitude', message: 'Latitude is must be between 6 and 10 characters!', action: 'keyup, focus', rule: 'length=6,20' }, { input: '#longitude', message: 'Longitude is required!', action: 'keyup, blur', rule: 'required' }, { input: '#longitude', message: 'Longitude must be between6 and 10 characters!', action: 'keyup, focus', rule: 'length=6,20' }, { input: '#creditLimit', message: 'Credit Limit is required!', action: 'keyup, blur', rule: 'required' }, { input: '#overDraft', message: 'Over Draft Limit is required!', action: 'keyup, blur', rule: 'required' }, { input: '#receievebles', message: 'Receieveble amount is required!', action: 'keyup, blur', rule: 'required' } ] }); // update row. $('#Save').bind('click', function () { $('#testForm').jqxValidator('validate'); }); $("#Cancel").click(function () { $('#testForm').jqxValidator('hide'); }); var result = false; // update the edited row when the user clicks the 'Save' button. $("#Save").click(function () { if ($("#teritory1").val()) { valu = 'A'; } if ($("#teritory2").val()) { valu = 'B'; } if ($("#teritory3").val()) { valu = 'C'; } if (editrow >= 0) { result = $('#testForm').jqxValidator('validate'); if (result == true) { row = { CustomerId: $("#customerId").val(), CustomerName: $("#customerName").val(), ContactName: $("#contactName").val(), IsPreferred: $("#isPreferred").val(), rating: parseInt($("#rating").jqxNumberInput('decimal')), 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(), CutomerType: $("#customerType").val(), LastBusinessDate: $("#lastBusinessDate").val(), Latitude: $("#latitude").val(), Longitude: $("#longitude").val(), CreditLimit: $("#creditLimit").val(), OverDraft: $("#overDraft").val(), Receievebles: $("#receievebles").val() }; var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); $('#jqxgrid').jqxGrid('updaterow', rowID, row); $("#popupWindow").jqxWindow('hide'); } } }); var map, geocoder, marker, infoWindow, latlng; // latlng = new google.maps.LatLng(13.06916, 80.19138); try { latlng = new google.maps.LatLng(13.06916, 80.19138); } catch (e) { alert("Can't render map : " + e.message) } $("#jqxWidget1").jqxPanel({ width: '99%', height: 200, theme: 'ui-sunny' }); $('#jqxWidget1').jqxPanel({ autoUpdate: true }); var options = { zoom: 3, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN }, streetViewControl: true }; map = new google.maps.Map(document.getElementById('map'), options); $('#map').width('99%').height(400); var menuNo = 8; var lenth = 14; for (var j = 1; j <= lenth; j++) { if (j == menuNo) { $(("#") + (j)).css("background-color", "maroon"); } else $(("#") + (j)).css("background-color", "null"); } }); </script> </head> <body class='default'> <div> <input id="addrowbutton" type="button" style="margin-top: 1px;" value="(+)" /> <input id="deleterowbutton" type="button" style="margin-top: 1px;" value="(-)" /> <input id="resizebutton" type="button" style="margin-top: 1px;" value="Resize" /> </div> <div id='jqxWidget'> <div id="jqxgrid"></div> <form id="addressForm"> <div> <table> <tr> <td> Location Name:</td> <td style="text-align:left"> <input type="text" id="address" class="text-input" /> </td> <td> <input id="addressbutton" type="button" style="margin-top: 1px;" value="Show location" /> </td> </tr> </table> </div> </form> <div id='jqxWidget1' style='width: 470px; height: auto; margin-top:1px'> <div id="map"></div> </div> <div style="margin-top: 10px;"> <div id="cellbegineditevent"></div> <div style="margin-top: 10px;" id="cellendeditevent"></div> </div> <div id="popupWindow"> <!--div style="overflow: hidden;"--> <div> <form id="testForm" action="./"> <table> <tr> <td style="text-align:right">Id:</td> <td style="text-align:left"> <input type="text" id="customerId" /> </td> </tr> <tr> <td style="text-align:right">Customer:</td> <td style="text-align:left"> <input type="text" id="customerName" class="text-input" placeholder="Customer name" autofocus required /> </td> </tr> <tr> <td style="text-align:right">Contact:</td> <td style="text-align:left"> <input type="text" id="contactName" class="text-input" placeholder="Contact name" autofocus required /> </td> </tr> <tr> <td style="text-align:right">Preferred?:</td> <td style="text-align:left"> <input type="checkbox" id="isPreferred"/> </td> </tr> <tr> <td style="text-align:right">Teritory:</td> <td> <div id='jqxRadioButton'></div> <div id='jqxRadioButton1'></div> <div id='jqxRadioButton2'></div> </td> </tr> <tr> <td style="text-align:right">Rating / 5 :</td> <td style="text-align:left"> <input type="number" id="rating"/> </td> <tr> <tr> <td style="text-align:right">EmailId:</td> <td style="text-align:left"> <input type="email" id="emailId" placeholder="Customer email Id" required /> </td> </tr> <tr> <td style="text-align:right">Mobile:</td> <td style="text-align:left"> <input type="text" id="mobile" placeholder="Customer mobile no" required /> </td> </tr> <tr> <td style="text-align:right">Bill Address Line1:</td> <td style="text-align:left"> <input type="text" id="bl_AddressLine1" placeholder="Customer billing address line1" required /> </td> </tr> <tr> <td style="text-align:right">Bill Address Line2:</td> <td style="text-align:left"> <input type="text" id="bl_AddressLine2" placeholder="Customer billing address line2" /> </td> </tr> <tr> <td style="text-align:right">Bill City:</td> <td style="text-align:left"> <input type="text" id="bl_City" placeholder="Customer billing city" required /> </td> </tr> <tr> <td style="text-align:right">Bill ZipCode:</td> <td style="text-align:left"> <input type="text" id="bl_ZipCode" placeholder="Customer billing zipcode" required /> </td> </tr> <tr> <td style="text-align:right">Bill LandPhone:</td> <td style="text-align:left"> <input type="text" id="bl_LandPhone" placeholder="Customer billing Land phone no" required /> </td> </tr> <tr> <td style="text-align:right">Ship Address Line1:</td> <td style="text-align:left"> <input type="text" id="sh_AddressLine1" placeholder="Customer shipping address line1" required /> </td> </tr> <tr> <td style="text-align:right">Ship Address Line2:</td> <td style="text-align:left"> <input type="text" id="sh_AddressLine2" placeholder="Customer shipping address line2" /> </td> </tr> <tr> <td style="text-align:right">Ship City:</td> <td style="text-align:left"> <input type="text" id="sh_City" placeholder="Customer shipping city" required /> </td> </tr> <tr> <td style="text-align:right">Ship ZipCode:</td> <td style="text-align:left"> <input type="text" id="sh_ZipCode" placeholder="Customer shipping zipcode" required /> </td> </tr> <tr> <td style="text-align:right">Ship LandPhone:</td> <td style="text-align:left"> <input type="text" id="sh_Phone" placeholder="Customer shipping land phone no" required /> </td> </tr> <tr> <td style="text-align:right">Customer Type:</td> <td style="text-align:left"> <input type="text" id="customerType"/> </td> </tr> <tr> <td style="text-align:right">Last Visited On:</td> <td style="text-align:left"> <input type="text" id="lastBusinessDate" /> </td> </tr> <tr> <td style="text-align:right">Latitude:</td> <td style="text-align:left"> <input type="text" id="latitude" class="text-input" /> </td> </tr> <tr> <td style="text-align:right">Longitude:</td> <td style="text-align:left"> <input type="text" id="longitude" class="text-input" /> </td> </tr> <tr> <td style="text-align:right">Credit Limit:</td> <td style="text-align:left"> <input type="text" id="creditLimit" class="text-input" placeholder="Credit limit" autofocus required /> </td> </tr> <tr> <td style="text-align:right">Over draft:</td> <td style="text-align:left"> <input type="text" id="overDraft" class="text-input" placeholder="Over draft" autofocus required /> </td> </tr> <tr> <td style="text-align:right">Receievebles:</td> <td style="text-align:left"> <input type="text" id="receievebles" class="text-input" placeholder="Receievebles" autofocus required /> </td> </tr> <tr> <td style="text-align:right"></td> <td style="padding-top: 10px;text-align:left"> <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> </div> </div> </body> </html>Hi Ivailo Ivanov,
Thanks, It works now after your help. Issue is Closed.
There was some mistake in my code while defining radio button.
Thanks,
KeshavanHi Keshavan,
In the initialization of the radio buttons you have an unauthorized property named “value”. Remove it and the widget must work correct.
$("#jqxRadioButton").jqxRadioButton({ theme: 'ui-sunny', width: 30, height: 10, value: "A", hasThreeStates: true }); $("#jqxRadioButton2").jqxRadioButton({ theme: 'ui-sunny', width: 30, height: 10, value: "B", hasThreeStates: true }); $("#jqxRadioButton3").jqxRadioButton({ theme: 'ui-sunny', width: 30, height: 10, value: "C", hasThreeStates: true });Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
Viewing 5 posts - 1 through 5 (of 5 total)
You must be logged in to reply to this topic.