[AneVisserParticipant]

So is there a way then within one column, to make some cells editable, and some cells read-only?

[AneVisserParticipant]

As a more complete example: I tried it with the example script for rowBeginEdit, and got the same result: you can change the width, but not the editable property of the tree grid

var employees = [{
“EmployeeID”: 2,
“FirstName”: “Andrew”,
“LastName”: “Fuller”,
“Country”: “USA”,
“Title”: “Vice President, Sales”,
“HireDate”: “1992-08-14 00:00:00”,
“BirthDate”: “1952-02-19 00:00:00”,
“City”: “Tacoma”,
“Address”: “908 W. Capital Way”,
“expanded”: “true”,
children: [{
“EmployeeID”: 8,
“FirstName”: “Laura”,
“LastName”: “Callahan”,
“Country”: “USA”,
“Title”: “Inside Sales Coordinator”,
“HireDate”: “1994-03-05 00:00:00”,
“BirthDate”: “1958-01-09 00:00:00”,
“City”: “Seattle”,
“Address”: “4726 – 11th Ave. N.E.”
}, {
“EmployeeID”: 1,
“FirstName”: “Nancy”,
“LastName”: “Davolio”,
“Country”: “USA”,
“Title”: “Sales Representative”,
“HireDate”: “1992-05-01 00:00:00”,
“BirthDate”: “1948-12-08 00:00:00”,
“City”: “Seattle”,
“Address”: “507 – 20th Ave. E.Apt. 2A”
}, {
“EmployeeID”: 3,
“FirstName”: “Janet”,
“LastName”: “Leverling”,
“Country”: “USA”,
“Title”: “Sales Representative”,
“HireDate”: “1992-04-01 00:00:00”,
“BirthDate”: “1963-08-30 00:00:00”,
“City”: “Kirkland”,
“Address”: “722 Moss Bay Blvd.”
}, {
“EmployeeID”: 4,
“FirstName”: “Margaret”,
“LastName”: “Peacock”,
“Country”: “USA”,
“Title”: “Sales Representative”,
“HireDate”: “1993-05-03 00:00:00”,
“BirthDate”: “1937-09-19 00:00:00”,
“City”: “Redmond”,
“Address”: “4110 Old Redmond Rd.”
}, {
“EmployeeID”: 5,
“FirstName”: “Steven”,
“LastName”: “Buchanan”,
“Country”: “UK”,
“Title”: “Sales Manager”,
“HireDate”: “1993-10-17 00:00:00”,
“BirthDate”: “1955-03-04 00:00:00”,
“City”: “London”,
“Address”: “14 Garrett Hill”,
“expanded”: “true”,
children: [{
“EmployeeID”: 6,
“FirstName”: “Michael”,
“LastName”: “Suyama”,
“Country”: “UK”,
“Title”: “Sales Representative”,
“HireDate”: “1993-10-17 00:00:00”,
“BirthDate”: “1963-07-02 00:00:00”,
“City”: “London”,
“Address”: “Coventry House Miner Rd.”
}, {
“EmployeeID”: 7,
“FirstName”: “Robert”,
“LastName”: “King”,
“Country”: “UK”,
“Title”: “Sales Representative”,
“HireDate”: “1994-01-02 00:00:00”,
“BirthDate”: “1960-05-29 00:00:00”,
“City”: “London”,
“Address”: “Edgeham Hollow Winchester Way”
}, {
“EmployeeID”: 9,
“FirstName”: “Anne”,
“LastName”: “Dodsworth”,
“Country”: “UK”,
“Title”: “Sales Representative”,
“HireDate”: “1994-11-15 00:00:00”,
“BirthDate”: “1966-01-27 00:00:00”,
“City”: “London”,
“Address”: “7 Houndstooth Rd.”
}]
}]
}];

//// prepare the data
var source = {
dataType: “json”,
dataFields: [{
name: ‘EmployeeID’,
type: ‘number’
}, {
name: ‘FirstName’,
type: ‘string’
}, {
name: ‘LastName’,
type: ‘string’
}, {
name: ‘Country’,
type: ‘string’
}, {
name: ‘City’,
type: ‘string’
}, {
name: ‘Address’,
type: ‘string’
}, {
name: ‘Title’,
type: ‘string’
}, {
name: ‘HireDate’,
type: ‘date’
}, {
name: ‘children’,
type: ‘array’
}, {
name: ‘expanded’,
type: ‘bool’
}, {
name: ‘BirthDate’,
type: ‘date’
}],
hierarchy: {
root: ‘children’
},
id: ‘EmployeeID’,
localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);

// create Tree Grid
$(“#treeGrid”).jqxTreeGrid({
width: 680,
source: dataAdapter,
editable: true,
sortable: true,
pageable: true,
pagerMode: ‘advanced’,
theme: ‘energyblue’,
columns: [{
text: ‘FirstName’,
dataField: ‘FirstName’,
width: 150
}, {
text: ‘LastName’,
dataField: ‘LastName’,
width: 120
}, {
text: ‘Title’,
dataField: ‘Title’,
width: 200
}, {
text: ‘Birth Date’,
dataField: ‘BirthDate’,
cellsFormat: ‘d’,
width: 120
}, {
text: ‘Hire Date’,
dataField: ‘HireDate’,
cellsFormat: ‘d’,
width: 120
}, {
text: ‘Address’,
dataField: ‘Address’,
width: 250
}, {
text: ‘City’,
dataField: ‘City’,
width: 120
}, {
text: ‘Country’,
dataField: ‘Country’,
width: 120
}]

});
$(‘#treeGrid’).on(‘rowBeginEdit’, function (event) {
var args = event.args;
var row = args.row;
alert(“The row you are editing is: ” + row.FirstName + ” ” + row.LastName);

$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘FirstName’, ‘editable’, true);
$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘LastName’, ‘editable’, false);
$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘LastName’, ‘width’, 200);

});

[AneVisserParticipant]

Hi

I have tried this as follows:

$(“#treeGrid”).on(‘rowBeginEdit’, function (event) {
var args = event.args;
var rowKey = args.key;
var rowData = args.row;
if (rowData.groupid==3 || rowData.groupid==4) {
$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘replacement’, ‘editable’, true);
$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘replacement’, ‘width’, 200);
}
else {
$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘replacement’, ‘editable’, false);
$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘replacement’, ‘width’, 100);
}
});

It seems that setting the width works fine, but the property ‘editable’ seems to be set to false, even if you try to set it to true.

[AneVisserParticipant]

Could you please give me an example of a correctly written filename? Does it include an extension or something like that?

[AneVisserParticipant]

However, when I set the export settings to a real string value, the treegrid is exported with the default file name:

exportSettings: { filename: ‘January’ }

exports the file to: jqxTreeGrid_Data.xls, and not to January.xls

Is this supposed to work this way?

[AneVisserParticipant]

I have had the same problem. When I added:

exportSettings: {fileName: null}

in the definition of the treegrid, it all worked fine

[AneVisserParticipant]

Sorry to hear that your email didn’t make it to my mailbox. I will investigate. It must be a server issue.
On your example: this is exactly what I was looking for. Thank you so much.

kind regards,

Ane

[AneVisserParticipant]

Is this functionality being planned in the next upgrade?

[AneVisserParticipant]

How about the following scenario: we have a hierarchical structure of companies. Company A owns child-companies 1, 2, 3, and child-companies 1, 2, 3 each own grand-child companies 1a, 1b, 1c, 2a, 2b, 2c, 3a, 3b, 3c.
Each of the companies, no matter what level, has employees. I would like to show in a treegrid something like the following:

>A
Ronald
Nancy
>1
Neil
John
Anna
>1a
Albert
Fred
>1b
Nicole
Adrian
Brian
>1c
Eric
>2
>2a
>2b
>2c
>3
>3a
>3b
>3c
As you indicate, this is not possible in a treegrid. But I don’t see how this can be done in a Data table or a Grid either, as they don’t support hierarchical data. This is not a theoretical situation, I really do need to implement this. Could you please give me any advice how to approach this?

[AneVisserParticipant]

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,
Ane

[AneVisserParticipant]

Thank you so much Peter, you saved my day!

[AneVisserParticipant]

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>

[AneVisserParticipant]

You can change the style of cells by adding a style section:

<style>
.jqx-cell {0px 1px 2px 1px}
</style>

[Author]

Posts