cancel
Showing results for 
Search instead for 
Did you mean: 

Column of boolean values not converting to checkboxes within a Data Grid

vice-freak
New Contributor

Hi all,

 

Apologies for the novice question, I have a data grid where three columns all take on the boolean type (i.e. true, false) but for whatever reason I am unable to convert them into checkboxes that are either ticked (true) or unticked (false).

 

In the 'Columns' section of the Data Grid, I changed the 'Format' attribute to boolean, but my data still appears as 'true' and 'false'. Is there a setting that needs to be switched on or something that I have missed preventing me from attaining what I am after?

1 ACCEPTED SOLUTION

ivankk
New Contributor

Checkboxes can be rendered by configuring "Columns > Column x > Template".
Once in template editor, you have to switch to "Advanced mode" and use Handlebars template to render the content, you can try this:

{{#if thisRawValue}}
<i class="mi mi-check-box" style="color: #38a338"></i>
{{else}}
<i class="mi mi-check-box-outline-blank" style="color: #c0c0c0"></i>
{{/if}}

This example uses material icons, you can also use font-awesome icons as both are supported.

 

checkboxes.jpg

 

View solution in original post

3 REPLIES 3

jlucid
Contributor

I think you need the Edit Mode to be set to instant for those click boxes to appear. See edit mode section here.

 

https://code.kx.com/dashboards/datagrid/

ivankk
New Contributor

Checkboxes can be rendered by configuring "Columns > Column x > Template".
Once in template editor, you have to switch to "Advanced mode" and use Handlebars template to render the content, you can try this:

{{#if thisRawValue}}
<i class="mi mi-check-box" style="color: #38a338"></i>
{{else}}
<i class="mi mi-check-box-outline-blank" style="color: #c0c0c0"></i>
{{/if}}

This example uses material icons, you can also use font-awesome icons as both are supported.

 

checkboxes.jpg

 

vice-freak
New Contributor

Perfect solution, thank you kindly ivankk.

 

For anyone reading this in the future, who would like to have green ticks and red crosses, please view the (slightly altered) code below:

{{#if thisRawValue}}

    <i class="fa fa-check" style="color: #00c000"></i>

{{else}}

    <i class="fa fa-times" style="color: #c00000"></i>

{{/if}}