We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Disable / Hide some checkboxes for some rows

Disable / Hide some checkboxes for some rows

Hi Syncfusion team,

i have a grid with some datarows, and a function for the rowDataBound.

The first column of the grid is a checkbox, now i try to disable/ hide it in some rows.

How can i do this in a simple way?

Here part of my grid code:
 gridData = new ej.grids.Grid({
                dataSource: ArrParts,
                columns:[
                    {type:'checkbox'},
                    {field: 'sDate',headerText:'Fecha',textAlign:'Left' },
                    {field: 'codeUser',headerText:'Código',textAlign:'Right'},
                    {field: 'sFullname',headerText:'Operario',textAlign: 'Left',type:'string'},
                    {field: 'codeProject',headerText:'Código',textAlign: 'Right'},
                    {field: 'projectDesc',headerText:'Obra',textAlign:'Left'},
                    {field: 'sTaskCode',headerText:'Código',textAlign: 'Right',type:'string'},
                    {field: 'sDesc',headerText:'Tarea',textAlign:'Left', type:'string'},
                    {field: 'fHours', headerText: 'Horas', textAlign:'Center', type:'number'},
                    {field: 'sHourType', headerText: 'Tipo', textAlign:'Center', type:'text'},
                    {field: 'fPrice', headerText: 'Coste', textAlign:'Center',type:'number'},
                    {field: 'sComments', headerText: 'Comentarios', textAlign:'Left',type:'text'}
                ],

And the RowBound code:

 function gridDataRowBound(args)
        {
            console.log(args);
            if(args.data != null)
            {
                LOG("ID: " + args.data['idpk'] + " VAL: " + args.data['booVal'] + " BG: " + args.data['booBaseges']);

                var booIsCheckeable = true;
                if(args.data['booVal'] == '1' && args.data['booBaseges'] =='0')
                {args.row.classList.add('rowPartValidated');booIsCheckeable = false;}
                else if(args.data['booVal'] == '1' && args.data['booBaseges'] =='1')
                {args.row.classList.add('rowPartBaseges');booIsCheckeable = false;}
                
                var myCheckRow = args.row.cells[0].getElementsByClassName("e-checkselect");
                LOG("myCheckRow");
                LOG(myCheckRow);
                if(!booIsCheckeable)
                {
                    myCheckRow[0].hidden = true;
                    myCheckRow[0].disabled = true;
                }
                
            }
            
        }

8 Replies
PS Pavithra Subramaniyam Syncfusion Team January 10, 2019 05:05 AM UTC

Hi Miguel, 
 
Thanks for contacting Syncfusion support. 
 
You can achieve your requirement by adding the CSS class for the checkbox cell as given below. Please refer the below code example and sample link. 
 
In the below demo, the checkbox in the rows which are having the value for Freight column below 30 is disabled. 
 
[index.js] 
var grid = new ej.grids.Grid({ 
        dataSource: data, 
        columns: [ 
            { type: 'checkbox', width: 50 }, 
            { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }, 
            { field: 'ShipCountry', headerText: 'Ship Country', width: 150 } 
        ], 
        rowDataBound: (args) => { 
            if (args.data['Freight'] < 30) { 
                args.row.getElementsByClassName('e-gridchkbox')[0].classList.add('disablecheckbox'); 
                args.row.getElementsByClassName('e-checkbox-wrapper')[0].classList.add('disablecheckbox') 
            } 
        } 
    }); 
    grid.appendTo('#Grid'); 
 
[CSS] 
.disablecheckbox { 
        pointer-events: none; 
        opacity: 0.5; 
    } 
 
 
Please contact us if you need any further assitence. 
 
Regards, 
Pavithra S. 
 


MV Miguel Varela Rodriguez January 10, 2019 09:32 AM UTC

Thank you, this worked great.

Now i got the problem that i need to disable the selection for this row, not just the checkbox.

If i use the check all button or click on a row with a disabled checkbox, it still gets checked.

Thank you for your help in advance.

PS Pavithra Subramaniyam Syncfusion Team January 10, 2019 10:40 AM UTC

Hi Miguel, 
 
You can disable the selection for the required rows by using the ‘checkBoxChange’ event which will be triggered while the selection checkbox state is changed. Please refer to the below code example, Documentation link and sample link for more information. 
 
In the below sample, we have get selectedRowIndex from the checkBoxChange event and get row details using getRowByIndex method and based on the condition(whether the checkbox disable or not) we have select rows by selectRows method of Grid. 
 
[index.js] 
var grid = new ej.grids.Grid({ 
        dataSource: data, 
        selectionSettings: { checkboxOnly: true }, 
        columns: [ 
            { type: 'checkbox', width: 50 }, 
            { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }, 
        ], 
        rowDataBound: (args) => { 
            if (args.data['Freight'] < 30) { 
                args.row.getElementsByClassName('e-gridchkbox')[0].classList.add('disablecheckbox'); 
                args.row.getElementsByClassName('e-checkbox-wrapper')[0].classList.add('disablecheckbox') 
            } 
        }, 
        checkBoxChange: (args) => { 
            var customselect = []; 
            if (args.checked && args.target.classList.contains('e-checkselectall')) { 
                for (var i = 0; i < args.selectedRowIndexes.length; i++) { 
                    var row = grid.getRowByIndex(args.selectedRowIndexes[i]); 
                    if (!row.querySelector('.disablecheckbox')) { 
                        customselect.push(args.selectedRowIndexes[i]) 
                    } 
                } 
                grid.selectRows(customselect) 
            } 
        } 
    }); 
    grid.appendTo('#Grid'); 
 
Note: We have enabled ‘selectionSettings.checkboxOnly’ property so the rows will be selected only while click on the checkbox. 
 
 
Sample               : https://stackblitz.com/edit/8dfcul-vqgbr2?file=index.js  
 
Regards, 
Pavithra S. 
 


NO Noel May 31, 2019 02:56 AM UTC

Hi Syncfusion team,

Can you convert this into React using ES6. I cannot convert into React. I'm newbie in React.


Regards,
Noel

PS Pavithra Subramaniyam Syncfusion Team May 31, 2019 05:52 AM UTC

Hi Noel,  
 
Query: “Can you convert this into React using ES6. I cannot convert into React” 
 
As per your requirement we have achieved your requirement (“to disable the checkbox in row based on data and prevent it from further selection”) in react component. We have achieved your requirement using rowDataBound and checkBoxChange event of Grid. Refer the below code example 
 
[index.js] 
 
constructor() { 
    super(...arguments); 
    // to diable the checkbox from selection 
   this.rowDataBound = (args)=>{ 
        if (args.data['Freight'] < 30) {  
            args.row.getElementsByClassName('e-gridchkbox')[0].classList.add('disablecheckbox');  
            args.row.getElementsByClassName('e-checkbox-wrapper')[0].classList.add('disablecheckbox')  
        }  
    } 
    // to prevent the disabled checkbox from selection while using selectall checkbox 
    this.onCheckBoxChange = (args)=>{ 
    var customselect = [];  
        if (args.checked && args.target.classList.contains('e-checkselectall')) {  
            for (var i = 0; i < args.selectedRowIndexes.length; i++) {                    
                var row = this.getRowByIndex(args.selectedRowIndexes[i]);  
                if (!row.querySelector('.disablecheckbox')) {  
                    customselect.push(args.selectedRowIndexes[i])  
                }  
            }  
            this.selectRows(customselect)  
        }  
} 
} 
 
render() { 
    return (<div className='control-pane'> 
            <div className='control-section row'> 
                  <GridComponent dataSource={orderDataSource} checkBoxChange={this.onCheckBoxChange} selectionSettings={this.selectionsettings} allowPaging={true} ref={grid => this.gridInstance = grid} rowDataBound={this.rowDataBound} pageSettings={{ pageSize: 10, pageCount: 5 }}> 
                    <ColumnsDirective> 
…………………………………………………… 
                    </ColumnsDirective> 
                    <Inject services={[Filter, Page]}/> 
                </GridComponent> 
            </div> 
 
        </div>); 
} 
} 
 
render(<FilterMenu />, document.getElementById('sample')); 
 
 
[index.css] 
 
.disablecheckbox {  
    pointer-events: none;  
    opacity: 0.5;  
}  
 
 
For your convenience we have prepared a sample which can be referred below  
 
 
Refer our API documentation for your reference 
 
 
 
 
 
Please get back to us if you have further queries.  
 
Regards, 
Pavithra S  
 


NO Noel May 31, 2019 06:40 AM UTC

Hi Pavit

When I applied it on my project and tried to choose single select one by one there is no error but when i clicked the Select All button, error appears
See below error screenshot



Error occured also in your sample.

Thanks.
Regards,
Noel


NO Noel May 31, 2019 07:16 AM UTC

Hi I already found the solution. I believed you missed this.



Another question that I would like to ask for batch editing.
When I select multiple row to  and click the edit button to update common fields, dialog will pop-up






How I am going not to display the all the fields in the dialogue template ? 


Thanks.
regards,
NOel




Thanks.

PS Pavithra Subramaniyam Syncfusion Team June 3, 2019 09:06 AM UTC

Hi Miguel, 
 
We are glad that you found the solution at your end. 
 
In Essential JavaScript 2 Grid, it is not possible to update the multiple rows in Dialog edit mode. You can only able to edit one row at a time. If you want to do multiple row editing then your can use the Batch editing mode in which you can save the bulk changes. Please refer to the below documentation link for more information. 
 
 
Demo                  : https://ej2.syncfusion.com/react/demos/#/material/grid/batch 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


Loader.
Up arrow icon