Multi row edit using checkboxes

sushmas

I have seen examples on this site where user can select multiple rows and use a 'edit' button to do multi row editing. Is there a way to select multiple rows using checkboxes and updating them?

I have tried using "select: true" with values os, multi and somehow I am not able to select multiple rows.

allan

Yes indeed - you can use Select's checkbox selection option.

Allan

sushmas

Thanks Allan. I have tried this, however my 'select' does not seem to work with dataTables. I have installed select along with datatables and included select* files in my html.

Here is my code:

editor = new $.fn.dataTable.Editor( {
        ajax: function (method, url, d, success, error) {
            // Get the row_id and new data
            if ( d.action === 'edit' ) {
                var key = Object.keys(d.data)[0];
                var editedRow = d.data[Object.keys(d.data)[0]];
                editedRow.id = key;
            }
            var cau_table = $('#cau_table').DataTable();
            send_recieve_updates(cau_table, editedRow,  d.rowData, function(updates){
                    success(updates);
            });
        },
        table: "#cau_table",
        idSrc: "id",
        fields: [ 
            {
            label: "Component",
            name: "component"
            },
            {
            label: "Version",
            name: "version",
            },
            {
            label: "License",
            name: "license"
            },
            {
            label: "Usage",
            name: "usage",
            type: "select",
            options: [
                      {label:'DEVELOPMENT_TOOL', value:'DEVELOPMENT_TOOL'},
                      {label:'COMPONENT', value:'COMPONENT'},
                      {label:'COMPONENT_MODULE', value:'COMPONENT_MODULE'},
                      {label:'FILE', value:'FILE'},
                      {label:'SNIPPET', value:'SNIPPET'},
                      {label:'PREREQUISITE', value:'PREREQUISITE'}
                      ]
            }
            ]
    });

    var cau_tab = $('#cau_table').DataTable({
        'data': [],
        ajax: function (method, url, data, success, error) {
            populate_cau(); //populates this table
            },
        'select': {
            style: 'multi' },
        'columns': [
            {'data':'component'},
            {'data':'version'},
            {'data':'license'},
            {'data':'usage'}
        ],
        'order': [ 1, 'asc' ],
        'buttons': [
            { 'extend': "edit", editor: editor}
        ],
        'pagingType':'full_numbers'
    });

    cau_tab.on( 'click', 'tbody td:not(:nth-child(1), :nth-child(3))', function (e) {
            var myRow = this.parentNode;
            editor.inline( this,{
                  buttons: { label: '>', fn: function () { this.submit(); }
                  }
            } );
            editor.on( 'preSubmit', function ( e, data ) {
                if ( this.val( 'version' ) === '' ) {
                    this.error( 'version', 'Version name is required' );
                    return false;
                }
                data.rowData = cau_tab.row( myRow ).data();
            } );
    } );

And this is how I have included js and css in html:

    <script src="{{ static.js.jqueryUI }}"></script>
    <script src="{{ static.js.fancytree }}"></script>
    <script src="{{ static.js.select2 }}"></script>
    <script src="{{ static.js.datatables }}"></script>
    <script src="{{ static.js.datatables_buttons }}"></script>
    <script src="{{ static.js.datatables_editor}}"></script>
    <script src="{{ static.js.datatables_select }}"></script>
    <script src="{{ static.js.tooltip }}"></script>
    <script src="{{ static.js.task }}"></script>
    <script src="{{ static.js.codetree }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ static.css.fancytree_bootstrap_ui }}"/>
    <link rel="stylesheet" type="text/css" href="{{ static.css.fancytree_win8_ui }}"/>
    <link rel="stylesheet" type="text/css" href="{{ static.css.select2 }}"/>
    <link rel="stylesheet" type="text/css" href="{{ static.css.datatables_jquery }}"/>
    <link rel="stylesheet" type="text/css" href="{{ static.css.datatables_buttons }}"/>
    <link rel="stylesheet" type="text/css" href="{{ static.css.datatables_editor }}"/>
    <link rel="stylesheet" type="text/css" href="{{ static.css.datatables_select }}"/>
    <link rel="stylesheet" type="text/css" href="{{ static.css.codetree }}"/>

Am I missing something here? I have tried the 'select-checkbox' as well, but I see an empty column when I did that.

Thanks

allan

Could you give me a link to the page showing the issue so I can debug it please? I don't immediately see anything wrong there (although you would need to use the select-checkbox class for a column if you want to use Select's checkbox option).

Allan

sushmas

Allan,

I cannot send a link, as this test server is inside the secure server. I have tried 'select-checkbox' as well. But the code I attached here is for multi select.
I have a feeling it is something to do with select extension that I am missing.
Thanks,
Sushma

allan

Example with single row selection: http://live.datatables.net/focixepo/1/edit .

Allan

sushmas

Allan,
Thank you for the example.

I was debugging this issue further and saw that I was using select and button extensions that came with the Editor.
I downloaded the latest 1.1.0 versions for both, now I can see the checkbox and also select single/multiple rows. However I continue to have issue with button.

These buttons are not displayed. In one forum discussion, you have suggested to use dom: 'B'. When I do that I see this error:
cannot read property i18n of null

Here is part of my code:

 var cau_tab = $('#cau_table').DataTable({
        'data': [],
        //dom: 'B',
        ajax: function (method, url, data, success, error) {
            populate_cau(); //populates this table
            },
        columns: [
            {
             data: null,   
             defaultContent: '',   
             className: 'select-checkbox',
             orderable: false
            },
            {data:'component'},
            {data:'version', className: 'editable'},
            {data:'license'},
            {data:'usage', className: 'editable'}
        ],
        select: {
             style:    'single',
             selector: 'td:first-child'
             },
        buttons: { 
             buttons: ['create', 'edit' ]},
    });
 
    cau_tab.on( 'click', 'tbody td.editable', function (e) {
            var myRow = this.parentNode;
            editor.inline( this );
            editor.on( 'preSubmit', function ( e, data ) {
                data.rowData = cau_tab.row( myRow ).data();
            } );
    } );

I have also tried this way:

 buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]

Thanks,
Sushma

allan

I would suggest trying dom: "Bfrtip",, like that used in the Editor examples (see also the dom reference documentation).

Allan

sushmas

I have also tried 'Bfrtip', I see same error.
Thanks

allan

Can you link to the page so I can debug it in that case please.

Allan

sushmas

I don't exactly know what did the trick. Now I see the 'edit' button above the data table.

I downloaded and installed all new extensions including dataTable, editor, chrome, firefox. Used 'Bfrtip' and button extend.
Finally it worked, thanks Allan for your help.