jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tabs › Tabs – with Grid and Popup window
This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 10 years, 7 months ago.
-
Author
-
Hi,
Not able to select tab (clicking on TAB results in NO action) when i have a Popup window and a FORM as part of my GRID row edit.
It works fine only when i don’t have the popupWindow and testForm as part of my HTML in <body>.Below is my FULL code.
Please help.
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/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);// 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><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;”>
Supplier Products
</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;”>
Suppliers by Product
</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;”>
Order – Suppliers
</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”>
<div>
<form id=”testForm” action=”./”>
<table>
<tr>
<td style=”text-align: right”>Id:</td>
<td style=”text-align: left”>
<div id=”supplierId”></div>
</td>
</tr>
<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>`
Hello Keshavan,
Please re-post your code and format it by selecting it and pressing the
codebutton in the toolbar. You may alternatively provide a JSFiddle example demonstrating your issue.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi 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>`<!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>Hi Keshavan,
Some of the form elements you try to initialize widgets from, such as supplierId, does not seem to be present in your HTML code. Please also make sure you are using the latest version of jQWidgets (3.5.0).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.