jQWidgets Forums

Tagged: angular grid, bootstrap grid, checkbox, javascript grid, jquery grid, jqwidgets grid, jqxgrid

This topic contains 6 replies, has 2 voices, and was last updated by Hristo 9 years, 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Checkbox column in grid not working Posts
December 7, 2015 at 10:58 am Checkbox column in grid not working #78990

deyavirup
Participant

The check/uncheck feature of checkbox in the grid(#gamegrid) is not working.
The code is attached below:

<!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” />
<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: ‘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” }
]
});
}
}
// creage jqxgrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
height: 610,
source: source,
theme: ‘darkblue’,
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: “darkblue”
});

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: ‘darkblue’,
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” },
{ text: “Min”, datafield: “Min” },
{ text: “Max”, datafield: “Max” },
{ text: “disabilityStatus”, datafield: “disabilityStatus”, hidden: true }
];

$(“#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
$(“#game-grid”).jqxGrid(
{
width: 600,
height: 300,
source: adapter2,
theme: ‘darkblue’,
columns: columns2
});//end grid 2 declaration

$(“#game-grid2″).jqxGrid(
{
width: 600,
height: 300,
source: adapter2,
theme: ‘darkblue’,
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=”game-grid”></div></td>
</tr>
</table>
<table style=”width: 45%; float: left;”>
<tr>
<td style=”border: 1px solid #000; width: 300px;”><div id=”game-grid2″></div></td>
</tr>
</table>
</body>
</html>

December 7, 2015 at 3:54 pm Checkbox column in grid not working #79018
Hristo
Participant
Hello deyavirup,

The property editable: true, is not activated.
```
$("#game-grid").jqxGrid(
   {
	width: 600,
	height: 300,
	source: adapter2,
	editable: true,
	theme: 'darkblue',
	columns: columns2
   });
```
Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com
December 8, 2015 at 5:25 am Checkbox column in grid not working #79032

deyavirup
Participant

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>

December 8, 2015 at 9:44 am Checkbox column in grid not working #79051

Hristo
Participant

Hello deyavirup,

We use this code to make example below:
http://jsfiddle.net/hristoxux/wtq7kofy/1/
In second data variable ‘data2’ missing "off": "true", or "off": "false", because in that case checkbox is in ‘null’ state (neither ‘true’ nor ‘false’).
Another important thing is to set correct new dataAdapter to any Grid.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

December 8, 2015 at 1:55 pm Checkbox column in grid not working #79066

deyavirup
Participant

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 :

December 8, 2015 at 1:56 pm Checkbox column in grid not working #79067

deyavirup
Participant

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/

December 9, 2015 at 7:50 am Checkbox column in grid not working #79106

Hristo
Participant

Hello deyavirup,

In this case widget work with event.args.value instead of ‘event.args.checked’.
Please take a look this example: http://jsfiddle.net/hristoxux/jkL2xqt1/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.