How to disable the checkbox when a row is greyed out

[ShelanParticipant]

Hi Team,

I have a grid and action buttons(edit and delete) to perform the action. In which user should able to select multiple rows and then delete. I have achieved the checkbox by using “selectionmode: ‘checkbox'”.

I have few rows which can not be deleted, I have greyed out those rows, want to restrict the user from selecting the greyed out rows. How to disable the checkbox when a row is greyed out?

Thanks,
Selva

[DimitarParticipant]

Hi Selva,

Please try following solution: http://www.jqwidgets.com/community/topic/grid-checkbox-column-disable-checkbox/#post-73343.

Best Regards,
Dimitar

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

[ShelanParticipant]

Hi Dimitar,

Thanks a lot for the solution.

But i need to have a checkbox in the column header as well, so that i can sect all the rows. I have seen some example looks like same as my requirement and I tried it. but can’t able to achieve it fully.

can you please check and let me know what is the problem.

$("#jqxGrid").jqxGrid(
		{
			width: outerPercentage,
			height:'100%',
			source: dataAdapter,
			theme: theme,
			showfilterrow: true,
			filterable: true,
			sortable: true,
			altrows: true,
			showfiltermenuitems:false,
			enabletooltips: true,
			rowsheight:33,
			pageable:true,
			pagesizeoptions: ['10','20','50'],
			pagerrenderer: customPagerRenderer,
			columnsmenu: false,
			editable: true,
			selectionmode: 'none',
			columnsresize: true,
			columns: [
				{text: '', datafield: 'linkStatus',columntype: 'checkbox', filterable: false, groupable: false, sortable: false, width: "10%",
					renderer: function () {
						return '<div class="checkText" style="text-align:center;line-height:25px"><label>Select</label><br /><div id="linkedToDomain" style="left: 50%; margin-left: -10px; top:34px; position:absolute"></div></div>';
					},
					rendered: function (element) {
						if(userAccessFlag.toLowerCase() == "y")
						{
							var linkStatusChkbox = $(element).find('#linkedToDomain');
							$(linkStatusChkbox).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0});
							columnLinkStatusCheckBox = $(linkStatusChkbox);
							checkHeaderSelection('linkStatus');
							$(linkStatusChkbox).on('change', function (event) {
							
								var checked = event.args.checked,
									checkboxState = $(this).hasClass('state-indeterminate'); //Get the status of header checkbox; refer function
									"checkHeaderSelection"
								
								if(checked == null || updatingCheckState)
								{
									return;
								}
								else
								{
									//Remove the newly added class name whenever the indeterminate state has got changed
									$(this).removeClass('state-indeterminate');
								}
								
								var rows = $('#jqxGrid').jqxGrid('getrows');
								var rowscount = rows.length;
								$("#jqxGrid").jqxGrid('beginupdate');
								for (var i = 0; i < rowscount; i++) {
									var displayRow = rows[i];
									// @param row id
									var data = $('#jqxGrid').jqxGrid('getrowboundindexbyid', displayRow.uid);
									
									var value = $("#jqxGrid").jqxGrid('getcellvalue', data, 'linkStatus'),
										recordStatus = $("#jqxGrid").jqxGrid('getcellvalue', data, 'isDisabled');
									if(recordStatus !=null)
									{
										//If linkStatus current status is false and isDisabled value is "N"
										if(!value && recordStatus.toLowerCase() != "y"){
											$("#jqxGrid").jqxGrid('setcellvalue', data, 'linkStatus', event.args.checked);
											setUpdateRows(data);	
										}
										
										//if column header checkbox is not indeterminate state & isDisabled value is "N"
										if(!checkboxState && recordStatus.toLowerCase() != "y")
										{
											$("#jqxGrid").jqxGrid('setcellvalue', data, 'linkStatus', event.args.checked);
											setUpdateRows(data);	
										}
									}
									else
									{
										//if column header checkbox is not indeterminate state
										if(!checkboxState)
										{
											$("#jqxGrid").jqxGrid('setcellvalue', data, 'linkStatus', event.args.checked);
										}
									}
															
								}
								$("#jqxGrid").jqxGrid('endupdate');
							});
							return true;
						}
						else
						{
							var linkStatusChkbox = $(element).find('#linkedToDomain');
							$(linkStatusChkbox).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0, disabled:true });
						}
					},
					cellclassname:applyAesthetics
				},
				{ text: 'Name', editable: false, datafield: 'Name',filtertype: 'textbox', width: "20%",minwidth: 115, cellclassname: applyAsthetics },
				{ text: 'Account', editable: false, datafield: 'accountNumber',filtertype: 'textbox', width: "20%",minwidth: 115, cellclassname: applyAsthetics },
				{ text: 'Company', editable: false, datafield: 'companyName',filtertype: 'textbox', width: "20%", cellclassname: applyAsthetics },			  
				{ text: 'Email Address', editable: false, datafield: 'emailAddress',filtertype: 'textbox', cellsformat: dateFormat, width: "20%", cellclassname: applyAsthetics },
				{ text: 'Status', editable: false, datafield: 'Status', filtertype: 'textbox', width: "15%", cellclassname: applyAsthetics, filtertype: 'checkedlist'}
			],
			ready: function () {
				
			}
		});

Thanks & Regards,
Selva

[DimitarParticipant]

Hi Selva,

I am sorry, the issue was in my example. Instead of selectionmode: 'selectionmode' it has to be selectionmode: 'checkbox':

<!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: 'checkbox',
                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,
Dimitar

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

[rajParticipant]

Hi Dimitar,

The above solution is fine but in my case I want to make the checkbox “non-editable” i.e. should not be checked; when individual row checkbox or Check All checkbox is checked based on the hidden column flag (“hasAccess” : true/false).

Though I don’t know the exact “rowindex“, the below piece of code under “rowselect” event -> else if block is failing when “Check All” scenario.

$('#jqxgrid').on('rowselect', function (event) {
	var rowBoundIndex = event.args.rowindex;
	var rowVal = $('#jqxgrid').jqxGrid('getrowdata', rowBoundIndex);
	
	if(!rowVal.hasAccess) {
		$('#jqxgrid').jqxGrid('unselectrow', rowBoundIndex);
	} else if (typeof rowBoundIndex === 'object') {
		if(!rowVal.hasAccess) {
			$('#jqxgrid').jqxGrid('unselectrow', rowBoundIndex);
		}
	}
});

Can someone suggest me a solution?

Looking forward.

Thanks,
Raj

[DimitarParticipant]

Hi Raj,

In the case of “Check All”, rowBoundIndex is an Array and you cannot pass it directly to unselectrow. You would have to iterate through all rows and unselect all those with hasAccess equal to false in the “else if” block.

Best Regards,
Dimitar

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

[Author]

Posts