Iterate MJoin options and show text box with labels

dynasoft

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Hi
I have an MJoin as per https://datatables.net/forums/discussion/62907 which displays options. I need to show these as labels with a text box so users can enter a quantity value.Here's the MJoin:

                editor.MJoin(new MJoin("DDIs")
                    .Model<SubsPacksDBModel.DDIs>()
                    .Name("GlobalPacksDDIs")
                    .Link("GlobalSubsPacks.id", "GlobalSubsPacksRelations.SubPackID")
                    .Link("DDIs.id", "GlobalSubsPacksRelations.ParamID")
                    .Where(q =>
                        q.Where("GlobalSubsPacksRelations.ParamType", "3", "=")
                    )
                    .Order("DDIs.id ASC")
                    .Field(new Field("id")
                        .Options(new Options()
                            .Table("DDIs")
                            .Value("id")
                            .Label(new[] { "DdiNumber", "Description" })
                        )
                    )
                );

                    }, {
                        label: '',
                        name: 'GlobalPacksDDIs[].id',
                        type: 'text',
                        data: function (row, type, val) {

                            if (IsNullOrEmpty2(row.GlobalPacksDDIs.Description))
                            {
                                return row.GlobalPacksDDIs.DdiNumber;
                            }
                            else
                            {
                                return row.GlobalPacksDDIs.DdiNumber + ' (' + row.GlobalPacksDDIs.Description + ')';
                            }
                        }
                    }

If I choose a checkbox the boxes show but nothing shows if I specify field type 'text' (with the if else statement commented out). I need to show the DdiNumber and Description together as per the if else statement if the Description is non null. Thanks.

dynasoft

"I need to show the DdiNumber and Description together as per the if else statement if the Description is non null."
Managed to show this using the render method on the server.
Still unsure how to list the options using labels/textboxes. Works if I use checkbox but I need one label/textboxe per option.

allan

Sorry, but that isn't something that Editor can currently do. You could create a custom plugin for Editor which would allow multiple inputs per field, and then submit that in an array or object, but that isn't something that we've got built in.

Also, per our discussion in this thread Mjoin can't write values to multiple fields like that, so work would be required on the server-side as well.

A parent / child table is the way to approach this in Editor at the moment without a large amount of work.

Allan

dynasoft

I'm wlling to handle the code on the server as I have had to do this in many other places but the ability to show options as labels & textboxes I would have thought is something basic to support.

dynasoft

Before I go down the road of the plugin, please confirm a label and text box combination is theoratically possible to show as options once I specify the plugin control's name in that editor type property. Also please confirm any data the user enters in that textbox will be transmitted as part of the server's post events (PostCreate, PostEdit,...). Thx.

dynasoft

Hi, I tried implemtning the example given here but only get one set of buttons instead of as many sets of buttons as there are options in my MJoin. Is this normal or am I missing something? Thanks.

dynasoft

• JS:

(...)
                    }, {
                        label: '',
                        name: 'GlobalPacksDDIs[].id',
                        type: 'labeltext'
                    }
(...)
        (function ($, DataTable) {
 
            if ( ! DataTable.ext.editorFields ) {
                DataTable.ext.editorFields = {};
            }
 
            var Editor = DataTable.Editor;
            var _fieldTypes = DataTable.ext.editorFields;
 
            _fieldTypes.labeltext = {
                create: function ( conf ) {
                    var that = this;
 
                    conf._enabled = true;
 
                    // Create the elements to use for the input
                    conf._input = $(
                        '<div id="'+Editor.safeId( conf.id )+'">'+
                            '<button type="button" class="inputButton" value="0">To do</button>'+
                            '<button type="button" class="inputButton" value="1">Done</button>'+
                        '</div>');
 
                    // Use the fact that we are called in the Editor instance's scope to call
                    // the API method for setting the value when needed
                    $('button.inputButton', conf._input).click( function () {
                        if ( conf._enabled ) {
                            that.set( conf.name, $(this).attr('value') );
                        }
 
                        return false;
                    } );
 
                    return conf._input;
                },
 
                get: function ( conf ) {
                    return $('button.selected', conf._input).attr('value');
                },
 
                set: function ( conf, val ) {
                    $('button.selected', conf._input).removeClass( 'selected' );
                    //$('button.inputButton[value='+val+']', conf._input).addClass('selected');
                },
 
                enable: function ( conf ) {
                    conf._enabled = true;
                    $(conf._input).removeClass( 'disabled' );
                },
 
                disable: function ( conf ) {
                    conf._enabled = false;
                    $(conf._input).addClass( 'disabled' );
                }
            };
        })(jQuery, jQuery.fn.dataTable);

allan

Yes it is certainly possible to show multiple input values per field - the upload-many field type which is built in does that for example. That’s not to say that it is trivial though - you’ll need to update the get and set functions to handle arrays of data (or possibly objects - it depends a little bit on how you want the data at the server-side. Since this is not something that Editor attempts to handle itself, you’d largely be defining this behaviour yourself).

The way I would probably do it is to change name: 'GlobalPacksDDIs[].id', to be name: 'GlobalPacksDDIs', which will pass in that array as the “value” to your set function. Then create an input element for each array entry (this is the main bit of what is missing in the example you gave above), giving it its value from the quantity, and an identifier based on the id (so you can then reverse map it in the get, which would probably return something like {id1: val1, id2: val2} which can be decoded at the server, mapping the values to the rows in the joined table that need to be updated.

The plug-in will get a bit more complicated from there perhaps, as you might want to handle adding and removing new inputs - unless you want a fixed length of input options per row.

You might start to see now why it isn’t “something basic to support” .

Unless the UI requirements are fixed like this, I’d be tempted to use a child table for the Mjoin editing, which will involve a lot less work.

Allan

dynasoft

Thanks Allan.

"The plug-in will get a bit more complicated from there perhaps, as you might want to handle adding and removing new inputs - unless you want a fixed length of input options per row."

I thought the number of sets of labels/boxes would be set based on the values found under the Options property in the server in the MJoin?

dynasoft

I tried what you suggested to read the array in set but parameter conf below just returns one element in array with no reference to the expected values for GlobalPacksDDIs. val returns an empty array. Here's the code I have:

(...)
                    }, {
                        label: '',
                        name: 'GlobalPacksDDIs',
                        type: 'labeltext',
                    }
(...)
        (function ($, DataTable) {
 
            if ( ! DataTable.ext.editorFields ) {
                DataTable.ext.editorFields = {};
            }
 
            var Editor = DataTable.Editor;
            var _fieldTypes = DataTable.ext.editorFields;
 
            _fieldTypes.labeltext = {
                create: function ( conf ) {
                    var that = this;
                    conf._input = $(
                        '<div class="form-group" id="'+Editor.safeId( conf.id )+'">'+
                            '<span class="nowrap">'+
                                '<label class="tfDefaultLabel">'+
                                    'Dfrert:'+
                                    '<input type="text" placeholder="@(lblo.lblQuantity)"/>'+
                                '</label>'+
                            '</span>'+
                        '</div>');
 
                    return conf._input;
                },

                get: function ( conf ) {
                    return $('input', conf._input).attr('value');
                },
 
                set: function ( conf, val ) {
                    //$('button.selected', conf._input).removeClass( 'selected' );
                    //$('button.inputButton[value='+val+']', conf._input).addClass('selected');
                    alert(conf._input[0].innerText);
                    alert(val);
                },
            };
        })(jQuery, jQuery.fn.dataTable);

allan

I thought the number of sets of labels/boxes would be set based on the values found under the Options property in the server in the MJoin?

That would work and be a good way of doing it if that is what you want the UI to look like. To some extent that’s how the checkbox input works, and you could perhaps base your code on that particular input from Editor.

I don’t see a for loop in your setup code for your plug-in there, which you would need to show a label / input per option.

Yup, the more I think about it, the more I think that you should use the checkbox code as a base for this. It will need some changes - like the get and set will probably need to be turned into an object based set of values, and of course the server-side code would need to be written to support that, but that’s how I’d approach it myself (if using a parent / child wasn’t an option).

Allan

dynasoft

Thanks

dynasoft

Hi
I've come back to this. You indicate the checkbox input works along the same line as what I'm trying to achieve. Do you have an example that shows how the input checkbox works with setters, getters and creates. Also one that shows that for loop iterating round the values (from the server).
Many thanks.,

allan

Hi,

I don't have such an example I'm afraid. It would require, as I say, a custom plug-in for Editor - probably based upon the built in checkbox type, the code for which you could take have a look at to see how it works. I'm happy to explain any part of that code if anything isn't clear.

Allan

dynasoft

Hi

Thanks. You mention this:

"based upon the built in checkbox type, the code for which you"

Sorry but I see no code for the checkbox type in page https://editor.datatables.net/manual/development/field-types or code that uses set/get/create on pages https://editor.datatables.net/reference/field/checkbox and https://editor.datatables.net/examples/simple/fieldTypes.html. Maybe I'm missing something.

Also, I'm not clear how to iterate via a for loop in the "setup code". Is this in the set property?

The data table is set like so:

(...)
                    { data: 'GlobalPacksDDIs[].id' ,
                        className: 'text-left'
                    }
(...)

The editor like so:

(...)
                    }, {
                        label: '',
                        name: 'GlobalPacksDDIs[].id',
                        type: 'labeltext',
                    }
(...)

Server code:

(...)
editor.MJoin(new MJoin("DDIs")
.Model<SubsPacksDBModel.DDIs>()
.Name("GlobalPacksDDIs")
.Link("GlobalSubsPacks.id", "GlobalSubsPacksRelations.SubPackID")
.Link("DDIs.id", "GlobalSubsPacksRelations.ParamID")
.Where(q =>
q.Where("GlobalSubsPacksRelations.ParamType", "3", "=")
)
.Order("DDIs.id ASC")
.Field(new Field("id")
.Options(new Options()
.Table("DDIs")
.Value("id")
.Label(new[] { "DdiNumber", "Description" })
)
)
);
(...)

allan

Sorry but I see no code for the checkbox type in page

There isn’t any - so you aren’t missing anything. What I’d meant, and wasn’t clear about, sorry, was that you could use the code inside the Editor JS file for the checkbox as a starting point for such a plug-in.

Allan

dynasoft

Sorry but which file is the Editor JS file?

allan

dataTables.editor.js - the file that contains the Editor code. It's large - you'll need to search for checkbox in it.

Allan

dynasoft

Thank you