I am trying to make some of checkboxes checked and disabled in jqxTreeGrid in below code:
$("#treegrid_portfolio").jqxTreeGrid(
{
source: dataAdapter,
pageable: true,
pagerMode: 'advanced',
pageSizeMode: 'root',
pageSize: 5,
pageSizeOptions: ['1', '2', '3', '5', '10'],
columnsResize: true,
sortable: true,
filterable: true,
theme: "custom",
filterMode: 'advanced',
altRows: false,
checkboxes: true,
columnsReorder: true,
hierarchicalCheckboxes: true,
width: getWidth("TreeGrid"),
/*width: "100%",*/
ready: function () {
$("#treegrid_portfolio").jqxTreeGrid('expandRow', '1');
$("#treegrid_portfolio").jqxTreeGrid('expandRow', '2');
}
,
columns: [
{
text: "ID", dataField: "formattedID", width: 120, pinned: true, cellclassname: "requestIdCls", resizable: false
}
,
{
text: '', datafield: 'alert', cellsrenderer: linkrendererAlert, width: 60, pinned: true, cellclassname: "alert_column", cellsAlign: 'center', filterable: false, resizable: false
}
,
{
text: "Portfolio Items Name", dataField: "PortfolioItem_Name", width: 200
}
,
{
text: "Agile Central Project Name", dataField: "AC_ProjectName", width: 200
}
]
}
);
Is it possible to make the same on grid ready function. I have done some research on the jqwidget. But didn't got any solution or clues. Please help me any one.
You need to make below changes also just put id attribute for each of your column data .Then put the id for selecting checkbox to set true.
follow this link i have get a fiddle for you Invoke the uncheckRow method.
var data = [{
"id": "1",
"name": "Corporate Headquarters",
"budget": "1230000",
"location": "Las Vegas",
"children": [{
"id": "2",
"name": "Finance Division",
"budget": "423000",
"location": "San Antonio",
"children": [{
"id": "3",
"name": "Accounting Department",
"budget": "113000",
"location": "San Antonio"
}, {
"id": "4",
"name": "Investment Department",
"budget": "310000",
"location": "San Antonio",
children: [{
"id": "5",
"name": "Banking Office",
"budget": "240000",
"location": "San Antonio"
}, {
"id": "6",
"name": "Bonds Office",
"budget": "70000",
"location": "San Antonio"
}, ]
}]
}, {
"id": "7",
"name": "Operations Division",
"budget": "600000",
"location": "Miami",
"children": [{
"id": "8",
"name": "Manufacturing Department",
"budget": "300000",
"location": "Miami"
}, {
"id": "9",
"name": "Public Relations Department",
"budget": "200000",
"location": "Miami"
}, {
"id": "10",
"name": "Sales Department",
"budget": "100000",
"location": "Miami"
}]
}, {
"id": "11",
"name": "Research Division",
"budget": "200000",
"location": "Boston"
}]
}];
var source = {
dataType: "json",
dataFields: [{
name: "name",
type: "string"
}, {
name: "budget",
type: "number"
}, {
name: "id",
type: "number"
}, {
name: "children",
type: "array"
}, {
name: "location",
type: "string"
}],
hierarchy: {
root: "children"
},
localData: data,
id: "id"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
}
});
// create jqxTreeGrid.
$("#treeGrid").jqxTreeGrid({
source: dataAdapter,
altRows: true,
width: 680,
theme:'energyblue',
checkboxes: true,
ready: function () {
$("#treeGrid").jqxTreeGrid('expandRow', '1');
$("#treeGrid").jqxTreeGrid('expandRow', '2');
},
columns: [{
text: "Name",
align: "center",
dataField: "name",
width: 300
}, {
text: "Budget",
cellsAlign: "center",
align: "center",
dataField: "budget",
cellsFormat: "c2",
width: 250
}, {
text: "Location",
dataField: "location",
cellsAlign: "center",
align: "center"
}]
});
$("#jqxbutton").jqxButton({
theme: 'energyblue',
height: 30
});
$("#treeGrid").jqxTreeGrid('checkRow',2);
The last line of code $("#treeGrid").jqxTreeGrid('checkRow',2); is reason to check the checkbox true while loading. Please makesure if any help required.Hope it may help.
To check rows on grid ready function use checkRow
method, and lockRow
will disable editing of the row and give the row gray style.
3 or 8 are Unique ID which identifies the row Id (data field in data source).
ready: function () {
$("#treeGrid").jqxTreeGrid('checkRow', '3');
$("#treeGrid").jqxTreeGrid('lockRow', '3');
$("#treeGrid").jqxTreeGrid('checkRow', '8');
$("#treeGrid").jqxTreeGrid('lockRow', '8');
},
To disable checkboxes you can use rowUncheck
event to prevent uncheck by checking the row again.
$('#treeGrid').on('rowUncheck', function (event) {
$("#treeGrid").jqxTreeGrid('checkRow', '3');
$("#treeGrid").jqxTreeGrid('checkRow', '8');
});
$("#treeGrid").jqxTreeGrid({
// ......
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With