jQuery UI Widgets › Forums › Grid › Grid -> Checkbox Column | disable checkbox
Tagged: angular grid, checkbox, disable, disable selection, grid, jquery grid, jqxgrid, row, selectionmode
This topic contains 4 replies, has 3 voices, and was last updated by Shelan 9 years, 1 month ago.
-
Author
-
Hi,
In my grid I set the selectionmode: ‘checkbox’ and I can able to see the checkbox as first column in all rows.
Here I want to disable the row checkbox based a column flag in that row.
Can someone suggest me a solution?
Cheers,
RajHi Raj,
Here is the best solution we can give on the matter:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.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="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = generatedata(200); var source = { localdata: data, datatype: "array", datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'date', type: 'date' } ], updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command commit(true); } }; var cellbeginedit = function (row, datafield, columntype, value) { if (row == 0 || row == 2 || row == 5) return false; } var cellsrenderer = function (row, column, value, defaultHtml) { if (row == 0 || row == 2 || row == 5) { var element = $(defaultHtml); element.css('color', '#999'); return element[0].outerHTML; } return defaultHtml; } var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, editable: true, selectionmode: 'selectionmode', columns: [ { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer }, { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 190, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer }, { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellbeginedit: cellbeginedit }, { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, cellsalign: 'right', cellsformat: 'd', cellbeginedit: cellbeginedit, validation: function (cell, value) { var year = value.getFullYear(); if (year >= 2015) { return { result: false, message: "Ship Date should be before 1/1/2015" }; } return true; }, cellsrenderer: cellsrenderer }, { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 150) { return { result: false, message: "Quantity should be in the 0-150 interval" }; } return true; }, initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ decimalDigits: 0, digits: 3 }); }, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer }, { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 15) { return { result: false, message: "Price should be in the 0-15 interval" }; } return true; }, initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ digits: 3 }); }, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer } ] }); // events $("#jqxgrid").on('cellbeginedit', function (event) { var args = event.args; $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value); }); $("#jqxgrid").on('cellendedit', function (event) { var args = event.args; $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value); }); $('#jqxgrid').on('rowselect', function (event) { var rowBoundIndex = event.args.rowindex; if (rowBoundIndex === 0 || rowBoundIndex === 2 || rowBoundIndex === 5) { $('#jqxgrid').jqxGrid('unselectrow', rowBoundIndex); } else if (typeof rowBoundIndex === 'object') { $('#jqxgrid').jqxGrid('unselectrow', 0); $('#jqxgrid').jqxGrid('unselectrow', 2); $('#jqxgrid').jqxGrid('unselectrow', 5); } }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> <div style="margin-top: 30px;"> <div id="cellbegineditevent"> </div> <div style="margin-top: 10px;" id="cellendeditevent"> </div> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
How can i achieve the same based on value of a column?
I want to be able to build a condition based on one column’s value, if the value of a specific column is “0” want to disable it, if the value is “1” want enable it.
And also when clicking on the checkbox which is in the header, I want check only enabled row checkboxes.
Thanks in advance…
Regards,
ShelanHi Shelan,
Here is how to implement this functionality:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = "../sampledata/orders.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' }, { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' }, { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' }, { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' }, { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' }, { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' } ], root: "entry", record: "content", id: 'm\\:properties>d\\:OrderID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source); // create jqxgrid. $("#jqxgrid").jqxGrid( { width: 850, height: 450, source: dataAdapter, sortable: true, filterable: true, ready: function () { // called when the Grid is loaded. Call methods or set properties here. }, selectionmode: 'checkbox', altrows: true, columns: [ { text: 'Ship Name', datafield: 'ShipName', width: 250 }, { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' }, { text: 'Freight', datafield: 'Freight', width: 150, cellsformat: 'F2', cellsalign: 'right' }, { text: 'Ship City', datafield: 'ShipCity', width: 150 }, { text: 'Ship Country', datafield: 'ShipCountry' } ] }); $('#jqxgrid').on('rowselect', function (event) { // event arguments. var args = event.args; // row's bound index. var rowBoundIndex = args.rowindex; // row's data. The row's data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row's firstName, use var firstName = rowData.firstName; var rowData = args.row; if (typeof rowBoundIndex === 'number') { if (rowData.ShipName === 'Hanari Carnes') { $('#jqxgrid').jqxGrid('unselectrow', rowBoundIndex); } } else if (typeof rowBoundIndex === 'object') { var rows = $('#jqxgrid').jqxGrid('getrows'); for (var i = 0; i < rows.length; i++) { if (rows[i].ShipName === 'Hanari Carnes') { $('#jqxgrid').jqxGrid('unselectrow', i); } } } }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;"> <div id="jqxgrid"> </div> </div> <p> Checking <strong>Hanari Carnes</strong> is disabled.</p> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you very much Dimitar.
Regards,
Shelan -
AuthorPosts
You must be logged in to reply to this topic.