jQWidgets Forums
jQuery UI Widgets › Forums › TreeGrid › jqxTreeGrid empty after popup window
This topic contains 6 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 8 months ago.
-
Author
-
Hi
I am using a tabbed form with three different treegrids, one on each tab. In order to edit information behind the records in the treegrids, I want to pull up a popup window and edit a number of fields. All three treegrids are filled with data after the page is loaded.
When I click on the button to invoke the popup window, I can close the popup after editing, but what happens is that the other treegrids are emptied. I tried to use grid.dataBind afterwards, but the data are not coming back.I guess I am doing something wrong, but I just don’t see it.
Hi AneVisser,
How do you bind these TreeGrids? Could you provide jsfiddle.net demo which demonstrates your scenario?
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter, thanks
I don’t get the example to work in jsFiddle, but what I did was as follows: I created the example, and put it in the directory jqwidgets\demos\jqxtreegrid, and ran it from there.
You will see the following: After you loaded the page, there are three tabs. If you click on each tab, there is a tree grid with data. If you go to one of the tabs, let’s say ‘Supplements’, and click on the ‘add’ button (WITHOUT first selecting an element in the grid), you can click ‘cancel’ on the dialog, and then check the data on the other two tabs: they have disappeared.
Now, if you reload the page, and click on the ‘edit’ button underneath each of the tabs, and THEN select an elemnt in the grid and edit it, all data in the other tabs remain.
The question is: why did they disappear? The code is below:<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script><link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.darkblue.css” type=”text/css” />
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtreegrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttongroup.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxslider.js”></script>
<script type=”text/javascript” src=”../../sampledata/generatedata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxvalidator.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmaskedinput.js”></script><script type=”text/javascript”>
var dm_theme = ‘darkblue’;
</script>
<style type=”text/css”>
td { height: 12px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}.jqx-cell {
min-height:12px;
height:12px;
padding:0px 1px 2px 1px;
overflow: hidden;
}
</style></head>
<body><div id=”maincontent”>
<div id=”FFcontainer”>
<div id=”FFcontent”><style type=”text/css”>
.inputline {
padding:3px;
font-family: Verdana;
font-size: 12px;
}
#youngstock_table , #group_table {
font-family: Verdana;
font-size: 12px;
}
.inputfield {
float:left;
}
.fieldlabel {
float:left;
width:400px;
text-align:right;
padding-top:4px;
padding-right:10px;
}
.unit {
width:auto;
padding-top:4px;
float:left;
padding-left:10px;
}
.newline {
clear:both;
}
.milkpaycomponent, .milkpaylabel {
float:left;
margin-right:4px;
}
.milkpaylabel {
width:50px;
padding:1px;
text-align:center;
}.text-input
{
height: 21px;
width: 150px;
}
.input-table
{
margin-top: 10px;
margin-bottom: 10px;
margin-left:auto;
margin-right: auto;
width:auto;
}
.input-table td,
.input-table tr
{
margin: 2px;
padding: 2px;
border-spacing: 0px;
border-collapse: collapse;
font-family: Verdana;
font-size: 12px;
}
.numericInput {
margin-bottom:4px;
padding-bottom:2px;
}
.titletag {
text-align:right;
}</style>
<script type=”text/javascript”>
var maxyoungstockgroups = 5;
var heifergroupsize = [];
for (var i = 0; i<maxyoungstockgroups; i++) {
heifergroupsize[i] = 0;
}
var maxproductiongroups = 6;
var dry = maxproductiongroups;
var numparitygroups = 6;
var productiongroupsize = [];
for(var i=0; i<maxproductiongroups + 1; i++) {
var parities = []
for(var j=0; j<numparitygroups; j++) {
parities[j] = 0;
}
productiongroupsize[i] = parities;
}var mincalvint = 365;
var maxcalvint = 500;
var mindryperiod = 60;
var maxdryperiod = 120;$(document).ready(function () {
$(‘#jqxTabs’).jqxTabs({ width: ‘90%’, height: 600, position: ‘top’, animationType: ‘fade’, selectionTracker: true, theme: dm_theme});var supplementdata = [
{
“id”: “0”, “ingcode”: “”, “cost”: “”, “isused”: “true”,
“children”:
[
{ “id”: “1”, “ingcode”: “APPLEPOMACE”, “cost”: “55”, “isused”: “0” }
, { “id”: “2”, “ingcode”: “BARLEY GRAIN”, “cost”: “410”, “isused”: “0” }
, { “id”: “3”, “ingcode”: “BREWERS GRAINS”, “cost”: “100”, “isused”: “1” }
, { “id”: “4”, “ingcode”: “BROLL”, “cost”: “350”, “isused”: “0” }
, { “id”: “5”, “ingcode”: “CARROTS”, “cost”: “60”, “isused”: “0” }
, { “id”: “6”, “ingcode”: “CASAVA”, “cost”: “480”, “isused”: “1” }
, { “id”: “8”, “ingcode”: “GRAPEPULP”, “cost”: “45”, “isused”: “0” }
, { “id”: “13”, “ingcode”: “KIWIFRUIT HARD”, “cost”: “75”, “isused”: “0” }
, { “id”: “14”, “ingcode”: “KIWIFRUIT RIPE”, “cost”: “75”, “isused”: “0” }
, { “id”: “18”, “ingcode”: “MOLASSES”, “cost”: “435”, “isused”: “1” }
, { “id”: “19”, “ingcode”: “ONIONS”, “cost”: “25”, “isused”: “0” }
, { “id”: “20”, “ingcode”: “PALM KERNEL”, “cost”: “385”, “isused”: “1” }
, { “id”: “23”, “ingcode”: “POTATO RAW”, “cost”: “75”, “isused”: “0” }
, { “id”: “25”, “ingcode”: “RICE BRAN”, “cost”: “380”, “isused”: “0” }
, { “id”: “26”, “ingcode”: “SEEDS”, “cost”: “75”, “isused”: “0” }
, { “id”: “27”, “ingcode”: “SOYBEAN MEAL”, “cost”: “510”, “isused”: “0” }
, { “id”: “28”, “ingcode”: “SQUASH”, “cost”: “70”, “isused”: “0” }
, { “id”: “30”, “ingcode”: “TOMATO PULPS”, “cost”: “344”, “isused”: “0” }
, { “id”: “32”, “ingcode”: “WHEAT GRAIN”, “cost”: “410”, “isused”: “0” }
]
}
];var supplements =
{
dataType: “json”,
dataFields: [
{ name: “ingcode”, type: “string” },
{ name: “cost”, type: “number” },
{ name: “id”, type: “number” },
{ name: “children”, type: “array” },
{ name: “isused”, type: “boolean” }
],
hierarchy:
{
root: “children”
},
localData: supplementdata,
id: “id”
};var dataAdapterSupplements = new $.jqx.dataAdapter(supplements, {
loadComplete: function () {
}
});$(“#SupplementsGrid”).jqxTreeGrid(
{
width: 800,
checkboxes: function (rowKey, dataRow) {
var level = dataRow.level;
if (level == 1) {
return true;
}
else {
return false;
}
},
source: dataAdapterSupplements,
altrows: true,
selectionMode: “singleRow”,
theme: dm_theme,
autoRowHeight: false,
ready: function () {
// Expand rows with ID = 1, 2 and 7
$(“#SupplementsGrid”).jqxTreeGrid(‘expandRow’, 0);
},
editable: true,
columns: [
{ text: ‘Consider’, editable: false, dataField: ‘id’, width: 100 },
{ text: ‘Ingredient’, editable: false, dataField: ‘ingcode’, width: 450 },
{
text: ‘Price per tonne’, align: ‘right’, cellsAlign: ‘right’, cellsFormat: ‘c0’, columnType: “template”, dataField: ‘cost’,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.jqxNumberInput({ min: 0, max: 12500, inputMode: ‘simple’, spinButtons: false, decimalDigits: 0, width: width, height: height });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
var value = parseInt(cellvalue);
if (isNaN(value)) value = 0;
editor.jqxNumberInput(‘val’, value);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}
}
]
});
var rows = $(“#SupplementsGrid”).jqxTreeGrid(‘getRows’);
var setUsedSupplements = function(rows)
{
for(var i = 0; i < rows.length; i++)
{
if (rows[i].level == 1) {
rows[i].checked = rows[i].isused;
}
if (rows[i].records)
{
setUsedSupplements(rows[i].records);
}
}
};
setUsedSupplements(rows);
$(“#SupplementsButtons”).jqxButtonGroup({ mode: ‘default’, theme: dm_theme });
$(“#SupplementsButtons”).on(‘buttonclick’, function (event) {
var clickedButton = event.args.button;
var selection = $(“#SupplementsGrid”).jqxTreeGrid(‘getSelection’);
var rowData = selection[0];
switch (clickedButton[0].id) {
case “EditSupplement” :
$(“#editHeader”).html(rowData.ingcode);
$(“#editWindow”).jqxWindow(‘open’);
break;
case “DeleteSupplement” :
$(“#ingredientToDelete”).html(rowData.ingcode);
$(“#deleteWindow”).jqxWindow(‘open’);
break;
case “AddSupplement” :
$(“#addWindow”).jqxWindow(‘open’);
break;
}});
var feedbunkerdata = [
{
“id”: “0”, “ingcode”: “”, “cost”: “”, “instock”: “0”, “startmonth”: “1”, “endmonth”: “12”, “canpurchase”: “true”, “price” : “123”,
“children”:
[
{ “id”: “9”,
“ingcode”: “GRASS HAY HIGH QLTY”,
“cost”: “180”,
“instock”: “50”,
“startmonth”: “8”,
“endmonth”: “12”,
“canpurchase”: “0”,
“price” : “250” }
, { “id”: “10”,
“ingcode”: “GRASS HAY POOR QLTY”,
“cost”: “160”,
“instock”: “0”,
“startmonth”: “12”,
“endmonth”: “1”,
“canpurchase”: “0”,
“price” : “0” }
, { “id”: “11”,
“ingcode”: “GRASS SILAGE MATURE”,
“cost”: “79”,
“instock”: “0”,
“startmonth”: “12”,
“endmonth”: “1”,
“canpurchase”: “0”,
“price” : “0” }
, { “id”: “12”,
“ingcode”: “GRASS SILAGE YOUNG”,
“cost”: “64”,
“instock”: “0”,
“startmonth”: “12”,
“endmonth”: “1”,
“canpurchase”: “0”,
“price” : “0” }
, { “id”: “15”,
“ingcode”: “LUCERNE HAY”,
“cost”: “400”,
“instock”: “0”,
“startmonth”: “12”,
“endmonth”: “1”,
“canpurchase”: “0”,
“price” : “0” }
, { “id”: “16”,
“ingcode”: “MAIZE SILAGE HIGH GRAIN”,
“cost”: “63”,
“instock”: “0”,
“startmonth”: “12”,
“endmonth”: “1”,
“canpurchase”: “0”,
“price” : “0” }
, { “id”: “17”,
“ingcode”: “MAIZE SILAGE LOW GRAIN”,
“cost”: “63”,
“instock”: “0”,
“startmonth”: “12”,
“endmonth”: “1”,
“canpurchase”: “0”,
“price” : “0” }
, { “id”: “33”,
“ingcode”: “WHEAT STRAW”,
“cost”: “120”,
“instock”: “0”,
“startmonth”: “12”,
“endmonth”: “1”,
“canpurchase”: “0”,
“price” : “0” }
]
}
];var feedbunkers =
{
dataType: “json”,
dataFields: [
{ name: “ingcode”, type: “string” },
{ name: “cost”, type: “number” },
{ name: “instock”, type: “number” },
{ name: “startmonth”, type: “number” },
{ name: “endmonth”, type: “number” },
{ name: “price”, type: “number” },
{ name: “id”, type: “number” },
{ name: “children”, type: “array” },
{ name: “canpurchase”, type: “boolean” }
],
hierarchy:
{
root: “children”
},
localData: feedbunkerdata,
id: “id”
};var dataAdapterFeedbunkers = new $.jqx.dataAdapter(feedbunkers, {
loadComplete: function () {
}
});$(“#FeedbunkersGrid”).jqxTreeGrid(
{
width: 820,
checkboxes: function (rowKey, dataRow) {
var level = dataRow.level;
if (level == 1) {
return true;
}
else {
return false;
}
},
source: dataAdapterFeedbunkers,
altrows: true,
selectionMode: “singleRow”,
theme: dm_theme,
autoRowHeight: false,
ready: function () {
// Expand rows with ID = 1, 2 and 7
$(“#FeedbunkersGrid”).jqxTreeGrid(‘expandRow’, 0);
},
editable: true,
columns: [
{ text: ‘Can purchase’, editable: false, dataField: ‘id’, width: 100 },
{ text: ‘Forage’, editable: false, dataField: ‘ingcode’, width: 290 },
{
text: ‘Tonne in stock’, align: ‘right’, cellsAlign: ‘right’, cellsFormat: ‘d’, columnType: “template”, dataField: ‘instock’, width: 100,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.jqxNumberInput({ min: 0, max: 12500, inputMode: ‘simple’, spinButtons: false, decimalDigits: 0, width: width, height: height });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
var value = parseInt(cellvalue);
if (isNaN(value)) value = 0;
editor.jqxNumberInput(‘val’, value);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}
},
{
text: ‘Start feeding’, dataField: ‘startmonth’, width: 100, columnType: “template”,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.jqxDropDownList({ autoDropDownHeight: true, source: months, displayMember: ‘text’, valueMember: ‘value’, width: ‘100%’, height: ‘100%’ });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
editor.jqxDropDownList(‘selectItem’, cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}
},
{
text: ‘End feeding’, dataField: ‘endmonth’, width: 100, columnType: “template”,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.jqxDropDownList({ autoDropDownHeight: true, source: months, displayMember: ‘text’, valueMember: ‘value’, width: ‘100%’, height: ‘100%’ });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
editor.jqxDropDownList(‘selectItem’, cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}
},
{
text: ‘Price per tonne’, align: ‘right’, cellsAlign: ‘right’, cellsFormat: ‘c0’, columnType: “template”, dataField: ‘cost’,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.jqxNumberInput({ min: 0, max: 12500, inputMode: ‘simple’, spinButtons: false, decimalDigits: 0, width: width, height: height });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
var value = parseInt(cellvalue);
if (isNaN(value)) value = 0;
editor.jqxNumberInput(‘val’, value);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}
}
]
});
var rows = $(“#FeedbunkersGrid”).jqxTreeGrid(‘getRows’);
var setUsedFeedbunkers = function(rows)
{
for(var i = 0; i < rows.length; i++)
{
if (rows[i].level == 1) {
rows[i].checked = rows[i].canpurchase;
}
if (rows[i].records)
{
setUsedFeedbunkers(rows[i].records);
}
}
};
setUsedFeedbunkers(rows);
$(“#FeedbunkerButtons”).jqxButtonGroup({ mode: ‘default’, theme: dm_theme });
$(“#FeedbunkerButtons”).on(‘buttonclick’, function (event) {
var clickedButton = event.args.button;
var selection = $(“#FeedbunkersGrid”).jqxTreeGrid(‘getSelection’);
var rowData = selection[0];
switch (clickedButton[0].id) {
case “EditFeedbunker” :
$(“#editHeader”).html(rowData.ingcode);
$(“#editWindow”).jqxWindow(‘open’);
break;
case “DeleteFeedbunker” :
$(“#ingredientToDelete”).html(rowData.ingcode);
$(“#deleteWindow”).jqxWindow(‘open’);
break;
case “AddFeedbunker” :
$(“#addWindow”).jqxWindow(‘open’);
break;
}
});var mineralsdata = [
{
“id”: “0”, “ingcode”: “”, “cost”: “”, “isused”: “true”,
“children”:
[
{ “id”: “34”, “ingcode”: “AQUATRACE5”, “cost”: “285”, “isused”: “0” }
, { “id”: “35”, “ingcode”: “HITRACE5”, “cost”: “185”, “isused”: “0” }
, { “id”: “36”, “ingcode”: “NMMACMAIZE”, “cost”: “35”, “isused”: “0” }
, { “id”: “37”, “ingcode”: “NMMAIZEBAL”, “cost”: “41”, “isused”: “0” }
, { “id”: “38”, “ingcode”: “NUTRIPLEX5”, “cost”: “399”, “isused”: “0” }
]
}
];var minerals =
{
dataType: “json”,
dataFields: [
{ name: “ingcode”, type: “string” },
{ name: “cost”, type: “number” },
{ name: “id”, type: “number” },
{ name: “children”, type: “array” },
{ name: “isused”, type: “boolean” }
],
hierarchy:
{
root: “children”
},
localData: mineralsdata,
id: “id”
};var dataAdapterMinerals = new $.jqx.dataAdapter(minerals, {
loadComplete: function () {
}
});$(“#MineralsGrid”).jqxTreeGrid(
{
width: 800,
checkboxes: function (rowKey, dataRow) {
var level = dataRow.level;
if (level == 1) {
return true;
}
else {
return false;
}
},
source: dataAdapterMinerals,
altrows: true,
selectionMode: “singleRow”,
theme: dm_theme,
autoRowHeight: false,
ready: function () {
// Expand rows with ID = 1, 2 and 7
$(“#MineralsGrid”).jqxTreeGrid(‘expandRow’, 0);
},
editable: true,
columns: [
{ text: ‘Consider’, editable: false, dataField: ‘id’, width: 100 },
{ text: ‘Ingredient’, editable: false, dataField: ‘ingcode’, width: 450 },
{
text: ‘Price per 25 kg’, align: ‘right’, cellsAlign: ‘right’, cellsFormat: ‘c0’, columnType: “template”, dataField: ‘cost’,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.jqxNumberInput({ min: 0, max: 12500, inputMode: ‘simple’, spinButtons: false, decimalDigits: 0, width: width, height: height });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
var value = parseInt(cellvalue);
if (isNaN(value)) value = 0;
editor.jqxNumberInput(‘val’, value);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}
}
]
});
var rows = $(“#MineralsGrid”).jqxTreeGrid(‘getRows’);
var setUsedMinerals = function(rows)
{
for(var i = 0; i < rows.length; i++)
{
if (rows[i].level == 1) {
rows[i].checked = rows[i].isused;
}
if (rows[i].records)
{
setUsedMinerals(rows[i].records);
}
}
};
setUsedMinerals(rows);
$(“#MineralsButtons”).jqxButtonGroup({ mode: ‘default’, theme: dm_theme });
$(“#MineralsButtons”).on(‘buttonclick’, function (event) {
var clickedButton = event.args.button;
var selection = $(“#MineralsGrid”).jqxTreeGrid(‘getSelection’);
var rowData = selection[0];
switch (clickedButton[0].id) {
case “EditMineral” :
$(“#editHeader”).html(rowData.ingcode);
$(“#editWindow”).jqxWindow(‘open’);
break;
case “DeleteMineral” :
$(“#ingredientToDelete”).html(rowData.ingcode);
$(“#deleteWindow”).jqxWindow(‘open’);
break;
case “AddMineral” :
$(“#addWindow”).jqxWindow(‘open’);
break;
}
});$(“#editWindow”).jqxWindow({ width: 400, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#CancelEdit”), modalOpacity: 0.01, theme: dm_theme });
$(“#CancelEdit”).jqxButton({ theme: dm_theme });
$(“#SaveEdit”).jqxButton({ theme: dm_theme });
$(“#SaveEdit”).click(function () {
$(“#editWindow”).jqxWindow(‘hide’);
});$(“#CancelDelete”).jqxButton({ theme: dm_theme });
$(“#ConfirmDelete”).jqxButton({ theme: dm_theme });
$(“#deleteWindow”).jqxWindow({ width: 400, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#CancelDelete”), modalOpacity: 0.01, theme: dm_theme });$(“#CancelAdd”).jqxButton({ theme: dm_theme });
$(“#ConfirmAdd”).jqxButton({ theme: dm_theme });
$(“#addWindow”).jqxWindow({ width: 400, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#CancelAdd”), modalOpacity: 0.01, theme: dm_theme });});
</script><form method=”POST” name=”form” id=”form” ENCTYPE=”multipart/form-data”>
<div id=’jqxTabs’>-
<li style=”margin-left: 30px;”>Supplements
- Storage
- Minerals
<div>
<div style=”height:30px”></div>
<div id=’SupplementsButtons’ style=”margin: 6px;”>
<button style=”padding:4px 16px;” id=”AddSupplement”>Add</button>
<button style=”padding:4px 16px;” id=”EditSupplement”>Edit</button>
<button style=”padding:4px 16px;” id=”DeleteSupplement”>Delete</button>
</div>
<div id=”SupplementsGrid” name=”SupplementsGrid”></div>
</div>
<div>
<div style=”height:30px”></div>
<div id=’FeedbunkerButtons’ style=”margin: 6px;”>
<button style=”padding:4px 16px;” id=”AddFeedbunker”>Add</button>
<button style=”padding:4px 16px;” id=”EditFeedbunker”>Edit</button>
<button style=”padding:4px 16px;” id=”DeleteFeedbunker”>Delete</button>
</div>
<div id=”FeedbunkersGrid” name=”FeedbunkersGrid”></div>
</div>
<div>
<div style=”height:30px”></div>
<div id=’MineralsButtons’ style=”margin: 6px;”>
<button style=”padding:4px 16px;” id=”AddMineral”>Add</button>
<button style=”padding:4px 16px;” id=”EditMineral”>Edit</button>
<button style=”padding:4px 16px;” id=”DeleteMineral”>Delete</button>
</div>
<div id=”MineralsGrid” name=”MineralsGrid”></div>
</div>
</div></form>
<div id=”editWindow”>
<div id=”editHeader”>Edit</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”SaveEdit” value=”Save” /><input id=”CancelEdit” type=”button” value=”Cancel” /></td>
</tr>
</table>
</div>
</div><div id=”deleteWindow”>
<div id=”deleteHeader”>Delete</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td colspan=”2″ align=”right”>Please confirm to delete <span id=”ingredientToDelete”></span></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”ConfirmDelete” value=”Delete” /><input id=”CancelDelete” type=”button” value=”Cancel” /></td>
</tr>
</table>
</div>
</div><div id=”addWindow”>
<div id=”addHeader”>Add</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td colspan=”2″ align=”right”>Please confirm to add </td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”ConfirmAdd” value=”Add” /><input id=”CancelAdd” type=”button” value=”Cancel” /></td>
</tr>
</table>
</div>
</div>
</div>
</div></div>
</body>
</html>Hi AneVisser,
Something important which I found missing in this code is the initialization of the tabs function – initTabContent where each widget within the tab should be created. I updated your code and you can find it below:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.darkblue.css" type="text/css" /> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttongroup.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script> <script type="text/javascript" src="../../sampledata/generatedata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script> <script type="text/javascript"> var dm_theme = 'darkblue'; </script> <style type="text/css"> td { height: 12px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .jqx-cell { min-height:12px; height:12px; padding:0px 1px 2px 1px; overflow: hidden; } </style> </head> <body> <div id="maincontent"> <div id="FFcontainer"> <div id="FFcontent"> <style type="text/css"> .inputline { padding:3px; font-family: Verdana; font-size: 12px; } #youngstock_table , #group_table { font-family: Verdana; font-size: 12px; } .inputfield { float:left; } .fieldlabel { float:left; width:400px; text-align:right; padding-top:4px; padding-right:10px; } .unit { width:auto; padding-top:4px; float:left; padding-left:10px; } .newline { clear:both; } .milkpaycomponent, .milkpaylabel { float:left; margin-right:4px; } .milkpaylabel { width:50px; padding:1px; text-align:center; } .text-input { height: 21px; width: 150px; } .input-table { margin-top: 10px; margin-bottom: 10px; margin-left:auto; margin-right: auto; width:auto; } .input-table td, .input-table tr { margin: 2px; padding: 2px; border-spacing: 0px; border-collapse: collapse; font-family: Verdana; font-size: 12px; } .numericInput { margin-bottom:4px; padding-bottom:2px; } .titletag { text-align:right; } </style> <script type="text/javascript"> var maxyoungstockgroups = 5; var heifergroupsize = []; for (var i = 0; i<maxyoungstockgroups; i++) { heifergroupsize[i] = 0; } var maxproductiongroups = 6; var dry = maxproductiongroups; var numparitygroups = 6; var productiongroupsize = []; for(var i=0; i<maxproductiongroups + 1; i++) { var parities = [] for(var j=0; j<numparitygroups; j++) { parities[j] = 0; } productiongroupsize[i] = parities; } var mincalvint = 365; var maxcalvint = 500; var mindryperiod = 60; var maxdryperiod = 120; $(document).ready(function () { $('#jqxTabs').jqxTabs({ width: '90%', height: 600, position: 'top', animationType: 'fade', selectionTracker: true, theme: dm_theme, initTabContent: function (tab) { switch (tab) { case 0: var supplementdata = [ { "id": "0", "ingcode": "", "cost": "", "isused": "true", "children": [ { "id": "1", "ingcode": "APPLEPOMACE", "cost": "55", "isused": "0" } , { "id": "2", "ingcode": "BARLEY GRAIN", "cost": "410", "isused": "0" } , { "id": "3", "ingcode": "BREWERS GRAINS", "cost": "100", "isused": "1" } , { "id": "4", "ingcode": "BROLL", "cost": "350", "isused": "0" } , { "id": "5", "ingcode": "CARROTS", "cost": "60", "isused": "0" } , { "id": "6", "ingcode": "CASAVA", "cost": "480", "isused": "1" } , { "id": "8", "ingcode": "GRAPEPULP", "cost": "45", "isused": "0" } , { "id": "13", "ingcode": "KIWIFRUIT HARD", "cost": "75", "isused": "0" } , { "id": "14", "ingcode": "KIWIFRUIT RIPE", "cost": "75", "isused": "0" } , { "id": "18", "ingcode": "MOLASSES", "cost": "435", "isused": "1" } , { "id": "19", "ingcode": "ONIONS", "cost": "25", "isused": "0" } , { "id": "20", "ingcode": "PALM KERNEL", "cost": "385", "isused": "1" } , { "id": "23", "ingcode": "POTATO RAW", "cost": "75", "isused": "0" } , { "id": "25", "ingcode": "RICE BRAN", "cost": "380", "isused": "0" } , { "id": "26", "ingcode": "SEEDS", "cost": "75", "isused": "0" } , { "id": "27", "ingcode": "SOYBEAN MEAL", "cost": "510", "isused": "0" } , { "id": "28", "ingcode": "SQUASH", "cost": "70", "isused": "0" } , { "id": "30", "ingcode": "TOMATO PULPS", "cost": "344", "isused": "0" } , { "id": "32", "ingcode": "WHEAT GRAIN", "cost": "410", "isused": "0" } ] } ]; var supplements = { dataType: "json", dataFields: [ { name: "ingcode", type: "string" }, { name: "cost", type: "number" }, { name: "id", type: "number" }, { name: "children", type: "array" }, { name: "isused", type: "boolean" } ], hierarchy: { root: "children" }, localData: supplementdata, id: "id" }; var dataAdapterSupplements = new $.jqx.dataAdapter(supplements, { loadComplete: function () { } }); $("#SupplementsGrid").jqxTreeGrid( { width: 800, checkboxes: function (rowKey, dataRow) { var level = dataRow.level; if (level == 1) { return true; } else { return false; } }, source: dataAdapterSupplements, altrows: true, selectionMode: "singleRow", theme: dm_theme, autoRowHeight: false, ready: function () { // Expand rows with ID = 1, 2 and 7 $("#SupplementsGrid").jqxTreeGrid('expandRow', 0); }, editable: true, columns: [ { text: 'Consider', editable: false, dataField: 'id', width: 100 }, { text: 'Ingredient', editable: false, dataField: 'ingcode', width: 450 }, { text: 'Price per tonne', align: 'right', cellsAlign: 'right', cellsFormat: 'c0', columnType: "template", dataField: 'cost', createEditor: function (row, cellvalue, editor, cellText, width, height) { // construct the editor. editor.jqxNumberInput({ min: 0, max: 12500, inputMode: 'simple', spinButtons: false, decimalDigits: 0, width: width, height: height }); }, initEditor: function (row, cellvalue, editor, celltext, width, height) { // set the editor's current value. The callback is called each time the editor is displayed. var value = parseInt(cellvalue); if (isNaN(value)) value = 0; editor.jqxNumberInput('val', value); }, getEditorValue: function (row, cellvalue, editor) { // return the editor's value. return editor.val(); } } ] }); var rows = $("#SupplementsGrid").jqxTreeGrid('getRows'); var setUsedSupplements = function (rows) { for (var i = 0; i < rows.length; i++) { if (rows[i].level == 1) { rows[i].checked = rows[i].isused; } if (rows[i].records) { setUsedSupplements(rows[i].records); } } }; setUsedSupplements(rows); $("#SupplementsButtons").jqxButtonGroup({ mode: 'default', theme: dm_theme }); $("#SupplementsButtons").on('buttonclick', function (event) { var clickedButton = event.args.button; var selection = $("#SupplementsGrid").jqxTreeGrid('getSelection'); var rowData = selection[0]; switch (clickedButton[0].id) { case "EditSupplement": $("#editHeader").html(rowData.ingcode); $("#editWindow").jqxWindow('open'); break; case "DeleteSupplement": $("#ingredientToDelete").html(rowData.ingcode); $("#deleteWindow").jqxWindow('open'); break; case "AddSupplement": $("#addWindow").jqxWindow('open'); break; } }); break; case 1: var feedbunkerdata = [ { "id": "0", "ingcode": "", "cost": "", "instock": "0", "startmonth": "1", "endmonth": "12", "canpurchase": "true", "price": "123", "children": [ { "id": "9", "ingcode": "GRASS HAY HIGH QLTY", "cost": "180", "instock": "50", "startmonth": "8", "endmonth": "12", "canpurchase": "0", "price": "250" } , { "id": "10", "ingcode": "GRASS HAY POOR QLTY", "cost": "160", "instock": "0", "startmonth": "12", "endmonth": "1", "canpurchase": "0", "price": "0" } , { "id": "11", "ingcode": "GRASS SILAGE MATURE", "cost": "79", "instock": "0", "startmonth": "12", "endmonth": "1", "canpurchase": "0", "price": "0" } , { "id": "12", "ingcode": "GRASS SILAGE YOUNG", "cost": "64", "instock": "0", "startmonth": "12", "endmonth": "1", "canpurchase": "0", "price": "0" } , { "id": "15", "ingcode": "LUCERNE HAY", "cost": "400", "instock": "0", "startmonth": "12", "endmonth": "1", "canpurchase": "0", "price": "0" } , { "id": "16", "ingcode": "MAIZE SILAGE HIGH GRAIN", "cost": "63", "instock": "0", "startmonth": "12", "endmonth": "1", "canpurchase": "0", "price": "0" } , { "id": "17", "ingcode": "MAIZE SILAGE LOW GRAIN", "cost": "63", "instock": "0", "startmonth": "12", "endmonth": "1", "canpurchase": "0", "price": "0" } , { "id": "33", "ingcode": "WHEAT STRAW", "cost": "120", "instock": "0", "startmonth": "12", "endmonth": "1", "canpurchase": "0", "price": "0" } ] } ]; var feedbunkers = { dataType: "json", dataFields: [ { name: "ingcode", type: "string" }, { name: "cost", type: "number" }, { name: "instock", type: "number" }, { name: "startmonth", type: "number" }, { name: "endmonth", type: "number" }, { name: "price", type: "number" }, { name: "id", type: "number" }, { name: "children", type: "array" }, { name: "canpurchase", type: "boolean" } ], hierarchy: { root: "children" }, localData: feedbunkerdata, id: "id" }; var dataAdapterFeedbunkers = new $.jqx.dataAdapter(feedbunkers, { loadComplete: function () { } }); $("#FeedbunkersGrid").jqxTreeGrid( { width: 820, checkboxes: function (rowKey, dataRow) { var level = dataRow.level; if (level == 1) { return true; } else { return false; } }, source: dataAdapterFeedbunkers, altrows: true, selectionMode: "singleRow", theme: dm_theme, autoRowHeight: false, ready: function () { // Expand rows with ID = 1, 2 and 7 $("#FeedbunkersGrid").jqxTreeGrid('expandRow', 0); }, editable: true, columns: [ { text: 'Can purchase', editable: false, dataField: 'id', width: 100 }, { text: 'Forage', editable: false, dataField: 'ingcode', width: 290 }, { text: 'Tonne in stock', align: 'right', cellsAlign: 'right', cellsFormat: 'd', columnType: "template", dataField: 'instock', width: 100, createEditor: function (row, cellvalue, editor, cellText, width, height) { // construct the editor. editor.jqxNumberInput({ min: 0, max: 12500, inputMode: 'simple', spinButtons: false, decimalDigits: 0, width: width, height: height }); }, initEditor: function (row, cellvalue, editor, celltext, width, height) { // set the editor's current value. The callback is called each time the editor is displayed. var value = parseInt(cellvalue); if (isNaN(value)) value = 0; editor.jqxNumberInput('val', value); }, getEditorValue: function (row, cellvalue, editor) { // return the editor's value. return editor.val(); } }, { text: 'Start feeding', dataField: 'startmonth', width: 100, columnType: "template", createEditor: function (row, cellvalue, editor, cellText, width, height) { // construct the editor. editor.jqxDropDownList({ autoDropDownHeight: true, source: months, displayMember: 'text', valueMember: 'value', width: '100%', height: '100%' }); }, initEditor: function (row, cellvalue, editor, celltext, width, height) { // set the editor's current value. The callback is called each time the editor is displayed. editor.jqxDropDownList('selectItem', cellvalue); }, getEditorValue: function (row, cellvalue, editor) { // return the editor's value. return editor.val(); } }, { text: 'End feeding', dataField: 'endmonth', width: 100, columnType: "template", createEditor: function (row, cellvalue, editor, cellText, width, height) { // construct the editor. editor.jqxDropDownList({ autoDropDownHeight: true, source: months, displayMember: 'text', valueMember: 'value', width: '100%', height: '100%' }); }, initEditor: function (row, cellvalue, editor, celltext, width, height) { // set the editor's current value. The callback is called each time the editor is displayed. editor.jqxDropDownList('selectItem', cellvalue); }, getEditorValue: function (row, cellvalue, editor) { // return the editor's value. return editor.val(); } }, { text: 'Price per tonne', align: 'right', cellsAlign: 'right', cellsFormat: 'c0', columnType: "template", dataField: 'cost', createEditor: function (row, cellvalue, editor, cellText, width, height) { // construct the editor. editor.jqxNumberInput({ min: 0, max: 12500, inputMode: 'simple', spinButtons: false, decimalDigits: 0, width: width, height: height }); }, initEditor: function (row, cellvalue, editor, celltext, width, height) { // set the editor's current value. The callback is called each time the editor is displayed. var value = parseInt(cellvalue); if (isNaN(value)) value = 0; editor.jqxNumberInput('val', value); }, getEditorValue: function (row, cellvalue, editor) { // return the editor's value. return editor.val(); } } ] }); var rows = $("#FeedbunkersGrid").jqxTreeGrid('getRows'); var setUsedFeedbunkers = function (rows) { for (var i = 0; i < rows.length; i++) { if (rows[i].level == 1) { rows[i].checked = rows[i].canpurchase; } if (rows[i].records) { setUsedFeedbunkers(rows[i].records); } } }; setUsedFeedbunkers(rows); $("#FeedbunkerButtons").jqxButtonGroup({ mode: 'default', theme: dm_theme }); $("#FeedbunkerButtons").on('buttonclick', function (event) { var clickedButton = event.args.button; var selection = $("#FeedbunkersGrid").jqxTreeGrid('getSelection'); var rowData = selection[0]; switch (clickedButton[0].id) { case "EditFeedbunker": $("#editHeader").html(rowData.ingcode); $("#editWindow").jqxWindow('open'); break; case "DeleteFeedbunker": $("#ingredientToDelete").html(rowData.ingcode); $("#deleteWindow").jqxWindow('open'); break; case "AddFeedbunker": $("#addWindow").jqxWindow('open'); break; } }); break; case 2: var mineralsdata = [ { "id": "0", "ingcode": "", "cost": "", "isused": "true", "children": [ { "id": "34", "ingcode": "AQUATRACE5", "cost": "285", "isused": "0" } , { "id": "35", "ingcode": "HITRACE5", "cost": "185", "isused": "0" } , { "id": "36", "ingcode": "NMMACMAIZE", "cost": "35", "isused": "0" } , { "id": "37", "ingcode": "NMMAIZEBAL", "cost": "41", "isused": "0" } , { "id": "38", "ingcode": "NUTRIPLEX5", "cost": "399", "isused": "0" } ] } ]; var minerals = { dataType: "json", dataFields: [ { name: "ingcode", type: "string" }, { name: "cost", type: "number" }, { name: "id", type: "number" }, { name: "children", type: "array" }, { name: "isused", type: "boolean" } ], hierarchy: { root: "children" }, localData: mineralsdata, id: "id" }; var dataAdapterMinerals = new $.jqx.dataAdapter(minerals, { loadComplete: function () { } }); $("#MineralsGrid").jqxTreeGrid( { width: 800, checkboxes: function (rowKey, dataRow) { var level = dataRow.level; if (level == 1) { return true; } else { return false; } }, source: dataAdapterMinerals, altrows: true, selectionMode: "singleRow", theme: dm_theme, autoRowHeight: false, ready: function () { // Expand rows with ID = 1, 2 and 7 $("#MineralsGrid").jqxTreeGrid('expandRow', 0); }, editable: true, columns: [ { text: 'Consider', editable: false, dataField: 'id', width: 100 }, { text: 'Ingredient', editable: false, dataField: 'ingcode', width: 450 }, { text: 'Price per 25 kg', align: 'right', cellsAlign: 'right', cellsFormat: 'c0', columnType: "template", dataField: 'cost', createEditor: function (row, cellvalue, editor, cellText, width, height) { // construct the editor. editor.jqxNumberInput({ min: 0, max: 12500, inputMode: 'simple', spinButtons: false, decimalDigits: 0, width: width, height: height }); }, initEditor: function (row, cellvalue, editor, celltext, width, height) { // set the editor's current value. The callback is called each time the editor is displayed. var value = parseInt(cellvalue); if (isNaN(value)) value = 0; editor.jqxNumberInput('val', value); }, getEditorValue: function (row, cellvalue, editor) { // return the editor's value. return editor.val(); } } ] }); var rows = $("#MineralsGrid").jqxTreeGrid('getRows'); var setUsedMinerals = function (rows) { for (var i = 0; i < rows.length; i++) { if (rows[i].level == 1) { rows[i].checked = rows[i].isused; } if (rows[i].records) { setUsedMinerals(rows[i].records); } } }; setUsedMinerals(rows); $("#MineralsButtons").jqxButtonGroup({ mode: 'default', theme: dm_theme }); $("#MineralsButtons").on('buttonclick', function (event) { var clickedButton = event.args.button; var selection = $("#MineralsGrid").jqxTreeGrid('getSelection'); var rowData = selection[0]; switch (clickedButton[0].id) { case "EditMineral": $("#editHeader").html(rowData.ingcode); $("#editWindow").jqxWindow('open'); break; case "DeleteMineral": $("#ingredientToDelete").html(rowData.ingcode); $("#deleteWindow").jqxWindow('open'); break; case "AddMineral": $("#addWindow").jqxWindow('open'); break; } }); break; } } }); $("#editWindow").jqxWindow({ width: 400, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#CancelEdit"), modalOpacity: 0.01, theme: dm_theme }); $("#CancelEdit").jqxButton({ theme: dm_theme }); $("#SaveEdit").jqxButton({ theme: dm_theme }); $("#SaveEdit").click(function () { $("#editWindow").jqxWindow('hide'); }); $("#CancelDelete").jqxButton({ theme: dm_theme }); $("#ConfirmDelete").jqxButton({ theme: dm_theme }); $("#deleteWindow").jqxWindow({ width: 400, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#CancelDelete"), modalOpacity: 0.01, theme: dm_theme }); $("#CancelAdd").jqxButton({ theme: dm_theme }); $("#ConfirmAdd").jqxButton({ theme: dm_theme }); $("#addWindow").jqxWindow({ width: 400, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#CancelAdd"), modalOpacity: 0.01, theme: dm_theme }); }); </script> <form method="POST" name="form" id="form" ENCTYPE="multipart/form-data"> <div id='jqxTabs'> <ul> <li style="margin-left: 30px;">Supplements <li>Storage</li> <li>Minerals</li> </ul> <div> <div style="height:30px"></div> <div id='SupplementsButtons' style="margin: 6px;"> <button style="padding:4px 16px;" id="AddSupplement">Add</button> <button style="padding:4px 16px;" id="EditSupplement">Edit</button> <button style="padding:4px 16px;" id="DeleteSupplement">Delete</button> </div> <div id="SupplementsGrid" name="SupplementsGrid"></div> </div> <div> <div style="height:30px"></div> <div id='FeedbunkerButtons' style="margin: 6px;"> <button style="padding:4px 16px;" id="AddFeedbunker">Add</button> <button style="padding:4px 16px;" id="EditFeedbunker">Edit</button> <button style="padding:4px 16px;" id="DeleteFeedbunker">Delete</button> </div> <div id="FeedbunkersGrid" name="FeedbunkersGrid"></div> </div> <div> <div style="height:30px"></div> <div id='MineralsButtons' style="margin: 6px;"> <button style="padding:4px 16px;" id="AddMineral">Add</button> <button style="padding:4px 16px;" id="EditMineral">Edit</button> <button style="padding:4px 16px;" id="DeleteMineral">Delete</button> </div> <div id="MineralsGrid" name="MineralsGrid"></div> </div> </div> </form> <div id="editWindow"> <div id="editHeader">Edit</div> <div style="overflow: hidden;"> <table> <tr> <td align="right"></td> <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="SaveEdit" value="Save" /><input id="CancelEdit" type="button" value="Cancel" /></td> </tr> </table> </div> </div> <div id="deleteWindow"> <div id="deleteHeader">Delete</div> <div style="overflow: hidden;"> <table> <tr> <td colspan="2" align="right">Please confirm to delete <span id="ingredientToDelete"></span></td> </tr> <tr> <td align="right"></td> <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="ConfirmDelete" value="Delete" /><input id="CancelDelete" type="button" value="Cancel" /></td> </tr> </table> </div> </div> <div id="addWindow"> <div id="addHeader">Add</div> <div style="overflow: hidden;"> <table> <tr> <td colspan="2" align="right">Please confirm to add </td> </tr> <tr> <td align="right"></td> <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="ConfirmAdd" value="Add" /><input id="CancelAdd" type="button" value="Cancel" /></td> </tr> </table> </div> </div> </div> </div> </div> </body> </html>Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Thank you so much Peter, you saved my day!
Hi Peter
In relation to this: is there a way to initialize all tabs without actually selecting them? I am thinking of users who load the page and only need to make a change to the first tab before submitting the form. It seems that the other tabs remain uninitialized.
cheers,
AneHi Ane,
That is basically the idea – to do not initialize something if it is not necessary. If you do not want that, you can create your TreeGrids before creating the Tabs.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.