jQuery UI Widgets Forums Grid How to disable the checkbox when a row is greyed out

This topic contains 5 replies, has 3 voices, and was last updated by  Dimitar 8 years, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • Shelan
    Participant

    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


    Dimitar
    Participant

    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/


    Shelan
    Participant

    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

    • This reply was modified 8 years, 9 months ago by  Shelan.

    Dimitar
    Participant

    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/


    raj
    Participant

    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


    Dimitar
    Participant

    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/

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

You must be logged in to reply to this topic.