This is a migrated thread and some comments may be shown as answers.

Displaying Booleans as "Y/N" values with checkbox editors

4 Answers 178 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
Jeff asked on 15 Feb 2017, 07:29 PM

I have a field in my datasource who's value from the server is a 'Y' or a 'N'. I need to display that string value on the grid. When editing the value, I need to show a checkbox, checked if value == 'Y'.

 

There are 2 ways I can try to solve this problem, as I can tell, but I have problems/questions with each approach.

1. I can change the data model by making the field of type boolean, ie:
model: {
    fields: {

        "myFlag": { type: 'boolean"}

}}

, then changing the template of the column template like so: ` template: "#= (myFlag) ? 'Y' : 'N'"

This gets my desired UI result. However, all of my records on the grid display 'N', even though most of the records have 'Y' as their myFlag value. So therefore, how do I tell the datasource that 'Y' is true and 'N' is false? Furthermore, why does my grid currently treat myFlag as false when myFlag does indeed have a string value in it, which should equate to true.

 

2. The other approach is to leave my data source alone and just build a custom editor. However, most tutorials out there use a template to show a checkbox. I don't want to do that; I want to display "Y/N", and only render the checkbox when editing. I do not see any examples out there with this configuration. Here is my current editor for this checkbox:

editor: function (container, options) {
var value = options.model[options.field];
$('<input required name="' + options.field + '" type="checkbox" data-bind="checked:('+options.field + '==\'Y\')" />')
.appendTo(container)

}

note, i've also tried setting the html attribute 'checked' to no avail.

 

4 Answers, 1 is accepted

Sort by
0
Jeff
Top achievements
Rank 1
answered on 15 Feb 2017, 07:57 PM

I have solved this problem by designating the field as 'string' in the data model, and using the following editor.

 

editor: 

function (container, options) {
     $('<input required name="' + options.field + '" type="checkbox" data-bind="checked:'+options.field + '==\'Y\'" />')
.appendTo(container)

}

0
Jeff
Top achievements
Rank 1
answered on 15 Feb 2017, 08:06 PM

I solved this problem by designating the field as 'string' in the data source, and using the following editor:

 

function (container, options) {
var value = options.model[options.field];
$('<input required name="' + options.field + '" type="checkbox" data-bind="checked:'+options.field + '==\'Y\'" />')
.appendTo(container)

}

0
Jeff
Top achievements
Rank 1
answered on 15 Feb 2017, 08:27 PM

Please forgive the duplicate / multiple posts...

 

I spoke too soon. With the template I provided above, everything is good until I toggle the checkbox, at which point I get an 'Invalid left-hand assignment' error, and the value new doesn't save. Why is that?

editor: function (container, options) {
var value = options.model[options.field];
$('<input  name="' + options.field + '" type="checkbox" data-bind="checked:'+options.field + '==\'Y\'" />')
.appendTo(container)

}

1
Jeff
Top achievements
Rank 1
answered on 15 Feb 2017, 09:41 PM

I think I've solved my own problem, again, by using the parse option on the model schem definition. Here is my schema in my datasource:

model: {
    fields: {
        "myFlag": {

             type: 'boolean",

             parse: function (item) {
                    return (item == 'Y' || item === true);
             }

        }
}}

The `(item === true)` is needed for when the user starts editing the field.

Hopefully this helps someone. I was getting weird behavior when trying to make a custom editor. And the model.field.parse is not explained as much as the schema.parse, and I did not want to parse the entire data set,

JORGE
Top achievements
Rank 1
commented on 23 Nov 2021, 10:16 PM

Thank you jeff, this works to me aswell.
Tags
Grid
Asked by
Jeff
Top achievements
Rank 1
Answers by
Jeff
Top achievements
Rank 1
Share this question
or