[deyavirupParticipant]

var Source3 =
{
datafields: [
{ name: ‘roomNum’, map: ‘roomNum’, type: ‘string’ },
{ name: ‘roomType’, map: ‘roomType’, type: ‘string’ },
{ name: ‘credits’, map: ‘credits’, type: ‘double’ },
{ name: ‘tdSvcCode’, map: ‘tdSvcCode’, type: ‘string’ },
{ name: ‘tdwnTime’, map: ‘roomNum’, type: ‘string’ },
{ name: ‘arriveTime’, map: ‘roomType’, type: ‘string’ },
{ name: ‘multiRoom’, map: ‘multiRoom’, type: ‘list’ },
{ name: ‘currVIPCode’, map: ‘currVIPCode’, type: ‘string’ },
{ name: ‘nextVIPCode’, map: ‘nextVIPCode’, type: ‘string’ },
{ name: ‘arrvDeptInd’, map: ‘arrvDeptInd’, type: ‘string’ },
{ name: ‘hkStation’, map: ‘hkStation’, type: ‘string’ },
{ name: ‘hkstatus’, map: ‘tdSvcCode’, type: ‘string’ }
],
datatype: ‘json’,
root: ‘constraint’,
theme: “lsjqwidget-custom”,
/* sortcolumn: ‘roomNum’,
sortdirection: ‘asc’,*/
localdata: turndownUnassignedBoard
};

In the above code, whenever I use the commented code I am getting the error.
I am running the code in IE11

[deyavirupParticipant]

$(“#jqxgrid”).jqxGrid(
{
width: 625,
height: 600,
source: source1,
theme: “lsjqwidget-custom”,
rowdetails: true,
rowsheight: 35,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ class=’innergrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 120,
rowdetailshidden: false, theme: “lsjqwidget-custom”},
columns: column1
});

Can u check what more to add to it to make it work

[deyavirupParticipant]

In my nested (outergrid,innergrid) the innergrid is scrollable if the row count exceeds a certain number
but the issue is I cannot make the outergrid scrollable

[deyavirupParticipant]

Hi Hristo,

This is my entire code:
https://jsfiddle.net/5ad60wpy/

Now what I wanted/tried to do is that if I click on the add button, a row (having an outer row and an inner row inside it) will get populated in the #jqxgrid table.

Now the issue in this code is that if I don’t use .constraints, a row is getting populated but the below mentioned code functionality is not working

$(“.innergrid”).on(‘mouseenter’, function ()
{
currentDivID = this.id;
//alert(currentDivID);
value = “”;

$(“#”+currentDivID).on(‘rowselect’, function (event)
{
var row = event.args.rowindex;
//var datarow = $(“#grid2”).jqxGrid(‘getrowdata’, row);
value = $(“#”+currentDivID).jqxGrid(‘getrowdata’, row);
ROWSS = ROWSS + value;
var id = $(“#gamegrid2”).jqxGrid(‘getdatainformation’).rowscount;

DELETE_ROW_ID = $(“#”+currentDivID).jqxGrid(‘getrowid’, row);

//alert(value);
if(COUNTER <= 0)
{
$(“#gamegrid2”).jqxGrid(‘addrow’, id, value);

COUNTER = 1;
$(“#”+currentDivID).jqxGrid(‘deleterow’, DELETE_ROW_ID);
COUNTER = 0;
}

});

$(“#”+currentDivID).on(‘mouseup’, function (event)
{
$(“#”+currentDivID).jqxGrid(‘clearselection’);
});
});

It would be of great help, if you can point out where I am going wrong.

[deyavirupParticipant]

But I need this row localdata: data[index].constraints.
As I need to implement an on click function, where the data will be deleted from the innergrid and gets populated onto another grid.

[deyavirupParticipant]

Here is my code:

$(document).ready(function () {

var value=””;
var gridId = “”;
var currentDivID = “”;

var data = [
{
“ruleid”: “1001”,
“size”: “51”,
“ZScore”: “”,
“complexity”: “8”,
“constraints”: {
“constraint”: [
{
“varName”: “BirthWeight”,
“Min”: “2.500000”,
“Max”: “2.500000”
},
{
“varName”: “AgeMother”,
“Min”: “39.000000”,
“Max”: “39.000000”
},
{
“varName”: “AgeFather”,
“Min”: “35.000000”,
“Max”: “39.000000”
}
]
}
},
{
“ruleid”: “1002”,
“size”: “92”,
“ZScore”: “”,
“complexity”: “2”,
“constraints”: {
“constraint”: [
{
“varName”: “AgeFather”,
“Min”: “32.000000”,
“Max”: “45.000000”
},
{
“varName”: “Age AD Start (weeks)”,
“Min”: “14.000000”,
“Max”: “30.000000”
}
]
}
},
{
“ruleid”: “1003”,
“size”: “62”,
“ZScore”: “”,
“complexity”: “2”,
“constraints”: {
“constraint”: [
{
“varName”: “AgeFather”,
“Min”: “32.000000”,
“Max”: “45.000000”
},
{
“varName”: “Age AD Start (weeks)”,
“Min”: “14.000000”,
“Max”: “30.000000”
}
]
}
}
];
var source1 =
{
datafields: [
{ name: ‘ruleid’, type: ‘string’ },
{ name: ‘size’, type: ‘string’ },
{ name: ‘ZScore’, type: ‘string’ },
{ name: ‘complexity’, type: ‘string’ }
],
datatype: ‘json’,
/* sortcolumn: ‘ruleid’,
sortdirection: ‘asc’, */
localdata: data
};
var adapter = new $.jqx.dataAdapter(source1);
// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
var nestedSource =
{
datafields: [
{ name: ‘varName’, map: ‘varName’, type: ‘string’ },
{ name: ‘Min’, map: ‘Min’, type: ‘string’ },
{ name: ‘Max’, map: ‘Max’, type: ‘string’ }
],
datatype: ‘json’,
root: ‘constraint’,
theme: ‘darkblue’,
localdata: data[index].constraints
};
var nestedAdapter = new $.jqx.dataAdapter(nestedSource);
if (grid != null) {
grid.jqxGrid({
source: nestedAdapter, width: 600, height: 100,
columns: [
{ text: “varName”, datafield: “varName” },
{ text: “Min”, datafield: “Min” },
{ text: “Max”, datafield: “Max” }
]
});
}
};

var column1 = [
{ text: ‘ruleid’, datafield: ‘ruleid’, width: 150 },
{ text: ‘size’, datafield: ‘size’, width: 150 },
{ text: ‘ZScore’, datafield: ‘ZScore’, width: 150 },
{ text: ‘complexity’, datafield: ‘complexity’, }
];

$(“#jqxgrid”).jqxGrid(
{
width: 625,
height: 600,
source: source1,
theme: “lsjqwidget-custom”,
rowdetails: true,
rowsheight: 35,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ class=’innergrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 120, rowdetailshidden: false, theme: “lsjqwidget-custom”},
/*ready: function () {
$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 0);
},*/
columns: column1
});

$(“#addRow”).click(function () {
//console.log(nestedGrids);
$(“#jqxgrid”).jqxGrid(‘addrow’, null, {} );
});
});

<!DOCTYPE html>
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id=”” style=”overflow:scroll; width: 49%; height: 650px; float: left; margin: 3px;”>

<button id=”addRow”>
Add row to nested grid
</button>
<div id=”jqxgrid” style=”float: left; margin: 3px;”>
</div>
</div>
</BODY>
</HTML>

Can you tell me where I am going wrong in this code?

[deyavirupParticipant]

Hello Hristo,

In your example I can’t find where a new row is added in the grid.
I have tried it doing like this
https://www.jseditor.io/?key=nested-grid-add-row-1

but its giving the above mentioned error.
Can you tell me where I am going wrong in my code?

[deyavirupParticipant]

Hello Hristo,

I did the same as you have said but still getting the same error.
Can you tell how to set the data for the inner grid(constraints) here?

[deyavirupParticipant]

I downloaded jqwidgets 3.9.1 and replaced all existing files with the new ones but now I am getting the below mentioned error in jqxcore.js:

Line: 1777
Error: ‘console’ is undefined

[deyavirupParticipant]

But whenever I am usingalert(event.args.checked); to get the boolean value it is coming as undefined.
How do I get that true or false as I need to perform some operation on that.
The link to the example is :
http://jsfiddle.net/wtq7kofy/3/

[deyavirupParticipant]

But whenever I am usingalert(event.args.checked); to get the boolean value it is coming as undefined.
How do I get that true or false as I need to perform some operation on that.
The link to the example is :

[deyavirupParticipant]

The same row also have a drag-drop feature.
So, selectionmode: ‘checkbox’ cannot be made.
Any other ways?

[deyavirupParticipant]

Can you suggest any other way to replicate the same functionality.

[deyavirupParticipant]

I have also tried making editable: true,
but still the checkbox is not getting checked.

I am pasting the code as it stands now :

<!DOCTYPE html>
<html lang=”en”>
<head>

<link rel=”stylesheet” href=”C:/jqxWidgetProject/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”C:/jqxWidgetProject/jqwidgets/styles/jqx.darkblue.css” type=”text/css” />
<link rel=”stylesheet” href=”C:/jqxWidgetProject/jqwidgets/styles/lsjqwidget-custom.css” type=”text/css” />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxdragdrop.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.columnsreorder.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”C:/jqxWidgetProject/jqwidgets/jqxgrid.pager.js”></script>

<script type=”text/javascript”>
$(document).ready(function ()
{
var data = [
{
“ruleid”: “1001”,
“size”: “51”,
“ZScore”: “1.21839”,
“complexity”: “8”,
“constraints”: {
“constraint”: [
{
“varName”: “BirthWeight”,
“Min”: “2.500000”,
“Max”: “2.500000”
},
{
“varName”: “AgeMother”,
“Min”: “39.000000”,
“Max”: “39.000000”
},
{
“varName”: “AgeFather”,
“Min”: “35.000000”,
“Max”: “39.000000”
}
]
}
},
{
“ruleid”: “1002”,
“size”: “92”,
“ZScore”: “2.60137”,
“complexity”: “2”,
“constraints”: {
“constraint”: [
{
“varName”: “AgeFather”,
“Min”: “32.000000”,
“Max”: “45.000000”
},
{
“varName”: “Age AD Start (weeks)”,
“Min”: “14.000000”,
“Max”: “30.000000”
}
]
}
},
{
“ruleid”: “1003”,
“size”: “62”,
“ZScore”: “2.60137”,
“complexity”: “2”,
“constraints”: {
“constraint”: [
{
“varName”: “AgeFather”,
“Min”: “32.000000”,
“Max”: “45.000000”
},
{
“varName”: “Age AD Start (weeks)”,
“Min”: “14.000000”,
“Max”: “30.000000”
}
]
}
}
];
var source =
{
datafields: [
{ name: ‘ruleid’, type: ‘string’ },
{ name: ‘size’, type: ‘string’ },
{ name: ‘ZScore’, type: ‘string’ },
{ name: ‘complexity’, type: ‘string’ }
],
datatype: ‘json’,
localdata: data
};
var adapter = new $.jqx.dataAdapter(source);
// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
var nestedSource =
{
datafields: [
{ name: ‘varName’, map: ‘varName’, type: ‘string’ },
{ name: ‘Min’, map: ‘Min’, type: ‘string’ },
{ name: ‘Max’, map: ‘Max’, type: ‘string’ }
],
datatype: ‘json’,
root: ‘constraint’,
theme: ‘lsjqwidget-custom’,
localdata: data[index].constraints
};
var nestedAdapter = new $.jqx.dataAdapter(nestedSource);
if (grid != null) {
grid.jqxGrid({
source: nestedAdapter, width: 600, height: 100,
columns: [
{ text: “varName”, datafield: “varName” },
{ text: “Min”, datafield: “Min” },
{ text: “Max”, datafield: “Max” }
]
});
}
}
// creage jqxgrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
height: 610,
source: source,
theme: ‘lsjqwidget-custom’,
rowdetails: true,
rowsheight: 35,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ class=’innergrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 120, rowdetailshidden: false},
ready: function () {
$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
},
columns: [
{ text: ‘ruleid’, datafield: ‘ruleid’, width: 150 },
{ text: ‘size’, datafield: ‘size’, width: 150 },
{ text: ‘ZScore’, datafield: ‘ZScore’, width: 150 },
{ text: ‘complexity’, datafield: ‘complexity’, }
]
});

$(document).mousedown(function () {
});
$(“#jqxgrid”).on(‘mousedown’, function (event) {
});

$(“.innergrid”).jqxGrid(
{
theme: “lsjqwidget-custom”
});

var data2 = [
{
“varName”: “BirthWeight”,
“Min”: “2.500000”,
“Max”: “2.500000”
},
{
“varName”: “AgeMother”,
“Min”: “39.000000”,
“Max”: “39.000000”
},
{
“varName”: “AgeFather”,
“Min”: “35.000000”,
“Max”: “39.000000”
}];
var Source2 =
{
datafields: [
{ name: ‘Off’, map: ‘Off’, type: ‘boolean’ },
{ name: ‘varName’, map: ‘varName’, type: ‘string’ },
{ name: ‘Min’, map: ‘Min’, type: ‘string’ },
{ name: ‘Max’, map: ‘Max’, type: ‘string’ },
{name: ‘disabilityStatus’, map: ‘disabilityStatus’, type: ‘boolean’ }
],
datatype: ‘json’,
root: ‘constraint’,
theme: ‘lsjqwidget-custom’,
localdata: data2
};

//create the dataAdapter for Grid 2
var adapter2 = new $.jqx.dataAdapter(Source2);
var columns2 = [
{ text: “Off”, datafield: “offAttendants”, columntype: ‘checkbox’, width: 40 , editable: true },
{ text: “varName”, datafield: “varName”, editable: false },
{ text: “Min”, datafield: “Min”, editable: false },
{ text: “Max”, datafield: “Max”, editable: false },
{ text: “disabilityStatus”, datafield: “disabilityStatus”, hidden: true, editable: false }
];

$(“#gamegrid”).bind(‘cellendedit’, function (event) {
if (event.args.value)
{
$(“#gamegrid”).jqxGrid(‘selectrow’, event.args.rowindex);
}
else
{
$(“#gamegrid”).jqxGrid(‘unselectrow’, event.args.rowindex);
}
});

//INITIALIZE GRID 2
$(“#gamegrid”).jqxGrid(
{
width: 600,
height: 300,
source: adapter2,
theme: ‘lsjqwidget-custom’,
editable: true,
columns: columns2
});//end grid 2 declaration

$(“#gamegrid2″).jqxGrid(
{
width: 600,
height: 300,
source: adapter2,
theme: ‘lsjqwidget-custom’,
columns: columns2
});//end grid 2 declaration

});
</script>
</head>
<body class=’default’>
<table style=”width: 45%; float: left;”>
<tr>
<td style=”border: 1px solid #000; width: 300px;”><div id=”jqxgrid”></div></td>
</tr>
</table>
<table style=”width: 45%; float: left;”>
<tr>
<td style=”border: 1px solid #000; width: 300px;”><div id=”gamegrid”></div></td>
</tr>
</table>
<table style=”width: 45%; float: left;”>
<tr>
<td style=”border: 1px solid #000; width: 300px;”><div id=”gamegrid2″></div></td>
</tr>
</table>
</body>
</html>

[Author]

Posts