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

[Jeff]

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.

 

[Jeff]

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)

}

[Jeff]

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)

}

[Jeff]

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)

}

[Jeff]

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]

Thank you jeff, this works to me aswell.