jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tabs › Tabs – with Grid and Popup window › Reply To: Tabs – with Grid and Popup window
<!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>