jQWidgets Forums
Forum Replies Created
-
Author
-
June 28, 2015 at 1:52 am in reply to: Design flaw ? not possible to implement Nested Grid with Drag-drop Design flaw ? not possible to implement Nested Grid with Drag-drop #73108
Hi,
Jqwidgets version 3.8
Thanks,
KeshavanJune 16, 2015 at 5:17 am in reply to: issue with dataAdapter and ajax call issue with dataAdapter and ajax call #72518Hi,
here is formatted code.
$(“#addressbutton”).click(function () { ctype = “hospital”; recordss = []; if (ctype != null || ctype != undefined || ctype != ” “) { $.ajax({ id: ‘CustomerId’, async: false, dataType: ‘json’, url: ‘/Customer/GetCustomers?var=’ + ctype, type: ‘post’, data: {}, success: function (data, status, xhr) { alert(data.length); }, error: function (req, status, error) { alert(“R: ” + req + ” S: ” + status + ” E: ” + error); }, complete: function (data) { recordss[0] = data[0]; } }) var source = recordss; var dataAdapterCustomer = new $.jqx.dataAdapter(source, { loadComplete: function () { length = dataAdapterCustomer.records.length; alert(dataAdapterCustomer.records[0]); }, formatData: function (data){ $.extend(data, { recordss : data[0] }); return data; }, loadError: function (xhr, status, error) { alert(error); } }); })May 5, 2015 at 7:40 am in reply to: Radio button select issue in popup edit in grid Radio button select issue in popup edit in grid #70639Hi Ivailo Ivanov,
Thanks, It works now after your help. Issue is Closed.
There was some mistake in my code while defining radio button.
Thanks,
KeshavanMay 5, 2015 at 6:56 am in reply to: Radio button select issue in popup edit in grid Radio button select issue in popup edit in grid #70631Hi 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,
Please Ignore post, issue is sorted and there was a typo err in code.
Thanks,
KeshavanMay 1, 2015 at 7:50 am in reply to: 1 Grid Under Tab Not Displayed 1 Grid Under Tab Not Displayed #70520Hello Peter Stoev,
In that case where will I define my HTML code for the Popup window for the Grid ?.
Thanks,
Keshavan
May 1, 2015 at 6:20 am in reply to: 1 Grid Under Tab Not Displayed 1 Grid Under Tab Not Displayed #70513Hi,
Jqwidgets ver 3.7
Thanks,
Keshavan
May 1, 2015 at 6:10 am in reply to: 1 Grid Under Tab Not Displayed 1 Grid Under Tab Not Displayed #70512Hi,
Here is formatted code.
Thanks,
Keshavan<!DOCTYPE html> @functions{ public string TokenHeaderValue() { string cookieToken, formToken; AntiForgery.GetTokens(null, out cookieToken, out formToken); return cookieToken + ":" + formToken; } } <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="stylesrIdheet" 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/jqxvalidator.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxtabs.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/jqxdata.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.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/jqxgrid.edit.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script> <style> input[type=text]:focus { border-color: #0000ff; border-width: 3px; background-color: aliceblue; } </style> <script type="text/javascript"> $(document).ready(function () { // init widgets. var initGrid1 = function () { var editrow = -1; $("#addrowbutton").jqxButton({ width: '4.5%', height: 30, theme: 'ui-sunny' }); $("#deleterowbutton").jqxButton({ width: '4.5%', height: 30, theme: 'ui-sunny' }); $("#Cancel").jqxButton({ theme: 'ui-sunny', height: 25, width: '20%' }); $("#Save").jqxButton({ theme: 'ui-sunny', height: 25, width: '20%' }); $('#Save').bind('click', function () { $('#testForm').jqxValidator('validate'); }); $("#Save").click(function () { var result = false; result = $('#testForm').jqxValidator('validate'); if (result == true) { var row; if (editrow >= 0) { row = { SupplierId: $("#supplierId").val(), SupplierCode: $("#supplierCode").val(), SupplierName: $("#supplierName").val(), ContactName: $("#contactName").val(), AltContactName: $("#altContactName").val(), AddressLine1: $("#addressLine1").val(), AddressLine2: $("#addressLine2").val(), City: $("#city").val(), State: $("#state").val(), Country: $("#country").val(), ZipCode: $("#zipCode").val(), Mobile: $("#mobile").val(), LandPhone: $("#landPhone").val(), Fax: $("#fax").val(), EmailId: $("#emailId").val() }; } var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); $('#jqxgrid').jqxGrid('updaterow', rowID, row); $("#popupWindow").jqxWindow('hide'); } }) $("#popupWindow").jqxWindow({ width: '40%', resizable: false, theme: 'ui-sunny', isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01, height: '50%', title: 'Supplier edit' }) $("#supplierId").jqxInput({ theme: 'ui-sunny' }); $("#supplierId").width('50%'); $("#supplierId").height('3%'); $("#supplierCode").jqxInput({ theme: 'ui-sunny' }); $("#supplierName").jqxInput({ theme: 'ui-sunny' }); $("#contactName").jqxInput({ theme: 'ui-sunny' }); $("#altContactName").jqxInput({ theme: 'ui-sunny' }); $("#addressLine1").jqxInput({ theme: 'ui-sunny' }); $("#addressLine2").jqxInput({ theme: 'ui-sunny' }); $("#city").jqxInput({ theme: 'ui-sunny' }); $("#state").jqxInput({ theme: 'ui-sunny' }); $("#country").jqxInput({ theme: 'ui-sunny' }); $("#zipCode").jqxInput({ theme: 'ui-sunny' }); $("#mobile").jqxInput({ theme: 'ui-sunny' }); $("#landPhone").jqxInput({ theme: 'ui-sunny' }); $("#fax").jqxInput({ theme: 'ui-sunny' }); $("#emailId").jqxInput({ theme: 'ui-sunny' }); $("#supplierCode").width('100px'); $("#supplierCode").height('3%'); $("#supplierName").width('300px'); $("#supplierName").height('3%'); $("#contactName").width('90%'); $("#contactName").height('3%'); $("#altContactName").width('90%'); $("#altContactName").height('3%'); $("#addressLine1").width('90%'); $("#addressLine1").height('3%'); $("#addressLine2").width('90%'); $("#addressLine2").height('3%'); $("#city").width('90%'); $("#city").height('3%'); $("#state").width('90%'); $("#state").height('3%'); $("#country").width('90%'); $("#country").height('3%'); $("#zipCode").width('90%'); $("#zipCode").height('3%'); $("#mobile").width('90%'); $("#mobile").height('3%'); $("#landPhone").width('90%'); $("#landPhone").height('3%'); $("#fax").width('90%'); $("#fax").height('3%'); $("#emailId").width('90%'); $("#emailId").height('3%'); $("#popupWindow").on('open', function () { $("#supplierId").jqxInput('selectAll'); }) var generaterow = function (id) { var row = {}; row["SupplierId"] = id; row["SupplierCode"] = "foo"; row["SupplierName"] = "foo"; row["ContactName"] = "foo"; row["AltContactName"] = "foo"; row["AddressLine1"] = "foo"; row["AddressLine2"] = "foo"; row["City"] = "foo"; row["State"] = "foo"; row["Country"] = "foo"; row["ZipCode"] = "foo"; row["Mobile"] = "foo"; row["LandPhone"] = "foo"; row["Fax"] = "foo"; row["EmailId"] = "foo"; return row; } var source = { datatype: "json", datafields: [ { name: 'SupplierId' }, { name: 'SupplierCode', type: 'string' }, { name: 'SupplierName', type: 'string' }, { name: 'ContactName', type: 'string' }, { name: 'AltContactName', type: 'string' }, { name: 'AddressLine1', type: 'string' }, { name: 'AddressLine2', type: 'string' }, { name: 'City', type: 'string' }, { name: 'State', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'ZipCode', type: 'string' }, { name: 'Mobile', type: 'string' }, { name: 'LandPhone', type: 'string' }, { name: 'Fax', type: 'string' }, { name: 'EmailId', type: 'string' } ], id: 'SupplierId', url: '/Supplier/GetSuppliers', async: false, addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command $.ajax ({ cache: false, dataType: 'json', url: '/Supplier/Add', data: rowdata, type: "POST", async: true, headers: { 'RequestVerificationToken': '@TokenHeaderValue()' }, success: function (data, status, xhr) { commit(true); }, 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: '/Supplier/Update', data: rowdata, type: "POST", headers: { 'RequestVerificationToken': '@TokenHeaderValue()' }, success: function (data, status, xhr) { alert("entry saved!"); console.log(xhr.rowdata); commit(true); }, error: function (jqXHR, textStatus, errorThrown) { alert("Fails ... "); commit(false); } } ); } } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize the input fields. // initialize jqxGrid $("#jqxgrid").jqxGrid( { theme: 'ui-sunny', width: 940, height: 315, source: dataAdapter, selectionmode: 'singlerow', pageable: true, sortable: true, filterable: true, columnsresize: true, columnsreorder: true, enabletooltips: true, groupable: true, columns: [ { text: 'Select', width: '7%', datafield: 'select', pinned: true, 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) + 110, y: parseInt(offset.top) + (-120) } }); // get the clicked row's data and initialize the input fields. var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); $("#supplierId").val(dataRecord.SupplierId); $("#supplierCode").val(dataRecord.SupplierCode); $("#supplierName").val(dataRecord.SupplierName); $("#contactName").val(dataRecord.ContactName) $("#altContactName").val(dataRecord.AltContactName); $("#addressLine1").val(dataRecord.AddressLine1) $("#addressLine2").val(dataRecord.AddressLine2); $("#city").val(dataRecord.City) $("#state").val(dataRecord.State); $("#country").val(dataRecord.Country) $("#zipCode").val(dataRecord.ZipCode); $("#mobile").val(dataRecord.Mobile) $("#landPhone").val(dataRecord.LandPhone) $("#fax").val(dataRecord.Fax); $("#emailId").val(dataRecord.EmailId) // show the popup window. $("#popupWindow").jqxWindow('open'); } }, { text: 'Id', datafield: 'SupplierId', width: '5%' }, { text: 'Code', datafield: 'SupplierCode', width: '10%' }, { text: 'Name', datafield: 'SupplierName', width: '10%' }, { text: 'Contact', datafield: 'ContactName', width: '10%' }, { text: 'Alt Contact', datafield: 'AltContactName', width: '10%' }, { text: 'Address', datafield: 'AddressLine1', width: '10%' }, { text: ' ', datafield: 'AddressLine2', width: '10%' }, { text: 'City', datafield: 'City', width: '5%' }, { text: 'State', datafield: 'State', width: '10%' }, { text: 'Country', datafield: 'Country', width: '10%' }, { text: 'ZipCode', datafield: 'ZipCode', width: '10%' }, { text: 'Mobile', datafield: 'Mobile', width: '10%' }, { text: 'Land Phone', datafield: 'LandPhone', width: '10%' }, { text: 'Fax', datafield: 'Fax', width: '10%' }, { text: 'EmailId', datafield: 'EmailId', width: '10%' }] }); var data = {}; var n1 = 0; var id = 0; $("#addrowbutton").bind('click', function () { var datainformation = $("#jqxgrid").jqxGrid('getdatainformation'); var rowscount = datainformation.rowscount; editrow = rowscount + 1; id = rowscount + 1; var datarow = generaterow(rowscount + 1); $("#jqxgrid").jqxGrid('addrow', (rowscount + 1), datarow, '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); } }); $('#testForm').jqxValidator({ rules: [ { input: '#supplierCode', message: 'Supplier Code is required!', action: 'keyup, blur', rule: 'required' }, { input: '#supplierCode', message: 'Supplier Code must be between 3 and 10 characters!', action: 'keyup, focus', rule: 'length=3,10' }, { input: '#supplierName', message: 'Supplier Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#supplierName', message: 'Supplier Name must be between 5 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 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#altContactName', message: 'Alternate Contact Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#altContactName', message: 'Altername Contact Name must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#addressLine1', message: 'Address Line1 is required!', action: 'keyup, blur', rule: 'required' }, { input: '#addressLine1', message: 'Address Line1 must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#city', message: 'City Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#city', message: 'City Name must be between 1 and 50 characters!', action: 'keyup, focus', rule: 'length=1,50' }, { input: '#state', message: 'State Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#state', message: 'State Name must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#country', message: 'Country Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#country', message: 'Country Name must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#zipCode', message: 'ZipCode is required!', action: 'keyup, blur', rule: 'required' }, { input: '#zipCode', message: 'ZipCode must be between 5 and 10 characters!', action: 'keyup, focus', rule: 'length=5,10' }, { input: '#mobile', message: 'Mobile No is required!', action: 'keyup, blur', rule: 'required' }, { input: '#mobile', message: 'Mobile No must be between 10 and 10 characters!', action: 'keyup, focus', rule: 'length=10,10' }, { input: '#landPhone', message: 'Land Phone No is required!', action: 'keyup, blur', rule: 'required' }, { input: '#landPhone', message: 'land Phone No must be between 10 and 10 characters!', action: 'keyup, focus', rule: 'length=10,10' }, { input: '#fax', message: 'Fax No is required!', action: 'keyup, blur', rule: 'required' }, { input: '#fax', message: 'Fax No must be between 10 and 10 characters!', action: 'keyup, focus', rule: 'length=10,10' }, { input: '#emailId', message: 'Email Id is required!', action: 'keyup, blur', rule: 'required' } ] }); } var initGrid2 = function () { var editrow = -1; var id = 0; $("#addrowbutton2").jqxButton({ width: '4.5%', height: 30, theme: 'ui-sunny' }); $("#deleterowbutton2").jqxButton({ width: '4.5%', height: 30, theme: 'ui-sunny' }); $("#Save").jqxButton({ theme: 'ui-sunny', height: 30, width: '30%' }); $("#Cancel").jqxButton({ theme: 'ui-sunny', height: 30, width: '30%' }); // initialize the input fields. $("#supplierBusinessId").jqxInput({ theme: 'ui-sunny' }); $("#supplierId").jqxInput({ theme: 'ui-sunny' }); $("#bankAcNo").jqxInput({ theme: 'ui-sunny' }); $("#bankAcName").jqxInput({ theme: 'ui-sunny' }); $("#bankName").jqxInput({ theme: 'ui-sunny' }); $("#iSFCcode").jqxInput({ theme: 'ui-sunny' }); $("#bankLocation").jqxInput({ theme: 'ui-sunny' }); $("#minOrderVal").jqxInput({ theme: 'ui-sunny' }); $("#orderDIscount").jqxInput({ theme: 'ui-sunny' }); $("#IsShipPaid").jqxInput({ theme: 'ui-sunny' }); $("#IsInsPaid").jqxInput({ theme: 'ui-sunny' }); $("#IsPayInAdvance").jqxInput({ theme: 'ui-sunny' }); $("#paymentTerms").jqxInput({ theme: 'ui-sunny' }); $("#gLAcCode").jqxInput({ theme: 'ui-sunny' }); $("#panNo").jqxInput({ theme: 'ui-sunny' }); $("#tanNo").jqxInput({ theme: 'ui-sunny' }); $("#regNo").jqxInput({ theme: 'ui-sunny' }); $("#vATRegNo").jqxInput({ theme: 'ui-sunny' }); $("#IsActive").jqxInput({ theme: 'ui-sunny' }); $("#supplierUrl").jqxInput({ theme: 'ui-sunny' }); $("#supplierBusinessId").width('50%'); $("#supplierBusinessId").height('3%'); $("#supplierId").width('100px'); $("#supplierId").height('3%'); $("#bankAcNo").width('300px'); $("#bankAcNo").height('3%'); $("#bankAcName").width('90%'); $("#bankAcName").height('3%'); $("#bankName").width('90%'); $("#bankName").height('3%'); $("#iSFCcode").width('90%'); $("#iSFCcode").height('3%'); $("#bankLocation").width('90%'); $("#bankLocation").height('3%'); $("#minOrderVal").width('90%'); $("#minOrderVal").height('3%'); $("#orderDIscount").width('90%'); $("#orderDIscount").height('3%'); $("#IsShipPaid").width('90%'); $("#IsShipPaid").height('3%'); $("#IsInsPaid").width('90%'); $("#IsInsPaid").height('3%'); $("#IsPayInAdvance").width('90%'); $("#IsPayInAdvance").height('3%'); $("#paymentTerms").width('90%'); $("#paymentTerms").height('3%'); $("#gLAcCode").width('90%'); $("#gLAcCode").height('3%'); $("#panNo").width('90%'); $("#panNo").height('3%'); $("#tanNo").width('90%'); $("#tanNo").height('3%'); $("#regNo").width('90%'); $("#regNo").height('3%'); $("#vATRegNo").width('90%'); $("#vATRegNo").height('3%'); $("#IsActive").width('90%'); $("#IsActive").height('3%'); $("#supplierUrl").width('90%'); $("#supplierUrl").height('3%'); var generaterow = function (id) { var row = {}; row["SupplierBusinessId"] = id; row["SupplierId"] = 0; row["BankAcNo"] = "foo"; row["BankAcName"] = "foo"; row["BankName"] = "foo"; row["ISFCcode"] = "foo"; row["BankLocation"] = "foo"; row["MinOrderVal"] = 100; row["OrderDIscount"] = 1; row["isShipPaid"] = false; row["isInsPaid"] = false; row["isPayInAdvance"] = false; row["PaymentTerms'"] = "foo"; row["GLAcCode"] = "foo"; row["PanNo"] = "foo"; row["TanNo"] = "foo"; row["RegNo"] = "foo"; row["VATRegNo"] = "foo"; row["isActive"] = ""; row["SupplierUrl"] = ""; return row; } var source2 = { datatype: "json", datafields: [ { name: 'SupplierBusinessId' }, { name: 'SupplierId' }, { name: 'BankAcNo' }, { name: 'BankAcName' }, { name: 'BankName' }, { name: 'ISFCcode' }, { name: 'BankLocation' }, { name: 'MinOrderVal' }, { name: 'OrderDIscount' }, { name: 'isShipPaid' }, { name: 'isInsPaid' }, { name: 'isPayInAdvance' }, { name: 'PaymentTerms' }, { name: 'GLAcCode' }, { name: 'PanNo' }, { name: 'TanNo' }, { name: 'RegNo' }, { name: 'VATRegNo' }, { name: 'isActive' }, { name: 'SupplierUrl' } ], url: '/SupplierBusiness/GetSupplierBusinesss', async: false, addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command $.ajax ({ cache: false, dataType: 'json', url: '/Supplier/Add', data: rowdata, type: "POST", async: true, headers: { 'RequestVerificationToken': '@TokenHeaderValue()' }, success: function (data, status, xhr) { commit(true); }, 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: '/Supplier/Edit', data: rowdata, type: "POST", headers: { 'RequestVerificationToken': '@TokenHeaderValue()' }, success: function (data, status, xhr) { alert("entry saved!"); console.log(xhr.rowdata); commit(true); }, error: function (jqXHR, textStatus, errorThrown) { alert("Fails ... "); commit(false); } } ); } } }; /* var dataAdapter2 = new $.jqx.dataAdapter(source2, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source2.url + '" : ' + error); } });*/ var dataAdapter2 = new $.jqx.dataAdapter(source2); $("#jqxGrid2").jqxGrid( { width: '70%', height: '95%', source: dataAdapter2, theme: 'ui-sunny', columns: [ { text: 'Select', width: '7%', datafield: 'select', pinned: true, columntype: 'button', cellsrenderer: function () { return "select"; }, buttonclick: function (row) { // open the popup window when the user clicks a button. editrow = row; var offset = $("#jqxGrid2").offset(); $("#popupWindow2").jqxWindow({ position: { x: parseInt(offset.left) + 110, y: parseInt(offset.top) + (-120) } }); // get the clicked row's data and initialize the input fields. var dataRecord = $("#jqxGrid2").jqxGrid('getrowdata', editrow); $("#supplierBusinessId").val(dataRecord.SupplierBusinessId); $("#supplierId").val(dataRecord.SupplierId); $("#bankAcNo").val(dataRecord.BankAcNo); $("#bankAcName").val(dataRecord.BankAcName) $("#bankName").val(dataRecord.BankName) $("#iSFCcode").val(dataRecord.ISFCcode); $("#bankLocation").val(dataRecord.BankLocation) $("#minOrderVal").val(dataRecord.MinOrderVal) $("#orderDIscount").val(dataRecord.OrderDIscount) $("#isShipPaid").val(dataRecord.IsShipPaid) $("#isInsPaid").val(dataRecord.IsInsPaid); $("#isPayInAdvance").val(dataRecord.IsPayInAdvance) $("#paymentTerms").val(dataRecord.PaymentTerms); $("#gLAcCode").val(dataRecord.GLAcCode) $("#panNo").val(dataRecord.PanNo); $("#tanNo").val(dataRecord.TanNo) $("#regNo").val(dataRecord.RegNo) $("#vatRegNo").val(dataRecord.VatRegNo); $("#IsActive").val(dataRecord.isActive) $("#supplierUrl").val(dataRecord.SupplierUrl) // show the popup window. $("#popupWindow2").jqxWindow('open'); } }, { text: 'Business Id', datafield: 'SupplierBusinessId', width: 50 }, { text: 'Supp Id', datafield: 'SupplierId', width: 50 }, { text: 'Bank a/c No', datafield: 'BankAcNo', width: 100 }, { text: 'a/c Name', datafield: 'BankAcName', width: 150 }, { text: 'Bank', datafield: 'BankAcName', width: 150 }, { text: 'ISFC', datafield: 'ISFCcode', width: 100}, { text: 'Location', datafield: 'BankLocation', width: 200}, { text: 'Min Ord Lvl', datafield: 'MinOrderVal', width: 50 }, { text: 'Ord Disc', datafield: 'OrderDIscount', width: 50 }, { text: 'Ship Paid ?', datafield: 'IsShipPaid', width: 50 }, { text: 'Ins Paid ?', datafield: 'IsInsPaid', width: 50 }, { text: 'Pay In Adv ?', datafield: 'IsPayInAdvance', width: 50 }, { text: 'Pay Terms', datafield: 'PaymentTerms', width: 250 }, { text: 'GL a/c Code', datafield: 'GLAcCode', width: 100 }, { text: 'Pan No', datafield: 'PanNo', width: 150 }, { text: 'Tan No', datafield: 'TanNo', width: 150 }, { text: 'Reg No', datafield: 'RegNo', width: 150 }, { text: 'Vat Reg No', datafield: 'VatRegNo', width: 150 }, { text: 'Is Active ?', datafield: 'IsActive', width: 150 }, { text: 'URL', datafield: 'SupplierUrl', width: 150 } ] }); $("#addrowbutton2").bind('click', function () { var datainformation = $("#jqxGrid2").jqxGrid('getdatainformation'); var rowscount = datainformation.rowscount; editrow = rowscount + 1; id = rowscount + 1; var datarow = generaterow(rowscount + 1); $("#jqxGrid2").jqxGrid('addrow', (rowscount + 1), datarow, 'top'); }); $("#updaterowbutton2").bind('click', function () { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxGrid2").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxGrid2").jqxGrid('getrowid', selectedrowindex); $("#jqxGrid2").jqxGrid('updaterow', id, datarow); } }); $("#popupWindow2").jqxWindow({ width: '40%', resizable: false, theme: 'ui-sunny', isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01, height: '50%', title: 'Supplier edit' }); $("#popupWindow2").on('open', function () { $("#supplierBusinessId").jqxInput('selectAll'); }) $('#Save').bind('click', function () { $('#testForm2').jqxValidator('validate'); }); // update the edited row when the user clicks the 'Save' button. $("#Save").click(function () { var result = false; result = $('#testForm2').jqxValidator('validate'); if (result == true) { if (editrow >= 0) { alert("dasda"); var row = { supplierBusinessId: $("#SupplierBusinessId").val(), SupplierId: $("#supplierId ").val(), BankAcNo: $("#bankAcNo").val(), BankAcName: $("#bankAcName").val(), BankName: $("#bankName").val(), ISFCcode: $("#iSFCcode").val(), isInsPaid: $("#IsInsPaid").val(), isPayInAdvance: $("#IsPayInAdvance").val(), PaymentTerms: $("#paymentTerms").val(), GLAcCode: $("#gLAcCode").val(), PanNo: $("#panNo").val(), TanNoMobile: $("#tanNo").val(), RegNo: $("#regNo").val(), VATRegNo: $("#vATRegNo").val(), isActive: $("#IsActive").val(), SupplierUrl: $("#supplierUrl").val(), }; } var rowID = $('#jqxGrid2').jqxGrid('getrowid', editrow); $('#jqxGrid2').jqxGrid('updaterow', rowID, row); $("#popupWindow2").jqxWindow('hide'); } }) $('#testForm2').jqxValidator({ rules: [ { input: '#bankAcNo', message: 'Bank a/c No is required!', action: 'keyup, blur', rule: 'required' }, { input: '#bankAcNo', message: 'Bank a/c No must be between 3 and 10 characters!', action: 'keyup, focus', rule: 'length=3,10' }, { input: '#bankAcName', message: 'Bank a/c Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#bankAcName', message: 'Bank a/c Name must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#bankName', message: 'Bank Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#bankName', message: 'Bank Name must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#iSFCcode', message: 'ISFC code is required!', action: 'keyup, blur', rule: 'required' }, { input: '#iSFCcode', message: 'ISFC code must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#bankLocation', message: 'Bank location is required!', action: 'keyup, blur', rule: 'required' }, { input: '#bankLocation', message: 'Bank location must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#minOrderVal', message: 'Min Order Value is required!', action: 'keyup, blur', rule: 'required' }, { input: '#IsShipPaid', message: 'Whether Ship paid by Supplier is required!', action: 'keyup, blur', rule: 'required' }, { input: '#IsInsPaid', message: 'Whether Insurance paid by Supplier is required', action: 'keyup, blur', rule: 'required' }, { input: '#IsPayInAdvance', message: 'Whether Pay in advance is required!', action: 'keyup, blur', rule: 'required' }, { input: '#gLAcCode', message: 'GL a/c Code is required!', action: 'keyup, blur', rule: 'required' }, { input: '#panNo', message: 'Pan No is required!', action: 'keyup, blur', rule: 'required' }, { input: '#tanNo', message: 'Pan No is required!', action: 'keyup, blur', rule: 'required' }, { input: '#regNo', message: 'RegNo No is required!', action: 'keyup, blur', rule: 'required' }, { input: '#vATRegNo', message: 'Vat Reg No is required!', action: 'keyup, blur', rule: 'required' }, { input: '#IsActive', message: 'Whether Active is required!', action: 'keyup, blur', rule: 'required' }, { input: '#supplierUrl', message: 'Supplier URL is required!', action: 'keyup, blur', rule: 'required' } ] }); } var initWidgets = function (tab) { switch (tab) { case 0: initGrid1(); break; case 1: initGrid2(); break; } } $('#jqxTabs').jqxTabs({ width: '100%', height: 400, initTabContent: initWidgets, theme: 'ui-sunny', showCloseButtons: true, position: "top", selectionTracker: true }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div style="overflow: hidden;"> <div id='jqxTabs'> <ul> <li>Supplier Contact</li> <li>Suplier Business</li> </ul> <div> <input id="addrowbutton" type="button" style="margin-left: 1px;" value="+" title="Click to add row" /> <input id="deleterowbutton" type="button" value="-" title="Click to remove row" /> <div id="jqxgrid"> <div id="popupWindow"> <div style="overflow: scroll;"> <div id="testForm" action="./"> <table> <tr> <td style="text-align: right;">Id:</td> <td style="text-align: left;"> <div type="text" id="supplierId"></div> </td> </tr> <tr> <td style="text-align: right;">Code:</td> <td style="text-align: left;"> <input type="text" id="supplierCode" placeholder="Supplier Code" /> </td> </tr> <tr> <td style="text-align: right;">Name:</td> <td style="text-align: left;"> <input type="text" id="supplierName" placeholder="Supplier Name" autofocus required /> </td> </tr> <tr> <td style="text-align: right;">Contact:</td> <td style="text-align: left;"> <input type="text" id="contactName" placeholder="Contact Name" /> </td> </tr> <tr> <td style="text-align: right;">Alt Contact:</td> <td style="text-align: left;"> <input type="text" id="altContactName" placeholder="Alternate Contact name" /> </td> </tr> <tr> <td style="text-align: right;">Address:</td> <td style="text-align: left;"> <input type="text" id="addressLine1" placeholder="Address " /> </td> </tr> <tr> <td style="text-align: right;">Address:</td> <td style="text-align: left;"> <input type="text" id="addressLine2" placeholder="Address " /> </td> </tr> <tr> <td style="text-align: right;">City:</td> <td style="text-align: left;"> <input type="text" id="city" placeholder="City" /> </td> </tr> <tr> <td style="text-align: right;">State:</td> <td style="text-align: left;"> <input type="text" id="state" placeholder="State" /> </td> </tr> <tr> <td style="text-align: right;">Country:</td> <td style="text-align: left;"> <input type="text" id="country" placeholder="Country" /> </td> </tr> <tr> <td style="text-align: right;">ZipCode:</td> <td style="text-align: left;"> <input type="text" id="zipCode" placeholder="ZipCode" /> </td> </tr> <tr> <td style="text-align: right;">Mobile:</td> <td style="text-align: left;"> <input type="text" id="mobile" placeholder="Mobile" /> </td> </tr> <tr> <td style="text-align: right;">Land Phone:</td> <td style="text-align: left;"> <input type="text" id="landPhone" placeholder="Land Phone" /> </td> </tr> <tr> <td style="text-align: right;">Fax:</td> <td style="text-align: left;"> <input type="text" id="fax" placeholder="Fax" /> </td> </tr> <tr> <td style="text-align: right;">EmailId:</td> <td style="text-align: left;"> <input type="text" id="emailId" placeholder="EmailId" /> </td> </tr> <tr> <td style="text-align: right"></td> <td style="padding-top: 1%; text-align: right"> <input style="margin-right: 1%;" type="button" id="Save" value="Save" /> <input id="Cancel" type="button" value="Cancel" /> </td> </tr> </table> </div> </div> </div> </div> </div> <div> <input id="addrowbutton2" type="button" style="margin-left: 1px;" value="+" title="Click to add row" /> <input id="deleterowbutton2" type="button" value="-" title="Click to remove row" /> <div id="jqxGrid2"> <div id="popupWindow2"> <div style="overflow: scroll;"> <div id="testForm2" action="./"> <table> <tr> <td style="text-align: right;">Id:</td> <td style="text-align: left;"> <input type="text" id="supplierBusinessId" /> </td> </tr> <tr> <td style="text-align: right;">SupplierId:</td> <td style="text-align: left;"> <input type="text" id="supplierId" /> </td> </tr> <tr> <td style="text-align: right;">Bank a/c no:</td> <td style="text-align: left;"> <input type="text" id="bankAcNo" class="text-input" placeholder="Bank a/c No" required /> </td> </tr> <tr> <td style="text-align: right;">Bank a/c Name:</td> <td style="text-align: left;"> <input type="text" id="bankAcName" class="text-input" placeholder="Bank a/c Name" required /> </td> </tr> <tr> <td style="text-align: right;">Bank Name:</td> <td style="text-align: left;"> <input type="text" id="bankName" class="text-input" placeholder="Bank Name" required /> </td> </tr> <tr> <td style="text-align: right;">Bank Location:</td> <td style="text-align: left;"> <input type="text" id="bankLocation" class="text-input" placeholder="Bank Location" required /> </td> </tr> <tr> <td style="text-align: right;">ISFC code:</td> <td style="text-align: left;"> <input type="text" id="iSFCcode" class="text-input" placeholder="ISFC Code" required /> </td> </tr> <tr> <td style="text-align: right;">Min Order Lvl:</td> <td style="text-align: left;"> <input type="text" id="minOrderVal" class="text-input" placeholder="Min Order Level" required /> </td> </tr> <tr> <td style="text-align: right;">Order Discount:</td> <td style="text-align: left;"> <input type="text" id="orderDIscount" class="text-input" placeholder="Order discount" required /> </td> </tr> <tr> <td style="text-align: right;">Shipping Paid ?:</td> <td style="text-align: left;"> <input type="text" id="IsShipPaid" class="text-input" placeholder="Is Shipping included " required /> </td> </tr> <tr> <td style="text-align: right;">Insurance Paid?:</td> <td style="text-align: left;"> <input type="text" id="IsInsPaid" class="text-input" placeholder="Is Insurance included " required /> </td> </tr> <tr> <td style="text-align: right;">Paid in Advance ?:</td> <td style="text-align: left;"> <input type="text" id="IsPayInAdvance" class="text-input" placeholder="Is payment in advance?" required /> </td> </tr> <tr> <td style="text-align: right;">Payment Terms :</td> <td style="text-align: left;"> <input type="text" id="paymentTerms" class="text-input" placeholder="Payment Terms" required /> </td> </tr> <tr> <td style="text-align: right;">GL a/c code:</td> <td style="text-align: left;"> <input type="text" id="gLAcCode" class="text-input" placeholder="GL a/c code" required /> </td> </tr> <tr> <td style="text-align: right;">Pan No:</td> <td style="text-align: left;"> <input type="text" id="panNo" class="text-input" placeholder="Supplier Pan No" required /> </td> </tr> <tr> <td style="text-align: right;">Tan No:</td> <td style="text-align: left;"> <input type="text" id="tanNo" class="text-input" placeholder="Supplier Tan No" required /> </td> </tr> <tr> <td style="text-align: right;">Registration No:</td> <td style="text-align: left;"> <input type="text" id="regNo" class="text-input" placeholder="Supplier Registration No" required /> </td> </tr> <tr> <td style="text-align: right;">is Active?:</td> <td style="text-align: left;"> <input type="text" id="IsActive" class="text-input" placeholder="Is Supplier active" required /> </td> </tr> <tr> <td style="text-align: right;">Supplier URL:</td> <td style="text-align: left;"> <input type="text" id="supplierUrl" class="text-input" placeholder="Supplier URL" /> </td> </tr> <tr> <td style="text-align: right"></td> <td style="padding-top: 1%; text-align: right"> <input style="margin-right: 1%;" type="button" id="Save" value="Save" /> <input id="Cancel" type="button" value="Cancel" /> </td> </tr> </table> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>Hi,
Issue sorted, please Ignore post.
data in Ajax call was done twice with different value as in code below.
Thanks,
Keshavan
updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command { $.ajax( { cache: false, dataType: 'json', url: '/Category/Update', data: rowdata, data : data , type: "POST", headers: {'RequestVerificationToken': '@TokenHeaderValue()'}, success: function (data, status, xhr) { alert("entry saved!"); console.log(xhr.rowdata); commit(true); }, error: function (jqXHR, textStatus, errorThrown) { alert("Fails ... "); commit(false); } } ); } }Hi,
Please find below the formatted code.
Thanks,
Keshavan
<!DOCTYPE html> @using (Html.BeginForm()) { @Html.AntiForgeryToken() } @functions{ public string TokenHeaderValue() { string cookieToken, formToken; AntiForgery.GetTokens(null, out cookieToken, out formToken); return cookieToken + ":" + formToken; } } <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/jqxvalidator.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.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/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/jqxexpander.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/jqxscrollbar.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> <style> input[type=text]:focus { border-color: #0000ff; border-width: 3px; background-color: aliceblue; } </style> <!--style> body,html { width: 80%; height: 90%; overflow: scroll ; } <style--> <script type="text/javascript"> $(document).ready(function () { editrow = -1; // create new row. var datarow; var theme = 'ui-sunny'; $("#addrowbutton").jqxButton({ width: '4.5%', height: 30, theme: 'ui-sunny' }); $("#deleterowbutton").jqxButton({ width: '6.5%', height: 30, theme: 'ui-sunny' }); $("#Cancel").jqxButton({ theme: 'ui-sunny', width: '22%' }); $("#Save").jqxButton({ theme: 'ui-sunny', width: '22%' }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: '30%', resizable: false, theme: 'ui-sunny', isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); var generaterow = function (id) { var row = {}; row["CategoryId"] = id; row["CategoryName"]; return row; } var source = { datatype: "json", datafields: [ { name: 'CategoryId' }, { name: 'CategoryName', type: 'string' } ], id: 'CategoryId', url: '/Category/GetCategories', addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command $.ajax ({ cache: false, dataType: 'json', url: '/Category/Add', data: rowdata, type: "POST", success: function (data, status, xhr) { // insert command is executed. commit(true); // $('#n1').val(data.GroupCompanyId); }, 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: '/Category/Update', data: rowdata, data : data , type: "POST", headers: {'RequestVerificationToken': '@TokenHeaderValue()'}, success: function (data, status, xhr) { alert("entry saved!"); console.log(xhr.rowdata); commit(true); }, error: function (jqXHR, textStatus, errorThrown) { alert("Fails ... "); commit(false); } } ); } } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: '70%', height: 300, source: dataAdapter, theme: 'ui-sunny', pageable: true, sortable: true, filterable: true, columnsresize: true, columnsreorder: true, enabletooltips: true, columns: [ { text: 'Select', width: '9%', datafield: 'select', pinned: true, 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) + 110, y: parseInt(offset.top) + (-65) } }); // get the clicked row's data and initialize the input fields. var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); $("#categoryId").val(dataRecord.CategoryId); $("#categoryName").val(dataRecord.CategoryName); // show the popup window. $("#popupWindow").jqxWindow('open'); } }, { text: 'Category', datafield: 'CategoryName', width: '90%' }, ] }); $("#addrowbutton").bind('click', function () { var datainformation = $("#jqxgrid").jqxGrid('getdatainformation'); var rowscount = datainformation.rowscount; editrow = rowscount + 1; 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); } }); // initialize the input fields. $("#categoryId").jqxInput({ theme: 'ui-sunny' }); $("#categoryName").jqxInput({ theme: 'ui-sunny' }); $("#categoryId").width('10%'); $("#categoryId").height('3%'); $("#categoryName").width('200%'); $("#categoryName").height('3%'); $("#popupWindow").on('open', function () { $("#categoryId").jqxInput('selectAll'); }); // Validate $('#testForm').jqxValidator({ rules: [ { input: '#categoryName', message: 'Category Name is required!', action: 'keyup,blur', rule: 'required' }, { input: '#categoryName', message: 'Category Name must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' } ] }); $('#Save').bind('click', function () { $('#testForm').jqxValidator('validate'); }); $("#Cancel").click(function () { $('#testForm').jqxValidator('hideHint', '#çategoryName'); }); $("#Save").click(function () { var result = $('#testForm').jqxValidator('validate'); if (result == true) { if (editrow >= 0) { var row = { CategoryId: $("#categoryId").val(), CategoryName: $("#categoryName").val() }; } var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); $('#jqxgrid').jqxGrid('updaterow', rowID, row); $("#popupWindow").jqxWindow('hide'); } }); }); var menuNo = 2; 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-left:1 %;margin-top:1%" value="INS" /> <input id="deleterowbutton" type="button" style="margin-top: 1%;" value="DEL" /> </div> <div id='jqxWidget'> <div id="jqxgrid" style="margin-left:10%;margin-top:1%;"></div> <br /> <div style="margin-top: 1%;"> <div id="cellbegineditevent"></div> <div style="margin-top: 1%;" id="cellendeditevent"></div> </div> <div id="popupWindow"> <div>Edit</div> <div style="overflow: hidden"> <form id="testForm" action="./"> <table> <tr> <td style="text-align:right">Id:</td> <td style="text-align:left"> <input type="text" id="categoryId" /> </td> </tr> <tr> <td style="text-align:right">Category:</td> <td style="text-align:left"> <input type="text" id="categoryName" placeholder="Category description" autofocus required /> </td> </tr> <tr> <td style="text-align:right"></td> <td style="padding-top: 1%;text-align:right"> <input style="text-align: justify" type="button" id="Save" value="Save" /> <input id="Cancel" style="text-align: justify" type="button" value="Cancel" /> </td> </tr> </table> </form> </div> </div> </div> </body> </html>Hello,
Here is the formatted code.
Thanks,
Keshavan
<!DOCTYPE html>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
}
@functions{
public string TokenHeaderValue()
{
string cookieToken, formToken;
AntiForgery.GetTokens(null, out cookieToken, out formToken);
return cookieToken + “:” + formToken;
}
}
<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/jqxvalidator.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxbuttons.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/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/jqxexpander.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/jqxscrollbar.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>
<style>
input[type=text]:focus {
border-color: #0000ff;
border-width: 3px;
background-color: aliceblue;
}
</style><!–style>
body,html {
width: 80%;
height: 90%;
overflow: scroll ;
}
<style–>
<script type=”text/javascript”>
$(document).ready(function ()
{
editrow = -1;
// create new row.
var datarow;
var theme = ‘ui-sunny’;
$(“#addrowbutton”).jqxButton({ width: ‘4.5%’, height: 30, theme: ‘ui-sunny’ });
$(“#deleterowbutton”).jqxButton({ width: ‘6.5%’, height: 30, theme: ‘ui-sunny’ });
$(“#Cancel”).jqxButton({ theme: ‘ui-sunny’, width: ‘22%’ });
$(“#Save”).jqxButton({ theme: ‘ui-sunny’, width: ‘22%’ });
// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: ‘30%’, resizable: false, theme: ‘ui-sunny’, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});
var generaterow = function (id) {
var row = {};
row[“CategoryId”] = id;
row[“CategoryName”];
return row;
}
var source =
{
datatype: “json”,
datafields:
[
{ name: ‘CategoryId’ },
{ name: ‘CategoryName’, type: ‘string’ }
],
id: ‘CategoryId’,
url: ‘/Category/GetCategories’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax
({
cache: false,
dataType: ‘json’,
url: ‘/Category/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
// $(‘#n1’).val(data.GroupCompanyId);
},
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: ‘/Category/Update’,
data: rowdata,
data : data ,
type: “POST”,
headers: {‘RequestVerificationToken’: ‘@TokenHeaderValue()’},
success: function (data, status, xhr) {
alert(“entry saved!”);
console.log(xhr.rowdata);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(“Fails … “);
commit(false);
}
}
);
}
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: ‘70%’,
height: 300,
source: dataAdapter,
theme: ‘ui-sunny’,
pageable: true,
sortable: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
enabletooltips: true,columns:
[
{
text: ‘Select’, width: ‘9%’, datafield: ‘select’, pinned: true, 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) + 110, y: parseInt(offset.top) + (-65) } });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#categoryId”).val(dataRecord.CategoryId);
$(“#categoryName”).val(dataRecord.CategoryName);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
},
{ text: ‘Category’, datafield: ‘CategoryName’, width: ‘90%’ },
]
});
$(“#addrowbutton”).bind(‘click’, function () {
var datainformation = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var rowscount = datainformation.rowscount;
editrow = rowscount + 1;
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);
}
});
// initialize the input fields.
$(“#categoryId”).jqxInput({ theme: ‘ui-sunny’ });
$(“#categoryName”).jqxInput({ theme: ‘ui-sunny’ });
$(“#categoryId”).width(‘10%’);
$(“#categoryId”).height(‘3%’);
$(“#categoryName”).width(‘200%’);
$(“#categoryName”).height(‘3%’);
$(“#popupWindow”).on(‘open’, function () {
$(“#categoryId”).jqxInput(‘selectAll’);
});
// Validate
$(‘#testForm’).jqxValidator({
rules: [
{ input: ‘#categoryName’, message: ‘Category Name is required!’, action: ‘keyup,blur’, rule: ‘required’ },
{ input: ‘#categoryName’, message: ‘Category Name must be between 5 and 50 characters!’, action: ‘keyup, focus’, rule: ‘length=5,50’ }
]
});
$(‘#Save’).bind(‘click’, function () {
$(‘#testForm’).jqxValidator(‘validate’);
});
$(“#Cancel”).click(function () {
$(‘#testForm’).jqxValidator(‘hideHint’, ‘#çategoryName’);
});
$(“#Save”).click(function () {
var result = $(‘#testForm’).jqxValidator(‘validate’);
if (result == true) {
if (editrow >= 0) {
var row =
{ CategoryId: $(“#categoryId”).val(), CategoryName: $(“#categoryName”).val() };
}
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});
});
var menuNo = 2;
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-left:1 %;margin-top:1%” value=”INS” />
<input id=”deleterowbutton” type=”button” style=”margin-top: 1%;” value=”DEL” />
</div>
<div id=’jqxWidget’>
<div id=”jqxgrid” style=”margin-left:10%;margin-top:1%;”></div>
<br />
<div style=”margin-top: 1%;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 1%;” id=”cellendeditevent”></div>
</div>
<div id=”popupWindow”>
<div>Edit</div>
<div style=”overflow: hidden”>
<form id=”testForm” action=”./”>
<table>
<tr>
<td style=”text-align:right”>Id:</td>
<td style=”text-align:left”>
<input type=”text” id=”categoryId” />
</td>
</tr>
<tr>
<td style=”text-align:right”>Category:</td>
<td style=”text-align:left”>
<input type=”text” id=”categoryName” placeholder=”Category description” autofocus required />
</td>
</tr>
<tr>
<td style=”text-align:right”></td>
<td style=”padding-top: 1%;text-align:right”>
<input style=”text-align: justify” type=”button” id=”Save” value=”Save” />
<input id=”Cancel” style=”text-align: justify” type=”button” value=”Cancel” />
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>`April 17, 2015 at 10:27 am in reply to: Grid – popup vallidation not getting fired Grid – popup vallidation not getting fired #69991Hi Nadezhda,
Thanks for the Quick solution, Yes I had the “jqxInput: Missing Text Input in the Input Group” too.
The Issue is Solved with your help.
Thanks & Regards,
KeshavanApril 17, 2015 at 6:55 am in reply to: Grid – popup vallidation not getting fired Grid – popup vallidation not getting fired #69980Hi,
Here is the formatted code.
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/scripts/gettheme.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.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/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/jqxvalidator.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxexpander.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/jqxscrollbar.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> <style> input[type=text]:focus { border-color: #0000ff; border-width: 3px; background-color: aliceblue; } </style> <!--style> body,html { width: 80%; height: 90%; overflow: scroll ; } <style--> <script type="text/javascript"> $(document).ready(function () { var editrow = -1; // create new row. var datarow; var theme = 'ui-sunny'; $("#addrowbutton").jqxButton({ width: '4.5%', height: 30, theme: 'ui-sunny' }); $("#deleterowbutton").jqxButton({ width: '4.5%', height: 30, theme: 'ui-sunny' }); $("#Cancel").jqxButton({ theme: 'ui-sunny', width: '22%' }); $("#Save").jqxButton({ theme: 'ui-sunny', width: '22%' }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: '30%', resizable: false, theme: 'ui-sunny', isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); var generaterow = function (id) { var row = {}; row["CategoryId"] = id; row["CategoryName"]; return row; } var source = { datatype: "json", datafields: [ { name: 'CategoryId' }, { name: 'CategoryName', type: 'string' } ], id: 'CategoryId', url: '/Category/GetCategories', addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command $.ajax ({ cache: false, dataType: 'json', url: '/Category/Add', data: rowdata, type: "POST", success: function (data, status, xhr) { // insert command is executed. commit(true); // $('#n1').val(data.GroupCompanyId); }, 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: '/Category/Update', data: rowdata, type: "POST", success: function (data, status, xhr) { alert("entry saved!"); console.log(xhr.rowdata); commit(true); }, error: function (jqXHR, textStatus, errorThrown) { alert("Fails ... "); commit(false); } } ); } } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: '70%', height: '25%', source: dataAdapter, theme: 'ui-sunny', pageable: true, sortable: true, filterable: true, columnsresize: true, columnsreorder: true, enabletooltips: true, columns: [ { text: 'Select', width: '9%', datafield: 'select', pinned: true, 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) + 110, y: parseInt(offset.top) + (-65) } }); // get the clicked row's data and initialize the input fields. var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); $("#categoryId").val(dataRecord.CategoryId); $("#categoryName").val(dataRecord.CategoryName); // show the popup window. $("#popupWindow").jqxWindow('open'); } }, { text: 'Category', datafield: 'CategoryName', width: '90%' }, ] }); $("#addrowbutton").bind('click', function () { var datainformation = $("#jqxgrid").jqxGrid('getdatainformation'); var rowscount = datainformation.rowscount; editrow = rowscount + 1; 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); } }); // initialize the input fields. $("#categoryId").jqxInput({ theme: 'ui-sunny' }); $("#categoryName").jqxInput({ theme: 'ui-sunny' }); $("#categoryId").width('10%'); $("#categoryId").height('3%'); $("#categoryName").width('200%'); $("#categoryName").height('3%'); $("#popupWindow").on('open', function () { $("#categoryId").jqxInput('selectAll'); }); $('#Save').bind('click', function () { $('#testForm').jqxValidator('validate'); }); // Validate $('#testForm').jqxValidator({ rules: [ { input: '#categoryName', message: 'Category Name is required!', action: 'keyup', rule: 'required' }, { input: '#categoryName', message: 'Category Name must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' } ] }); $("#Cancel").click(function () { $('#testForm').jqxValidator('hideHint', '#çategoryName'); }); $("#Save").click(function () { var result = $('#testForm').jqxValidator('validate'); if (result == true) { if (editrow >= 0) { // alert("dasda"); var row = { CategoryId: $("#categoryId").val(), CategoryName: $("#categoryName").val() }; } var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); $('#jqxgrid').jqxGrid('updaterow', rowID, row); $("#popupWindow").jqxWindow('hide'); } }); }); var menuNo = 2; 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-left:1 %;margin-top:1%" value="INS" /> <input id="deleterowbutton" type="button" style="margin-top: 1%;" value="DEL" /> </div> <div id='jqxWidget'> <div id="jqxgrid" style="margin-left:10%;margin-top:1%;"></div> <br /> <div style="margin-top: 1%;"> <div id="cellbegineditevent"></div> <div style="margin-top: 1%;" id="cellendeditevent"></div> </div> <div id="popupWindow"> <div>Edit</div> <div style="overflow: hidden;"> <form id="testForm" action="./"> <table> <tr> <td style="text-align:right">Id:</td> <td style="text-align:left"> <div id="categoryId"> </div> </td> </tr> <tr> <td style="text-align:right">Category:</td> <td style="text-align:left"> <input type="text" id="categoryName" class="text-input" placeholder="Category description/ name" autofocus required /> </td> </tr> <tr> <td style="text-align:right"></td> <td style="padding-top: 1%;text-align:right"> <input style="text-align: justify" type="button" id="Save" value="Save" /> <input id="Cancel" style="text-align: justify" type="button" value="Cancel" /> </td> </tr> </table> </form> </div> </div> </div> </body> </html>October 28, 2014 at 6:49 am in reply to: Tabs – with Grid and Popup window Tabs – with Grid and Popup window #61706<!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="stylesrIdheet" 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" /> <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.fresh.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/scripts/check_browser_close.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/jqxwindow.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.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/jqxgrid.edit.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxvalidator.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/jqxnumberinput.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="/JqWidgets/scripts/gettheme.js"></script> <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttongroup.js"></script> <script type="text/javascript" src="generatedata.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 initGrid1 = function () { var theme = 'ui-sunny'; var data = {}; var n1 = 0; var editrow = -1; var id = 0; var generaterow = function (id) { var row = {}; row["SupplierId"] = id; row["SupplierCode"] = "foo"; row["SupplierName"] = "foo"; row["ContactName"] = "foo"; row["AltContactName"] = "foo"; row["AddressLine1"] = "foo"; row["AddressLine2"] = "foo"; row["City"] = "foo"; row["State"] = "foo"; row["Country"] = "foo"; row["ZipCode"] = "foo"; row["Mobile"] = "foo"; row["LandPhone"] = "foo"; row["Fax"] = "foo"; row["EmailId"] = "foo"; return row; } var source = { datatype: "json", datafields: [ { name: 'SupplierId' }, { name: 'SupplierCode', type: 'string' }, { name: 'SupplierName', type: 'string' }, { name: 'ContactName', type: 'string' }, { name: 'AltContactName', type: 'string' }, { name: 'AddressLine1', type: 'string' }, { name: 'AddressLine2', type: 'string' }, { name: 'City', type: 'string' }, { name: 'State', type: 'string' }, { name: 'Country', type: 'string' }, { name: 'ZipCode', type: 'string' }, { name: 'Mobile', type: 'string' }, { name: 'LandPhone', type: 'string' }, { name: 'Fax', type: 'string' }, { name: 'EmailId', type: 'string' } ], id: 'SupplierId', url: '/Supplier/GetSuppliers', async: true, addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command $.ajax ({ cache: false, dataType: 'json', url: '/Supplier/Add', data: rowdata, type: "POST", async: false, success: function (data, status, xhr) { commit(true); }, 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: '/Supplier/Edit', data: rowdata, type: "POST", success: function (data, status, xhr) { alert("entry saved!"); console.log(xhr.rowdata); commit(true); }, error: function (jqXHR, textStatus, errorThrown) { alert("Fails ... "); commit(false); } } ); } } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize the input fields. $("#supplierId").jqxInput({ theme: theme }); $("#supplierCode").jqxInput({ theme: theme }); $("#supplierName").jqxInput({ theme: theme }); $("#contactName").jqxInput({ theme: theme }); $("#altContactName").jqxInput({ theme: theme }); $("#addressLine1").jqxInput({ theme: theme }); $("#addressLine2").jqxInput({ theme: theme }); $("#city").jqxInput({ theme: theme }); $("#state").jqxInput({ theme: theme }); $("#country").jqxInput({ theme: theme }); $("#zipCode").jqxInput({ theme: theme }); $("#mobile").jqxInput({ theme: theme }); $("#landPhone").jqxInput({ theme: theme }); $("#fax").jqxInput({ theme: theme }); $("#emailId").jqxInput({ theme: theme }); $("#supplierId").width('10%'); $("#supplierId").height('3%'); $("#supplierCode").width('200%'); $("#supplierCode").height('3%'); $("#supplierName").width('200%'); $("#supplierName").height('3%'); $("#contactName").width('200%'); $("#contactName").height('3%'); $("#altContactName").width('10%'); $("#altContactName").height('3%'); $("#addressLine1").width('200%'); $("#addressLine1").height('3%'); $("#addressLine2").width('200%'); $("#addressLine2").height('3%'); $("#city").width('10%'); $("#city").height('3%'); $("#state").width('200%'); $("#state").height('3%'); $("#country").width('200%'); $("#country").height('3%'); $("#zipCode").width('200%'); $("#zipCode").height('3%'); $("#mobile").width('10%'); $("#mobile").height('3%'); $("#landPhone").width('200%'); $("#landPhone").height('3%'); $("#fax").width('200%'); $("#fax").height('3%'); $("#emailId").width('200%'); $("#emailId").height('3%'); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: '30%', resizable: false, theme: 'ui-sunny', isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#addrowbutton").jqxButton({ width: '4.5%', height: 30, theme: 'ui-sunny' }); $("#deleterowbutton").jqxButton({ width: '4.5%', height: 30, theme: 'ui-sunny' }); $("#Cancel").jqxButton({ theme: 'ui-sunny', width: '32%' }); $("#Save").jqxButton({ theme: 'ui-sunny', width: '32%' }); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: '99%', height: 335, source: dataAdapter, selectionmode: 'singlerow', theme: 'ui-sunny', pageable: true, sortable: true, filterable: true, columnsresize: true, columnsreorder: true, enabletooltips: true, columns: [ { text: 'Select', width: '7%', datafield: 'select', pinned: true, 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) + 110, y: parseInt(offset.top) + (-65) } }); // get the clicked row's data and initialize the input fields. var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); $("#supplierId").val(dataRecord.SupplierId); $("#supplierCode").val(dataRecord.SupplierCode); $("#supplierName").val(dataRecord.SupplierName); $("#contactName").val(dataRecord.ContactName) $("#altContactName").val(dataRecord.AltContactName); $("#addressLine1").val(dataRecord.AddressLine1) $("#addressLine2").val(dataRecord.AddressLine2); $("#city").val(dataRecord.City) $("#state").val(dataRecord.State); $("#country").val(dataRecord.Country) $("#zipCode").val(dataRecord.ZipCode); $("#mobile").val(dataRecord.Mobile) $("#landPhone").val(dataRecord.LandPhone) $("#fax").val(dataRecord.Fax); $("#emailId").val(dataRecord.EmailId) // show the popup window. $("#popupWindow").jqxWindow('open'); } }, { text: 'Id', datafield: 'SupplierId', width: '5%' }, { text: 'Code', datafield: 'SupplierCode', width: '10%' }, { text: 'Name', datafield: 'SupplierName', width: '10%' }, { text: 'Contact', datafield: 'ContactName', width: '10%' }, { text: 'Alt Contact', datafield: 'AltContactName', width: '10%' }, { text: 'Address', datafield: 'AddressLine1', width: '10%' }, { text: ' ', datafield: 'AddressLine2', width: '10%' }, { text: 'City', datafield: 'City', width: '5%' }, { text: 'State', datafield: 'State', width: '10%' }, { text: 'Country', datafield: 'Country', width: '10%' }, { text: 'ZipCode', datafield: 'ZipCode', width: '10%' }, { text: 'Mobile', datafield: 'Mobile', width: '10%' }, { text: 'Land Phone', datafield: 'LandPhone', width: '10%' }, { text: 'Fax', datafield: 'Fax', width: '10%' }, { text: 'EmailId', datafield: 'EmailId', width: '10%' }] }); // update row. // create new row. $("#addrowbutton").bind('click', function () { var datainformation = $("#jqxgrid").jqxGrid('getdatainformation'); var rowscount = datainformation.rowscount; editrow = rowscount + 1; id = rowscount + 1; var datarow = generaterow(rowscount + 1); $("#jqxgrid").jqxGrid('addrow', (rowscount + 1), datarow, '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); } }); $('#testForm').jqxValidator({ rules: [ { input: '#supplierCode', message: 'Supplier Code is required!', action: 'keyup, blur', rule: 'required' }, { input: '#supplierCode', message: 'Supplier Code must be between 3 and 10 characters!', action: 'keyup, focus', rule: 'length=3,10' }, { input: '#supplierName', message: 'Supplier Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#supplierName', message: 'Supplier Name must be between 5 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 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#altContactName', message: 'Alternate Contact Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#altContactName', message: 'Altername Contact Name must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#addressLine1', message: 'Address Line1 is required!', action: 'keyup, blur', rule: 'required' }, { input: '#addressLine1', message: 'Address Line1 must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#city', message: 'City Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#city', message: 'City Name must be between 1 and 50 characters!', action: 'keyup, focus', rule: 'length=1,50' }, { input: '#state', message: 'State Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#state', message: 'State Name must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#country', message: 'Country Name is required!', action: 'keyup, blur', rule: 'required' }, { input: '#country', message: 'Country Name must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' }, { input: '#zipCode', message: 'ZipCode is required!', action: 'keyup, blur', rule: 'required' }, { input: '#zipCode', message: 'ZipCode must be between 5 and 10 characters!', action: 'keyup, focus', rule: 'length=5,10' }, { input: '#mobile', message: 'Mobile No is required!', action: 'keyup, blur', rule: 'required' }, { input: '#mobile', message: 'Mobile No must be between 10 and 10 characters!', action: 'keyup, focus', rule: 'length=10,10' }, { input: '#landPhone', message: 'Land Phone No is required!', action: 'keyup, blur', rule: 'required' }, { input: '#landPhone', message: 'land Phone No must be between 10 and 10 characters!', action: 'keyup, focus', rule: 'length=10,10' }, { input: '#fax', message: 'Fax No is required!', action: 'keyup, blur', rule: 'required' }, { input: '#fax', message: 'Fax No must be between 10 and 10 characters!', action: 'keyup, focus', rule: 'length=10,10' }, { input: '#emailId', message: 'Email Id is required!', action: 'keyup, blur', rule: 'required' } ] }); $('#Save').bind('click', function () { $('#testForm').jqxValidator('validate'); }); // update the edited row when the user clicks the 'Save' button. var result = false; $("#Save").click(function () { var result = $('#testForm').jqxValidator('validate'); if (result == true) { if (editrow >= 0) { // alert("dasda"); var row = { SupplierId: $("#supplierId").val(), SupplierCode: $("#supplierCode").val(), SupplierName: $("#supplierName").val(), ContactName: $("#contactName").val(), AltContactNameName: $("#altContactName").val(), AddressLine1: $("#addressLine1").val(), AddressLine2: $("#addressLine2").val(), City: $("#city").val(), State: $("#state").val(), Country: $("#country").val(), ZipCode: $("#zipCode").val(), Mobile: $("#mobile").val(), LandPhone: $("#landPhone").val(), Fax: $("#fax").val(), EmailId: $("#emailId").val(), }; } var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); $('#jqxgrid').jqxGrid('updaterow', rowID, row); $("#popupWindow").jqxWindow('hide'); } }) $("#popupWindow").on('open', function () { // $("#supplierId").jqxInput('selectAll'); }) } var initGrid2 = function () { var source1 = { datatype: "csv", datafields: [ { name: 'SupplierId1' }, { name: 'SupplierCode1' }, { name: 'SupplierName1' } ], url: '../nasdaq_vs_sp5000.txt' }; var dataAdapter1 = new $.jqx.dataAdapter(source1, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source1.url + '" : ' + error); } }); $("#jqxGrid2").jqxGrid( { width: '100%', height: '115%', source: dataAdapter1, columns: [ { text: 'ID1', datafield: 'SupplierId1', cellsformat: 'd', width: 250 }, { text: 'Code1', datafield: 'SupplierCode1', width: 100 }, { text: 'Name1', datafield: 'SupplierName1' } ] }); } var initGrid3 = function () { var source2 = { datatype: "csv", datafields: [ { name: 'SupplierId2' }, { name: 'SupplierCode2' }, { name: 'SupplierName2' } ], url: '../sampledata/nasdaq_vs_sp50000.txt' }; var dataAdapter2 = new $.jqx.dataAdapter(source2, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source2.url + '" : ' + error); } }); $("#jqxGrid3").jqxGrid( { width: '100%', height: '95%', source: dataAdapter2, columns: [ { text: 'ID2', datafield: 'SupplierId2', cellsformat: 'd', width: 250 }, { text: 'Code2', datafield: 'SupplierCode2', width: 150 }, { text: 'Name2', datafield: 'SupplierName2' } ] }); } // init widgets. var initWidgets = function (tab) { switch (tab) { case 0: initGrid1(); break; case 1: initGrid2(); break; case 2: initGrid3(); break; } } $('#jqxTabs').jqxTabs({ width: '100%', height: 400, initTabContent: initWidgets, theme: 'ui-sunny', autoHeight: false, showCloseButtons: true, position: "top", selectionTracker: true, animationType: 'fade' }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id='jqxTabs'> <ul> <li style="margin-left: 50px; height: 10px;"> <div style="height: 20px; margin-top: 5px;"> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> Contacts </div> </div> </li> <li style="margin-left: 15px; height: 10px;"> <div style="height: 20px; margin-top: 5px;"> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> Commercials </div> </div> </li> <li style="margin-left: 15px; height: 10px;"> <div style="height: 20px; margin-top: 5px;"> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> Rating </div> </div> </li> </ul> <div> <input id="addrowbutton" type="button" style="margin-left: 1%;" value="+" title="Click to add row" /> <input id="deleterowbutton" type="button" value="-" title="Click to remove row" /> <div id="jqxgrid" style="overflow: hidden;"></div> <div id="popupWindow" style="overflow: hidden;"> <div> <form id="testForm" > <table> <tr> <td style="text-align: right">Supplier:</td> <td style="text-align: left"> <input type="text" id="supplierName" class="text-input" placeholder="Category description/ name" autofocus required /> </td> </tr> <tr> <td style="text-align: right"></td> <td style="padding-top: 1%; text-align: right"> <input style="margin-right: 1%;" type="button" id="Save" value="Save" /> <input id="Cancel" type="button" value="Cancel" /> </td> </tr> </table> </form> </div> </div> </div> <div id="jqxGrid2" style="overflow: hidden;"></div> <div id="jqxGrid3" style="overflow: hidden;"></div> </div> </div> </body> </html>October 28, 2014 at 6:40 am in reply to: Tabs – with Grid and Popup window Tabs – with Grid and Popup window #61705Hi Dimitar,
I have done accordingly 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=”stylesrIdheet” 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” />
<link rel=”stylesheet” href=”/jqWidgets/jqwidgets/styles/jqx.fresh.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/scripts/check_browser_close.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/jqxwindow.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.sort.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/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxvalidator.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/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxdragdrop.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”/JqWidgets/scripts/gettheme.js”></script>
<script type=”text/javascript” src=”/JqWidgets/jqwidgets/jqxbuttongroup.js”></script>
<script type=”text/javascript” src=”generatedata.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 initGrid1 = function () {
var theme = ‘ui-sunny’;
var data = {};
var n1 = 0;
var editrow = -1;
var id = 0;var generaterow = function (id) {
var row = {};
row[“SupplierId”] = id;
row[“SupplierCode”] = “foo”;
row[“SupplierName”] = “foo”;
row[“ContactName”] = “foo”;
row[“AltContactName”] = “foo”;
row[“AddressLine1”] = “foo”;
row[“AddressLine2”] = “foo”;
row[“City”] = “foo”;
row[“State”] = “foo”;
row[“Country”] = “foo”;
row[“ZipCode”] = “foo”;
row[“Mobile”] = “foo”;
row[“LandPhone”] = “foo”;
row[“Fax”] = “foo”;
row[“EmailId”] = “foo”;
return row;
}
var source =
{
datatype: “json”,
datafields:
[
{ name: ‘SupplierId’ },
{ name: ‘SupplierCode’, type: ‘string’ },
{ name: ‘SupplierName’, type: ‘string’ },
{ name: ‘ContactName’, type: ‘string’ },
{ name: ‘AltContactName’, type: ‘string’ },
{ name: ‘AddressLine1’, type: ‘string’ },
{ name: ‘AddressLine2’, type: ‘string’ },
{ name: ‘City’, type: ‘string’ },
{ name: ‘State’, type: ‘string’ },
{ name: ‘Country’, type: ‘string’ },
{ name: ‘ZipCode’, type: ‘string’ },
{ name: ‘Mobile’, type: ‘string’ },
{ name: ‘LandPhone’, type: ‘string’ },
{ name: ‘Fax’, type: ‘string’ },
{ name: ‘EmailId’, type: ‘string’ }
],
id: ‘SupplierId’,
url: ‘/Supplier/GetSuppliers’,
async: true,
addrow: function (rowid, rowdata, position, commit) {// synchronize with the server – send insert command
$.ajax
({
cache: false,
dataType: ‘json’,
url: ‘/Supplier/Add’,
data: rowdata,
type: “POST”,
async: false,
success: function (data, status, xhr) {
commit(true);
},
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: ‘/Supplier/Edit’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
alert(“entry saved!”);
console.log(xhr.rowdata);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(“Fails … “);
commit(false);
}
}
);
}
}
};
var dataAdapter = new $.jqx.dataAdapter(source);// initialize the input fields.
$(“#supplierId”).jqxInput({ theme: theme });
$(“#supplierCode”).jqxInput({ theme: theme });
$(“#supplierName”).jqxInput({ theme: theme });
$(“#contactName”).jqxInput({ theme: theme });
$(“#altContactName”).jqxInput({ theme: theme });
$(“#addressLine1”).jqxInput({ theme: theme });
$(“#addressLine2”).jqxInput({ theme: theme });
$(“#city”).jqxInput({ theme: theme });
$(“#state”).jqxInput({ theme: theme });
$(“#country”).jqxInput({ theme: theme });
$(“#zipCode”).jqxInput({ theme: theme });
$(“#mobile”).jqxInput({ theme: theme });
$(“#landPhone”).jqxInput({ theme: theme });
$(“#fax”).jqxInput({ theme: theme });
$(“#emailId”).jqxInput({ theme: theme });$(“#supplierId”).width(‘10%’);
$(“#supplierId”).height(‘3%’);$(“#supplierCode”).width(‘200%’);
$(“#supplierCode”).height(‘3%’);$(“#supplierName”).width(‘200%’);
$(“#supplierName”).height(‘3%’);$(“#contactName”).width(‘200%’);
$(“#contactName”).height(‘3%’);$(“#altContactName”).width(‘10%’);
$(“#altContactName”).height(‘3%’);$(“#addressLine1”).width(‘200%’);
$(“#addressLine1”).height(‘3%’);$(“#addressLine2”).width(‘200%’);
$(“#addressLine2”).height(‘3%’);$(“#city”).width(‘10%’);
$(“#city”).height(‘3%’);$(“#state”).width(‘200%’);
$(“#state”).height(‘3%’);$(“#country”).width(‘200%’);
$(“#country”).height(‘3%’);$(“#zipCode”).width(‘200%’);
$(“#zipCode”).height(‘3%’);$(“#mobile”).width(‘10%’);
$(“#mobile”).height(‘3%’);$(“#landPhone”).width(‘200%’);
$(“#landPhone”).height(‘3%’);$(“#fax”).width(‘200%’);
$(“#fax”).height(‘3%’);$(“#emailId”).width(‘200%’);
$(“#emailId”).height(‘3%’);// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: ‘30%’, resizable: false, theme: ‘ui-sunny’, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});$(“#addrowbutton”).jqxButton({ width: ‘4.5%’, height: 30, theme: ‘ui-sunny’ });
$(“#deleterowbutton”).jqxButton({ width: ‘4.5%’, height: 30, theme: ‘ui-sunny’ });$(“#Cancel”).jqxButton({ theme: ‘ui-sunny’, width: ‘32%’ });
$(“#Save”).jqxButton({ theme: ‘ui-sunny’, width: ‘32%’ });// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: ‘99%’,
height: 335,
source: dataAdapter,
selectionmode: ‘singlerow’,
theme: ‘ui-sunny’,
pageable: true,
sortable: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
enabletooltips: true,columns:
[
{
text: ‘Select’, width: ‘7%’, datafield: ‘select’, pinned: true, 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) + 110, y: parseInt(offset.top) + (-65) } });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#supplierId”).val(dataRecord.SupplierId);
$(“#supplierCode”).val(dataRecord.SupplierCode);
$(“#supplierName”).val(dataRecord.SupplierName);
$(“#contactName”).val(dataRecord.ContactName)
$(“#altContactName”).val(dataRecord.AltContactName);
$(“#addressLine1”).val(dataRecord.AddressLine1)
$(“#addressLine2”).val(dataRecord.AddressLine2);
$(“#city”).val(dataRecord.City)
$(“#state”).val(dataRecord.State);
$(“#country”).val(dataRecord.Country)
$(“#zipCode”).val(dataRecord.ZipCode);
$(“#mobile”).val(dataRecord.Mobile)
$(“#landPhone”).val(dataRecord.LandPhone)
$(“#fax”).val(dataRecord.Fax);
$(“#emailId”).val(dataRecord.EmailId)
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
},
{ text: ‘Id’, datafield: ‘SupplierId’, width: ‘5%’ },
{ text: ‘Code’, datafield: ‘SupplierCode’, width: ‘10%’ },
{ text: ‘Name’, datafield: ‘SupplierName’, width: ‘10%’ },
{ text: ‘Contact’, datafield: ‘ContactName’, width: ‘10%’ },
{ text: ‘Alt Contact’, datafield: ‘AltContactName’, width: ‘10%’ },
{ text: ‘Address’, datafield: ‘AddressLine1’, width: ‘10%’ },
{ text: ‘ ‘, datafield: ‘AddressLine2’, width: ‘10%’ },
{ text: ‘City’, datafield: ‘City’, width: ‘5%’ },
{ text: ‘State’, datafield: ‘State’, width: ‘10%’ },
{ text: ‘Country’, datafield: ‘Country’, width: ‘10%’ },
{ text: ‘ZipCode’, datafield: ‘ZipCode’, width: ‘10%’ },
{ text: ‘Mobile’, datafield: ‘Mobile’, width: ‘10%’ },
{ text: ‘Land Phone’, datafield: ‘LandPhone’, width: ‘10%’ },
{ text: ‘Fax’, datafield: ‘Fax’, width: ‘10%’ },
{ text: ‘EmailId’, datafield: ‘EmailId’, width: ‘10%’ }]
});// update row.
// create new row.
$(“#addrowbutton”).bind(‘click’, function () {
var datainformation = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var rowscount = datainformation.rowscount;
editrow = rowscount + 1;
id = rowscount + 1;
var datarow = generaterow(rowscount + 1);
$(“#jqxgrid”).jqxGrid(‘addrow’, (rowscount + 1), datarow, ‘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);
}
});$(‘#testForm’).jqxValidator({
rules: [
{ input: ‘#supplierCode’, message: ‘Supplier Code is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#supplierCode’, message: ‘Supplier Code must be between 3 and 10 characters!’, action: ‘keyup, focus’, rule: ‘length=3,10’ },
{ input: ‘#supplierName’, message: ‘Supplier Name is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#supplierName’, message: ‘Supplier Name must be between 5 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 5 and 50 characters!’, action: ‘keyup, focus’, rule: ‘length=5,50’ },
{ input: ‘#altContactName’, message: ‘Alternate Contact Name is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#altContactName’, message: ‘Altername Contact Name must be between 5 and 50 characters!’, action: ‘keyup, focus’, rule: ‘length=5,50’ },
{ input: ‘#addressLine1’, message: ‘Address Line1 is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#addressLine1’, message: ‘Address Line1 must be between 5 and 50 characters!’, action: ‘keyup, focus’, rule: ‘length=5,50’ },
{ input: ‘#city’, message: ‘City Name is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#city’, message: ‘City Name must be between 1 and 50 characters!’, action: ‘keyup, focus’, rule: ‘length=1,50’ },
{ input: ‘#state’, message: ‘State Name is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#state’, message: ‘State Name must be between 5 and 50 characters!’, action: ‘keyup, focus’, rule: ‘length=5,50’ },
{ input: ‘#country’, message: ‘Country Name is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#country’, message: ‘Country Name must be between 5 and 50 characters!’, action: ‘keyup, focus’, rule: ‘length=5,50’ },
{ input: ‘#zipCode’, message: ‘ZipCode is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#zipCode’, message: ‘ZipCode must be between 5 and 10 characters!’, action: ‘keyup, focus’, rule: ‘length=5,10’ },
{ input: ‘#mobile’, message: ‘Mobile No is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#mobile’, message: ‘Mobile No must be between 10 and 10 characters!’, action: ‘keyup, focus’, rule: ‘length=10,10’ },
{ input: ‘#landPhone’, message: ‘Land Phone No is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#landPhone’, message: ‘land Phone No must be between 10 and 10 characters!’, action: ‘keyup, focus’, rule: ‘length=10,10’ },
{ input: ‘#fax’, message: ‘Fax No is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#fax’, message: ‘Fax No must be between 10 and 10 characters!’, action: ‘keyup, focus’, rule: ‘length=10,10’ },
{ input: ‘#emailId’, message: ‘Email Id is required!’, action: ‘keyup, blur’, rule: ‘required’ }
]
});$(‘#Save’).bind(‘click’, function () {
$(‘#testForm’).jqxValidator(‘validate’);
});// update the edited row when the user clicks the ‘Save’ button.
var result = false;
$(“#Save”).click(function () {
var result = $(‘#testForm’).jqxValidator(‘validate’);
if (result == true) {
if (editrow >= 0) {
// alert(“dasda”);
var row =
{
SupplierId: $(“#supplierId”).val(), SupplierCode: $(“#supplierCode”).val(), SupplierName: $(“#supplierName”).val(),
ContactName: $(“#contactName”).val(), AltContactNameName: $(“#altContactName”).val(), AddressLine1: $(“#addressLine1”).val(),
AddressLine2: $(“#addressLine2”).val(), City: $(“#city”).val(), State: $(“#state”).val(), Country: $(“#country”).val(),
ZipCode: $(“#zipCode”).val(), Mobile: $(“#mobile”).val(), LandPhone: $(“#landPhone”).val(), Fax: $(“#fax”).val(),
EmailId: $(“#emailId”).val(),};
}
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
})$(“#popupWindow”).on(‘open’, function () {
// $(“#supplierId”).jqxInput(‘selectAll’);
})
}
var initGrid2 = function () {
var source1 =
{
datatype: “csv”,
datafields: [
{ name: ‘SupplierId1’ },
{ name: ‘SupplierCode1’ },
{ name: ‘SupplierName1’ }
],
url: ‘../nasdaq_vs_sp5000.txt’
};
var dataAdapter1 = new $.jqx.dataAdapter(source1, { async: false, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source1.url + ‘” : ‘ + error); } });
$(“#jqxGrid2”).jqxGrid(
{
width: ‘100%’,
height: ‘115%’,
source: dataAdapter1,
columns: [
{ text: ‘ID1’, datafield: ‘SupplierId1’, cellsformat: ‘d’, width: 250 },
{ text: ‘Code1’, datafield: ‘SupplierCode1’, width: 100 },
{ text: ‘Name1’, datafield: ‘SupplierName1’ }
]
});
}
var initGrid3 = function () {
var source2 =
{
datatype: “csv”,
datafields: [
{ name: ‘SupplierId2’ },
{ name: ‘SupplierCode2’ },
{ name: ‘SupplierName2’ }
],
url: ‘../sampledata/nasdaq_vs_sp50000.txt’
};
var dataAdapter2 = new $.jqx.dataAdapter(source2, { async: false, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source2.url + ‘” : ‘ + error); } });
$(“#jqxGrid3”).jqxGrid(
{
width: ‘100%’,
height: ‘95%’,
source: dataAdapter2,
columns: [
{ text: ‘ID2’, datafield: ‘SupplierId2’, cellsformat: ‘d’, width: 250 },
{ text: ‘Code2’, datafield: ‘SupplierCode2’, width: 150 },
{ text: ‘Name2’, datafield: ‘SupplierName2’ }
]
});
}
// init widgets.var initWidgets = function (tab) {
switch (tab) {
case 0:
initGrid1();
break;
case 1:
initGrid2();
break;
case 2:
initGrid3();
break;
}
}
$(‘#jqxTabs’).jqxTabs({ width: ‘100%’, height: 400, initTabContent: initWidgets, theme: ‘ui-sunny’, autoHeight: false, showCloseButtons: true, position: “top”, selectionTracker: true, animationType: ‘fade’ });});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=’jqxTabs’>-
<li style=”margin-left: 50px; height: 10px;”>
<div style=”height: 20px; margin-top: 5px;”>
<div style=”margin-left: 4px; vertical-align: middle; text-align: center; float: left;”>
Contacts
</div>
</div><li style=”margin-left: 15px; height: 10px;”>
<div style=”height: 20px; margin-top: 5px;”>
<div style=”margin-left: 4px; vertical-align: middle; text-align: center; float: left;”>
Commercials
</div>
</div><li style=”margin-left: 15px; height: 10px;”>
<div style=”height: 20px; margin-top: 5px;”>
<div style=”margin-left: 4px; vertical-align: middle; text-align: center; float: left;”>
Rating
</div>
</div><div>
<input id=”addrowbutton” type=”button” style=”margin-left: 1%;” value=”+” title=”Click to add row” />
<input id=”deleterowbutton” type=”button” value=”-” title=”Click to remove row” />
<div id=”jqxgrid” style=”overflow: hidden;”></div>
<div id=”popupWindow” style=”overflow: hidden;”>
<div>
<form id=”testForm” >
<table>
<tr>
<td style=”text-align: right”>Supplier:</td>
<td style=”text-align: left”>
<input type=”text” id=”supplierName” class=”text-input” placeholder=”Category description/ name” autofocus required />
</td>
</tr>
<tr>
<td style=”text-align: right”></td>
<td style=”padding-top: 1%; text-align: right”>
<input style=”margin-right: 1%;” type=”button” id=”Save” value=”Save” />
<input id=”Cancel” type=”button” value=”Cancel” />
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div id=”jqxGrid2″ style=”overflow: hidden;”></div>
<div id=”jqxGrid3″ style=”overflow: hidden;”></div>
</div>
</div>
</body>
</html>` -
AuthorPosts