inline editing for select dropdown

bhushanpatil · March 2018

I am implementing Datatable editor. i want to add select dropdown in table,as well as while adding new record also. i refer the example from given link but it is not working for me. only change is instead of ajax call,i am directly reading data from JavaScript variable.

Please refer the example on the given https://editor.datatables.net/examples/inline-editing/join.html

please suggest if any changes more required in given example

allan · March 2018

Can you link to your page showing the issue please? The example you linked to appears to be showing the select field inline for me no problem.

Allan

bhushanpatil · March 2018

its available locally
now i am able to populate select dropdown.
but the thing is not able to save the data inline as well as on popup(new row)

bhushanpatil · March 2018

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    
    editor = new $.fn.dataTable.Editor( {
                
        /*"ajax": {
            "url": "data.json",
            "type": "POST",
            "dataType": "json",
            "data": function(d) {
                return JSON.stringify(d);
            }
            },*/
        processing: true,
        data:data,
        table: "#example",
        fields: [ 
            {
                label: "First name:",
                name: "users.first_name"
            }, {
                label: "Last name:",
                name: "users.last_name"
            }, {
                label: "Phone #:",
                name: "users.phone"
            },
            {
                type:  "select",
                label: "Site:",
                name:  "users.site",
                options: data.options['users.site']
            }
        ],
        
        formOptions: {
            bubble: {
                title: 'Edit',
                buttons: false
            }
        }
    } );
    
    editor.on( 'preSubmit', function ( e, o, action ) {
        if ( action !== 'remove' ) {
            var firstName = this.field( 'users.first_name' );
 
            // Only validate user input values - different values indicate that
            // the end user has not entered a value
            if ( ! firstName.isMultiValue() ) {
                if ( ! firstName.val() ) {
                    firstName.error( 'A first name must be given' );
                }
                 
                if ( firstName.val().length >= 20 ) {
                    firstName.error( 'The first name length must be less that 20 characters' );
                }
            }
 
            // ... additional validation rules
 
            // If any error was reported, cancel the submission so it can be corrected
            if ( this.inError() ) {
                return false;
            }
        }
    } );
 
    $('button.new').on( 'click', function () {
        alert("hiiii");
        editor
            .title( 'Create new row' )
            .buttons( { "label": "Add", "fn": function () { editor.submit() } } )
            .create();
    } );
 
    /*$('#example').on( 'click', 'tbody td', function (e) {
        if ( $(this).index() <2 ) {
            editor.bubble( this );
        }
    } );*/
 
    $('#example').on( 'click', 'a.remove', function (e) {
        editor
            .title( 'Delete row' )
            .message( 'Are you sure you wish to delete this row?' )
            .buttons( { "label": "Delete", "fn": function () { editor.submit() } } )
            .remove( $(this).closest('tr') );
    } );
    
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            onBlur: 'submit'
        } );
    } );
 
    $('#example').DataTable( {
        //ajax: "../php/staff.php",
        data:data.data,
        dom: 'Bfrtip',
        table: "#example",
        processing: true,
        columns: [
             //{ data: "DT_RowId" },
              {
                data: null,
                defaultContent: '',
                //className: 'select-checkbox',
                //orderable: false
             },
             { data: "users.first_name" },
             { data: "users.last_name" },
             { data: "users.phone" },
             { data: "sites.name", editField: "users.site",/*defaultContent: ""*/ },
             //{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },
             /*{
                data: null,
                defaultContent: '<a href="#" class="remove">Delete</a>',
                orderable: false
             },*/
        ],
        
        order: [ 1, 'asc' ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        
        language: {
                //"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json",
                //"dataType":"json"
            },
        
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
                
    } );
} );    


var data={
  "data": [
    {
      "DT_RowId": "row_1",
      "users": {
        "first_name": "Quynn",
        "last_name": "Contreras",
        "phone": "1-971-977-4681",
        "site": "1"
      },
      "sites": {
        "name": "Edinburgh"
      }
    },
    
    {
      "DT_RowId": "row_24",
      "users": {
        "first_name": "Maris",
        "last_name": "Leblanc",
        "phone": "1-936-114-2921",
        "site": "6"
      },
      "sites": {
        "name": "Los Angeles"
      }
    },
   
    {
      "DT_RowId": "row_36",
      "users": {
        "first_name": "Stewart",
        "last_name": "Chan",
        "phone": "1-781-793-2340",
        "site": "2"
      },
      "sites": {
        "name": "London"
      }
    }
  ],
  "options": 
  {
    "users.site": 
    [
      {
        "label": "Edinburgh",
        "value": "1"
      },
      {
        "label": "London",
        "value": "2"
      },
      {
        "label": "Los Angeles",
        "value": "6"
      },
      {
        "label": "New York",
        "value": "4"
      },
      {
        "label": "Paris",
        "value": "3"
      },
      {
        "label": "Singapore",
        "value": "5"
      }
    ]
  },
  "files": []
} 
        
</script>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · March 2018

but the thing is not able to save the data inline as well as on popup(new row)

I'm afraid I don't quite understand what you mean. You say inline but also popup in the same sentence. Could you show me a screen shot of the issue?

Allan

bhushanpatil · March 2018

Thanks for the reply @allan
i have added create button also,so on click of that button,whatever data entered is save except select drop down.
Same in case of inline editing for select dropdown

PFA screenshots for the same

allan · March 2018

I see the issue - thanks. The problem is that since you aren't submitting the data to the server, it can't provide the left joined data for the site name.

If you notice, the data fed into the table looks like this:

    {
      "DT_RowId": "row_36",
      "users": {
        "first_name": "Stewart",
        "last_name": "Chan",
        "phone": "1-781-793-2340",
        "site": "2"
      },
      "sites": {
        "name": "London"
      }
    }

But after an edit it looks like this:

    {
      "DT_RowId": "row_36",
      "users": {
        "first_name": "Stewart",
        "last_name": "Chan",
        "phone": "1-781-793-2340",
        "site": "2"
      }
    }

Thus the error from the DataTable.

If you want to do this client-side, what I would suggest is that you don't include sites.name at all - instead use a renderer which will lookup the correct name to display based on users.site.

Allan

bhushanpatil · March 2018

Thank you so much @allan ,using render its working

code changes

editor.field('users.site').input().on('change', function () {
fieldName=$('option:selected', this).text();
} );

{ data: null, editField: "users.site",
render: function ( data, type, row ) {

                if(fieldName!=null)
                    return fieldName;
                return data.sites.name;

}

please let me know,is this the right approach

allan · March 2018

I'm not sure about that to be honest. It seems like it would be wrong if you edited more than one row and then invalidated the original row.

I think you'll need a list of the value / labels on the client side so you can do something like:

render: function ( data, type, row ) {
  return sites[ data ].name;
}

where sites is an object with the keys set to by the site id.

Allan

inline editing for select dropdown

inline editing for select dropdown

Answers

Howdy, Stranger!

Categories

DataTables

inline editing for select dropdown

inline editing for select dropdown

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables