Drag value and copy over to other rows - Like excel

singhswat

Hi,

I have got a feature request - not sure if some has implemented something similar. If so, then please share a reference.

Request - Our users want to copy over comments entered in row 1 to other rows say until row 10... like we do in excel

thanks
S

colin

Hi @singhswat ,

Something like this, you mean!?

Cheers,

Colin

singhswat

Yes - thanks Colin
But that looks like a paid version

colin

Yep, it's Editor. The KeyTables extension is still available for use.

C

kthorngren

I think Colin meant the AutoFill Extension.

Kevin

colin

Ah, yep, thanks Kevin, got a wandering mind today!

singhswat

Thanks Guys...

My code snippet

var table2 = $('#DtExample').DataTable({
"processing": true,
"autoWidth": false,
"serverSide": false,
"filter": true,
"paging": false,
"autoFill": true,
"pagelength": 5,
....

},
"columnDefs": [
...
{
"targets": [1],
"visible": true,
"searchable": true,
"width": "50px",
"autoFill": {
vertical: true
},
render: function (data, type, full, meta) {
return "

" + data + "

";
},

This is not working... am i missing something?

kthorngren

This is not working... am i missing something?

Did you install the AutoFill include files (dataTables.autoFill.min.js and autoFill.dataTables.min.css)?

If this doesn't help please provide a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

singhswat

Thanks Kevin it works perfectly fine after adding the js and css...

I already have code that captures edited rows and post back only these edited rows, now if I autofill the rows then the “Callback_details” is not getting fired… any trick for this? (Apologies, I know if have deviated from the original question slightly.)

My code below ( for reference)

 <script type="text/javascript">
            $("#table_header").on("click", "td", function () {
                var th = $('#table_header th').eq($(this).index());
                selectedtable = 'header';
                selectedcolumn = th.text();

            });
            $("#table_detail").on("click", "td", function () {
                var th = $('#table_detail  th').eq($(this).index());
                selectedtable = 'detail';
                selectedcolumn = th.text();
            });

            $('#table_detail').on('click', '.edit', function () {
                var th = $('#table_detail th').eq($(this).index());
                selectedtable = 'detail';
                selectedcolumn = th.text();
                //   alert(th.text()); // returns [object Object]
            });

            $('#table_header tbody').on('click', 'td', function () {
                var columnData = table
                    .column($(this).index() + ':visIdx')
                    .data();
            });


            var table2 = $('#table_detail').DataTable({
                "processing": true, // for show progress bar
                "autoWidth": false,
                "serverSide": false, // for process server side
                "filter": true, // this is for disable filter (search box)
                "paging": false,
                "autoFill": true,
                "pagelength": 5,
                "idisplaylength": 1,
                "scrollX": true,
                "scrollY": "800px",
                "scrollCollapse": true,                
                "scrollCollapse": true,
                "ajax": {
                    url: '@Url.Action("methodName", "Controller")',
                    dataType: "json",
                    type: "post",
                    "data": { ID: getParameterByName("ID"), iscompleted: getParameterByName("iscompleted") }
                },
                "fixedColumns": {
                    "leftColumns": 0
                },
                "columnDefs": [
                             {
                                 "targets": [0],
                                 "visible": false,
                                 "searchable": false,
                                 "width": "10px"
                             },
                           {
                               "targets": [1],
                               "visible": true,
                               "searchable": true,
                               "width": "50px",
                               render: function (data, type, full, meta) {
                                   return "<div class='text-wrap width-100'>" + data + "</div>";
                               },
                           },
                           {
                               "targets": [2],
                               "searchable": true,
                               "orderable": true,
                               "width": "20px"
                           },
                           {
                               "targets": [3],
                               "searchable": true,
                               "orderable": true,
                               "width": "40x",
                               render: function (data, type, full, meta) {
                                   return "<div class='text-wrap width-100'>" + data + "</div>";
                               },
                           },
                            {
                                "targets": [4],
                                "searchable": true,
                                "orderable": true,
                                "width": "40x",
                                render: function (data, type, full, meta) {
                                    return "<div class='text-wrap width-80'>" + data + "</div>";
                                },
                            },
                ],

                "columns": [
                             { "data": "RowId", "name": "RowId", "Visible": false },
                             { "data": "MovieName", "name": "MovieName", "autoWidth": false },
                             { "data": "Director", "name": "Director", "autoWidth": false },
                             { "data": "MovieRating", "name": "MovieRating", "autoWidth": false },                             
                             { "data": "MovieStar", "name": "MovieStar", "autoWidth": false },                             
                ],

                initComplete: function () {
                    this.api().columns().every(function () {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo($(column.footer()).empty())
                            .on('change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>')
                        });
                    });
                }              
            })          
               .MakeCellsEditable({
                   "inputCss": 'my-input-class1',
                   "onUpdate": Callback_details,
                   "columns": [5, 7, 8, 9, 10, 11, 12],
                   "inputTypes": [
                         {
                             "column": 1,
                             "type": "text"
                         },
                          {
                              "column": 2,
                              "type": "text"
                          },
                        {
                            "column": 3,
                            "type": "text"
                        },
                       {
                           "column": 4,
                           "type": "text"
                       },
                   ]
               });           

            var table = $('#table_detail').DataTable();
            // Apply the search
            table.columns().every(function (index) {

                $('.dataTable thead tr:eq(1) th:eq(' + index + ') input').on('keyup change', function () {

                    table.column($(this).parent().index() + ':visible')
                        .search(this.value)
                        .draw();
                });
            });
        });

        function Callback_details(updatedCell, updatedRow, oldValue) {
            debugger;


            // var table = $(updatedCell.closest("table")).DataTable().table();
            //  var t = $(this).closest('.my-input-class1').attr('id');
            // $(updatedRow).find(':input');
            if (updatedCell.data() != oldValue) {

                //ENabling Submit Button..
                $("#submitbtn").show();
                updatedCell.nodes().to$().addClass('highlight');
                // capturing updated rows...
                var UpdatedRws_Lenght = UpdatedRws_details.length;
                if (UpdatedRws_Lenght > 0) {
                    for (var i = 0; i < UpdatedRws_Lenght; i++) {  //Iterate through arrays in updatedrows
                        //check if it is already exist ..
                        if (UpdatedRws_details.indexOf(UpdatedRws_details[updatedRow.index()]) > -1) {

                        }
                        else {
                            UpdatedRws_details.push(updatedRow.index());

                        }
                    }
                }
                else {
                    UpdatedRws_details.push(updatedRow.index());
                }                
            }
            else {                
                updatedCell.nodes().to$().removeClass('highlight');
            }
        }
    </script>
}

kthorngren

Maybe one of the AutoFill Events would help. If not please post a link to your page or a test case so we can help. There is a lot of code above to look through for debugging.

Kevin

singhswat

Thanks. How do I close the thread? or mark an answer... I'm not getting option!

colin

If you hover on a message, you should see a cog - which has an option to mark it as the answer.

C