Dropdownlist inline using datatable

sherin

Hi,

I am trying to implement dropdownlist inline editing using data table. I want to display the default and upon editing, needs to save data.

Here is my code

editor

var editor = new $.fn.dataTable.Editor( {
        ajax: '/path/retreivedetails/' + Contact.id,
        table: "#contact-datatable",
        fields: [ {
                name: "Category",
                type: "select",
                options: [
                    { label: 'Mr', value: "M" },
                    { label: 'Mrs', value: 'S' },
                    { label: 'Miss', value: 'MS' },
                    { label: 'Dr', value: 'D' },
                   ]
            }, {
                name: "contact_name"
            }, {
                name: "contact_phone"
            }
        ]
        });

data table

 Contact.dataTable = $('#contact-datatable').dataTable( {
        "ajax": {
                "url" : '/path/retreivedetails/' + Contact.id,
                "dataSrc": function(json) {
                        return json.data;
                }
            },
        "responsive": true,
            "bSort" : false,
            "order": [],
            "columns": [
                { "data": "id"},
                { "data": "contact_name" },
                { "data": "contact_phone" },
                 {
                    sortable: false,
                    "render": function ( data, type, full, meta ) {
                         }
                },
            ]

        } );

Editor inline - and save

$('#contact-datatable').on( 'click', 'tbody td:not(:first-child)', function (e) {
                editor.inline( this, { submitOnBlur: true } );
        } );
    },

The issue is :

1) While taking dropdown - it has to display the current value, now it didn't
2) anyone please help me to save the new values that will be selecting from dropdown

allan

Can you link to the page showing the issue please. It sounds like the value of the column might not be present in the list of options available.

Allan

sherin

Sorry, I am developing this in my local server, but I can attach the screenshot of the page. Not sure how can I attach.

• Dropdown list is showing the values - but while doing editing, it has to select current value by default - that is not happening.

• Could you please help me to save updated data selected fro dropdown list?

                   "render": function ( data, type, full, meta ) {
                    Contact.savedetails(data);
                        }

In above code, I written a save function and pass data to it. But it is showing old data not the updated one(that has selected from the dropdown)

allan

I can attach the screenshot of the page. Not sure how can I attach.

There is no image sharing option for the forum. An image sharing site could be used.

However, to be honest, I suspect that an image will be of limited value with regard to being able to debug it. Really I would need access to the page. Possibly the DataTables debugger might give some information as to why it isn't working.

Regarding the second point - I would suggest using the submitOnBlur form-options parameter - something like:

editor.inline( this, {
  submitOnBlur: true
} );

Then when focus is removed from the select list it will be submitted.

Allan

OlivierOlmer

I think that I know your problem.
The data in the table is the label of 1 of the options, instead of the value.

To fix this I created a custom inputfield: lookup:

$.fn.dataTable.Editor.fieldTypes.lookup = $.extend( true, {}, $.fn.dataTable.Editor.models.fieldType, {
    "create": function ( conf ) {
        var that = this;

        var options = "";
        $.each(conf.options, function(key, option) {
            options += '<option value="'+ option.value +'">'+ option.label +'</option>';
        });

        conf._input = $('<select/>')
            .attr( $.extend( {
                id: conf.id,
                'class': ''
            }, conf.attr || {} ) )
            .html(options);

        return conf._input[0];
    },

    "get": function ( conf ) {
        return conf._input.val();
    },

    "set": function ( conf, val ) {
        $.each(conf.options, function(key, option) {
            if (option.label == val) {
                conf._input.val( option.value );
                return false;
            }
        });
    },

    inst: function ( conf ) {
        return conf._input;
    }
} );

You would then need to use type: "lookup"

sherin

Thanks alot OlivierOlmer. It is working for me.

On updating, dropdown shows value instead of label. Is there any solution for this?

sherin

$('#contact-datatable').on( 'click', 'tbody td:not(:first-child)', function (e) {
                editor.inline( this, { submitOnBlur: true } );
        } );

This will escape my first column from inline editing. is there any way to escape last column also? I just want to do inline editing for columns inside

allan

Use:

'tbody td:not(:first-child):not(:last-child)'

See the jQuery selectors documentation.

Allan