jQWidgets Forums
jQuery UI Widgets › Forums › Grid › 1 Grid Under Tab Not Displayed
Tagged: grid, javascript grid, jquery grid
This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 1 month ago.
-
Author
-
Hi,
I have Implemented ‘Tab’Interface, and have 2 grids (with popup edit) accordingly.
While 1st Tab works perfectly, 2nd Tab – upon clicking the said tab doesn’t display the Grid , but Displays the form which
is part of popup window. Please Help.I have pasted my code below.
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’>- Supplier Contact
- Suplier Business
<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,
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,
Jqwidgets ver 3.7
Thanks,
Keshavan
Hi Keshavan,
Your HTML Structure is incorrect. You shouldn’t have other HTML within the jqxGrid’s DIV tag. I would suggest you to look at the Tabs Integration demo which illustrates how to use Grids within Tabs correctly.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hello Peter Stoev,
In that case where will I define my HTML code for the Popup window for the Grid ?.
Thanks,
Keshavan
Hi Keshavan,
The Popup Window is a normal jqxWindow which you display on the page. It’s not part of jqxGrid. See the Popup Editing demo where such window is used with jqxGrid.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.