Checkbox to string

[Muzaffer Birben]

Hi,

1. I have a checkbox column in the grid and the field value is either a string of "Yes" or "No". I want to display a string, "required" if the field value is "Yes" and want that row in the selectedrows. If the field value is "No", I want to display a checkbox. Whenever I click on the select/unselect all button, I want those changes on the rows that has the field value "No".

  Do you support such a thing like this? 

[Sujith Kumar Rajkumar]

Hi Muzaffer, 

 

Greetings from Syncfusion support. 

 

Your requirement of rendering checkbox or text in a column cell based on field value can be achieved by following the below steps, 

 

Initially define a column template to render a html input checkbox or ‘required’ text based on field value using ‘if’ condition. Similarly, a checkbox input is rendered for the column header template(for performing check all/uncheck all). 

 

This is demonstrated in the below code snippets, 

 

index.html 

<script id="template" type="text/x-template"> 

    <div class="template_checkbox"> 

        ${if(Verified === 'Yes')} 

            <span>Required</span> 

        ${else} 

            <input class="check-input" type="checkbox"> 

        ${/if} 

    </div> 

</script> 

 

<script id="headerTemplate" type="text/x-template"> 

    <div> 

        <input class="check-input" type="checkbox"> 

    </div> 

</script> 

  

index.ts 

let grid: Grid = new Grid({ 

       ... 

    columns: [ 

      { template: '#template', headerTemplate: '#headerTemplate', field: 'Verified' }, 

           ... 

    ], 

}); 

grid.appendTo('#Grid'); 

 

Since overriding the Grid’s default checkbox column to display a text might cause problems on refresh, we suggest you to use this template approach to achieve your requirement. 

 

Now in the Grid’s headerCellInfo(triggered for each header cell) and queryCellInfo(triggered for each content cell) events, the EJ2 CheckBox component with change event is initialized and appended on the input element rendered in the template. 

 

//Grid’s headerCellInfo event handler 

function onHeaderCellInfo(args) { 

    if (args.cell.column.field === 'Verified') { 

        // EJ2 Checkbox is initialized and appended on the template input element 

        let checkbox: CheckBox = new CheckBox({ 

           change: onHeaderCheckboxChange.bind(this)  

        }); 

        var checkboxEle = args.node.querySelector('.check-input'); 

        // Render initialized CheckBox. 

        checkbox.appendTo(checkboxEle); 

    } 

} 

 

//Grid’s queryCellInfo event handler 

function onQueryCellInfo(args) { 

    if (args.column.field === 'Verified') { 

        if (args.data["Verified"] === "No") { 

            // EJ2 Checkbox is initialized and appended on the template input element if the cell value is ‘No’ 

            let checkbox: CheckBox = new CheckBox({ 

                change: onCheckboxChange.bind(this)  

            }); 

            var checkboxEle = args.cell.querySelector('.check-input'); 

            // Render initialized CheckBox. 

            checkbox.appendTo(checkboxEle); 

        } 

    } 

} 

 

Finally in the content checkbox change event, the field value for the current checked row is updated as ‘Yes’ using the Grid’s setCellValue method(will refresh the row to render the template accordingly) and in the header checkbox change event, the checkbox field value for the entire data rows are updated based on the check state(will refresh the rows to render the template accordingly). 

 

// Content checkbox change event 

function onCheckboxChange(args) { 

    // Retrieves current row information 

    var currentRowInfo = grid.getRowInfo(args.event.target); 

    // The checkbox value is updated to its corresponding field 

    // gridInstance.setCellValue(primary key value, column field, updated value)         

    grid.setCellValue(currentRowInfo.rowData['ID'], 'Verified', 'Yes'); 

} 

 

// Header checkbox change event 

function onHeaderCheckboxChange(args) { 

    // The checkbox field value is updated for the entire data source 

    grid.dataSource.forEach(dat => { 

        var value = (args.checked) ? 'Yes' : 'No'; 

        // The checkbox value is updated to its corresponding field 

        // gridInstance.setCellValue(primary key value, column field, updated value)         

        grid.setCellValue(dat['ID'], 'Verified', value); 

    }) 

} 

 

Note: The above header checkbox change approach of updating the entire data value will only work for local data since the entire data source cannot be retrieved when remote data is bound. So for remote data, you would have to retrieve the primary key values of all data and perform the update action. 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/tt4jct?file=index.ts 

 

Note: The Grid’s edit functionality needs to be enabled for updating the cell values. 

 

More details on this can be checked in the below documentation links, 

 

Documentation: https://ej2.syncfusion.com/documentation/grid/columns/#using-condition-template 

                              https://ej2.syncfusion.com/documentation/grid/columns/#header-template 

                              https://ej2.syncfusion.com/documentation/grid/edit/ 

                              https://ej2.syncfusion.com/documentation/check-box/getting-started/ 

 

API: https://ej2.syncfusion.com/documentation/api/grid#headercellinfo 

         https://ej2.syncfusion.com/documentation/api/grid#querycellinfo 

         https://ej2.syncfusion.com/documentation/api/grid#setcellvalue 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R