Handling select booleans in an inline editor.

Dan Carroll

I'm trying to get select input working properly. There are 2 issues.
Firstly, I'm wanting to send the update when the user selects an option. I'm using the onBlur:submit option but that only fires when you leave the select box. It would be nice to be able to also fire it when people choose an option.

Also,.. I'm using a render function on the datatable to translate true/false to Yes/No. Default values are displayed, but when you click on the field, the value chosen is always Yes (the first option). Is it possible to set the option to the correct value?

allan

Firstly, I'm wanting to send the update when the user selects an option

Add a change event handler to the input which will call submit(). However, you need to also consider the case for when Editor itself is setting the value, and ignore that (i.e. when the edit starts, Editor has to set the value):

    editor.field('myField').input().on( 'change', function (e, d ) {
        if ( ! d || ! d.editorSet ) {
            editor.submit();
        }
    } );

Default values are displayed, but when you click on the field, the value chosen is always Yes (the first option). Is it possible to set the option to the correct value?

Sounds like the value in the data doesn't match the value in the options list. It is not the rendered value that is used, but rather the underlying value. If that doesn't help resolve the issue, I'd need a link to a page showing the issue to be able to debug it.

Allan

Dan Carroll

Allan, thanks again for your excellent support. The hint was enough to get me going.
Out of curiosity there any way to apply the function to all select boxes in one go? This works for me:

            editor.field('myField1').input().on( 'change', function (e, d ) {
              if ( ! d || ! d.editorSet ) {
                editor.submit();
              }
            } );
            editor.field('myField2').input().on( 'change', function (e, d ) {
                if ( ! d || ! d.editorSet ) {
                  editor.submit();
                }
            } );

But I think it would be nice if I could do something like this:

            editor.field('{ type:select }').input().on( 'change', function (e, d ) {
                if ( ! d || ! d.editorSet ) {
                  editor.submit();
                }
            } );

Also, with regard to the values being chosen, the problem was my field definitions
I had this (notice quotes around the 'value'):

                name: "myField",
                type: "select",
                options: [
                    { label: 'Yes',  value: 'true' },
                    { label: 'No',   value: 'false' },
                ]

When I should have had this:

                name: "myField",
                type: "select",
                options: [
                    { label: 'Yes',  value: true },
                    { label: 'No',   value: false },
                ]

allan

Out of curiosity there any way to apply the function to all select boxes in one go?

yes - using the node() method. That will give you the container nodes for the selected fields, and then you can pick the select elements from that:

$( 'select', editor.node( [ 'field1', 'field2', ... ] ) ).on( 'change', function ... );

Regards,
Allan