Column boolean type with values other than true/false

I have data the uses various string values to represent boolean types, i.e. Y/N, 0/1, True/False, true/false, etc.

Although I am formatting the column definition with type: 'boolean' and displayAsCheckbox: true, the checkboxes in the grid are empty, which would seem to indicate that the grid column doesn't recognize these string values for boolean types.

Is there some way of making the column recognize boolean values other than true/false, or a way of converting the data values through a template or some other means?


3 Replies

AR Aishwarya Rameshbabu Syncfusion Team October 4, 2024 12:32 PM UTC

Hi Bradley Brown,


Greetings from Syncfusion support.


Upon reviewing the provided information, we have observed that you are using string values to represent Boolean types in Syncfusion Grid columns. The 'displayAsCheckbox' property is exclusively applicable to Boolean values in Grid columns (i.e., true or false). However, in your case, the data employs string values such as "Y/N", "0/1", "True/False", or other similar string representations of Boolean values. You can display the checkbox based on the string value by utilizing the column.template property of the Grid.


Please refer to the sample and code example below, where we have defined the data as 'Y'/'N' and rendered the checkbox using a conditional template in the Grid for the Discontinued column. Additionally, please consult the documentation for more information.



Index.html

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

            <div class="template_checkbox">

                ${if(Discontinued === 'Y')}

                <input type="checkbox" checked> ${else}

                <input type="checkbox"> ${/if}

            </div>

        </script>

 

Index.js

 

var grid = new ej.grids.Grid({

    dataSource: categoryData,

    columns: [

            {

                headerText: 'Discontinued', textAlign: 'Center',

                template: '#template', width: 150

            },

            …………………………………..,

        ],

});

grid.appendTo('#Grid');

 


Sample: https://stackblitz.com/edit/tfkap8-uascwj?file=es5-datasource.js,index.html,index.js


Documentation Links:

Using-condition-template

Render-boolean-value-as-checkbox


API References:

template

displayAsCheckbox


If you need any other assistance or have additional questions, please feel free to contact us.



Regards

Aishwarya R



BB Bradley Brown October 4, 2024 02:46 PM UTC

Thank you. This is working perfectly.



PS Pavithra Subramaniyam Syncfusion Team October 8, 2024 10:51 AM UTC

Bradley Brown,


We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.


Loader.
Up arrow icon