inline: {
      onBlur: 'submit',
      submit: 'allIfChanged',
    },

as we want the full row data submitted on every change.

https://editor.datatables.net/reference/type/form-options#submit

We're also using AutoFill. However, with AutoFill it only seems to submit partial row data. This means we have to merge it with that row's data before we submit it. Is there a way to configure AutoFill to submit all the data for the row just like the inline setting does above?

Thanks.

Ben

When dragging the AutoFill handle to the edge of my DataTable container, it doesn't automatically scroll down.
This behavior can be observed on the official example:
https://datatables.net/extensions/autofill/examples/initialisation/scrolling.html

Is this working as intended? It does scroll the 'outer' window, but not the table container itself, which would be the ideal scenario. Users sometimes want to fill something for the entire column (being able to drag it all the way down would solve this), but right know that takes several actions, since they have to manually scroll down after each update.

I appreciate any input on this!

I would like to use autofill and input form at the same time but I can not get it to work. If I changed the value on a cell and drag this cell to another the old value is used. What do I need to do?

I have done an example that can be found here:
https://jsfiddle.net/gx5wzp3a/

Regards J

Reagrds J

bonjour, j'utilise l'api dependant() pour mettre a jour des champs en fonction de saisie. Mais pour charger des données je fait une importation et je voudrais appeler ces fonctions "dependant()" pour initialiser mes données. comment faire.

Exemple : j'ai un montant Hors taxe que je charge et je voudrais calculer la taxe. quand je rentre dans le champs Hors taxe, il calcule bien la TAxe. MAintenant si je telecharge mes montant il ne calcule pas la taxe, il faut que j'ouvre chaque fiche pour qu'il calcule la taxe.

merci de votre reponse.

jm

Any ideas where i'm going wrong?

$.fn.dataTable.AutoFill.actions.names = {

    available: function ( dt, cells ) {            
        let startCell = (cells[0][0].index)
        console.log(startCell)
        return cells ;
    },

Thanks Michael

This event does not fire when the autofill is used.

I have tried listening for the preAutoFill and autoFill events but they don't see to be firing either.

Is an event I can listen for that is similar to the preEdit event so I can edit data before the table updates, but triggering from autofill?

I would like to print it out like a desired table.

Is it possible?

If possible, please explain in detail.

my code is :

```
<?php
$SQL= "SELECT Concat_ws('\n' openday,'', school_name) AS school_column, supply_name,score from result ";

$grouped = [];
$columns = [];

$resultObject = $result = mysqli_query($conn, $SQL);
foreach ($resultObject as $row) {
$grouped[$row['supply_name']][$row['school_column']] = $row['score'];
$columns[$row['school_column']] = $row['school_column'];
}

sort($columns);
$defaults = array_fill_keys($columns,'-');
array_unshift($columns, 'school_column');

Description of problem:

I am trying to submit the data to the database with autoFill extensions. Whenever I try to autofill, the editor doesn't get triggered at all. Like nothing happens at all. Maybe I am using the wrong configuration or there is a callback method, I need to use.

My javascript code:

<script>
    var editor;
    $(document).ready(function () {
        editor = new $.fn.dataTable.Editor({
            ajax: {
                edit: {
                    type: 'PUT',
                    data: function (data) {
                        data = JSON.stringify(data.data)
                        return data
                    },
                    url: '{{url_for("veada_pattern_labels.already_created_labels_data_edit")}}'
                },
                remove: {
                    type: 'DELETE',
                    data: function (data) {
                        id = Object.keys(data.data);
                        return { 'id': JSON.stringify(id) }
                    },
                    url: '{{url_for("veada_pattern_labels.already_created_labels_data_remove")}}',
                    error: function (jqXHR, error, errorThrown) {
                        accessError(jqXHR.status);
                    },
                }
            },
            table: "#myTable",
            idSrc: 'id',
            fields: [
                {
                    label: "Year:",
                    name: "year"
                },
                {
                    label: "PID:",
                    name: "pid"
                },
                {
                    label: "PieceDescription:",
                    name: "piece_description"
                },
                {
                    label: "PieceQty:",
                    name: "piece_qty"
                },
                {
                    label: "File Name:",
                    name: "file_name"
                },
                {
                    label: "Company:",
                    name: "company"
                },
                {
                    label: "Series:",
                    name: "series"
                },
                {
                    label: "Seat Description:",
                    name: "seat_description"
                },
                {
                    label: "Seat LongDescription:",
                    name: "seat_longdescription"
                },
                {
                    label: "Side:",
                    name: "side"
                },
                {
                    label: "Piece Number:",
                    name: "piece_number"
                },
                {
                    label: "Total Pieces:",
                    name: "total_pieces"
                },

                {
                    label: "Extension1:",
                    name: "extension_1"
                },
                {
                    label: "ColorID1:",
                    name: "colorid_1"
                },
                {
                    label: "Extension2:",
                    name: "extension_2"
                },
                {
                    label: "ColorID2:",
                    name: "colorid_2"
                },
                {
                    label: "Extension3:",
                    name: "extension_3"
                },
                {
                    label: "ColorID3:",
                    name: "colorid_3"
                },
                {
                    label: "Extension4:",
                    name: "extension_4"
                },
                {
                    label: "ColorID4:",
                    name: "colorid_4"
                },
                {
                    label: "Extension5:",
                    name: "extension_5"
                },
                {
                    label: "ColorID5:",
                    name: "colorid_5"
                },
                {
                    label: "Piece Or Pair:",
                    name: "piece_or_pair",
                    type: "select",
                    options: ['Pc', 'Pair']
                },
                {
                    label: "Initials:",
                    name: "initials"
                },
                {
                    label: "User:",
                    name: "user"
                }
            ]
        });


        table = $('#myTable').DataTable({
            processing: true,
            serverSide: true,
            deferRender: true,
            pageLength: -1,
            ajax: "{{ url_for('veada_pattern_labels.already_created_labels_data')}}",
            dom: "Blfrtip",
            autoFill: {
                //alwaysAsk: false,
                horizontal: false,
                editor: editor
            },
            keys: {
                columns: ':not(:first-child)',
                editor: editor,
                blurable: true,
            },
            stateSave: true,
            select: {
                style: 'os',
                selector: 'td:first-child',
            },
            //columns
            columns: [
                { data: "id", "visible": false, },
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false,
                    width: "12px"
                },
                { data: "year" },
                { data: "pid" },
                { data: "piece_description" },
                { data: "piece_qty" },
                { data: "file_name" },
                { data: "company" },
                { data: "series" },
                { data: "seat_description" },
                { data: "seat_longdescription" },
                { data: "side" },
                { data: "piece_number" },
                { data: "total_pieces" },
                { data: "extension_1" },
                { data: "colorid_1" },
                { data: "extension_2" },
                { data: "colorid_2" },
                { data: "extension_3" },
                { data: "colorid_3" },
                { data: "extension_4" },
                { data: "colorid_4" },
                { data: "extension_5" },
                { data: "colorid_5" },
                { data: "piece_or_pair" },
                { data: "initials" },
                { data: "user" },
                { data: "session_id" },
                { data: "timestamp" }
            ],
            buttons: [
                "colvis",
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor },
            ],
        })

        yadcf.init(table, [
            {
                column_number: 2,
                data: [{ label: '2015', value: '2015' }, { label: '2016', value: '2016' },
                { label: '2017', value: '2017' }, { label: '2018', value: '2018' },
                { label: '2019', value: '2019' }, { label: '2020', value: '2020' },
                { label: '2021', value: '2021' }, { label: '2022', value: '2022' },],
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '50px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 3,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '50px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 7,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '75px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 8,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '75px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 9,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '75px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 25,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '75px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 26,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '75px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 27,
                filter_type: "multi_select",
                select_type: 'select2',
                select_type_options: {
                    width: '75px',
                    dropdownAutoWidth: true,
                }
            },
            {
                column_number: 28,
                filter_type: "range_date",
                date_format: "mm/dd/yyyy",
                filter_delay: 500,
                datepicker_type: 'jquery-ui'

            },
        ])
    });
</script>
{% endblock %}

https://www.pavanconsultores.com.ar/pruebas/pru01.php

where you try to copy the value of the cell in the row with ID 8, column SEM 07 down.
 
Topic 2: Background color Cells are colored according to a conditional, but when copying data by dragging, the color is refreshed only in those cells with NULL values, if the cell has some other value the color is not modified according to the new data.

When using the auto-incrementing number function in autofill and keytable, if you pass it, for example 0.1, then subsequent values will have the full length of decimal places.

E.g.

1.1 dragged with an increment of 0.1 becomes:
1.2000000000000002
1.3000000000000003

and so on.

Fiddle here:

https://jsfiddle.net/rk2n8up4/2/

I'm not sure if this is a bug per se, or something you expect to be addressed by the datatables dev in a custom algo of some description?

Thanks very much

I'd like to use the autoFill feature within my tables but I do not succed to implement it.

I tried using :

 autoFill: true

and :

autoFill: {
            enable: true
        }

within the datatable creation but no success.

Could you please help me implementing this feature ?

Thank you for your help.

$j('#tProfit').on( 'click', 'tbody td:not(.readonly)', function (e)
        {
            //editor.inline( this );
            editor.inline( this, { submit: 'allIfChanged'} );
        }); 

and also tried

formOptions: {
        inline: {
            submit: 'allIfChanged'
        },
    },

I remember this working at one point in the past, not sure what I broke or why it stopped working.

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

I'm using the autofill extension and was wondering if there was a way to tell it to always fill vertically without prompting the user on how to fill when multiple columns are selected to fill? I see there is an option to turn autofill.horizontal = false, but then I can't select multiple columns to fill vertically.

I would love to have to ability to select 3 rows from columns A and B and have A1 fill A2 and A3 and then have B1 fill B2, and B3 without prompting the user on how to fill the cells.

I was trying to do something like this

        delete $.fn.dataTable.AutoFill.actions.fillHorizontal;
        delete $.fn.dataTable.AutoFill.actions.increment;
        delete $.fn.dataTable.AutoFill.actions.fill;
        delete $.fn.dataTable.AutoFill.actions.cancel;

To remove all the other global options, but now I just get an error if I only try to fill one column.

Is this possible?

Thanks!

Is there any other way to disable autofill besides removing class from column.

But . . .

Some of the tables in my app use leftJoin's to pull in additional attributes from associated tables. In order to update information in the editor for the leftJoin tables, I return the record id of the row in the associated table. When editing these values in the editor, everything works fine.

Today I noticed that autoFill generated edits send the value to be updated in the leftJoin table to the editor, but the record id for that row in the associated table is not passed into the editor, and thus the leftJoin'ed data is not being updated as part of the autoFill operation.

How do I go about getting autoFill to include the leftJoin'ed table's record id so that information in that table is updated?

I'm trying to use autoFill to allow users to drag values across the whole row however, I do not want the values to go into the columns that are yellow and have the class "weekend". I have managed to grab the class name of the cells using cells[0][0].cell.node().className on a autoFill event however, I do not know how to stop the values from going into the yellow columns and with the class "weekend"

How do I go about stopping the yellow columns from getting autoFilled?

   $('#TestTable').DataTable().on( 'autoFill', function ( e, datatable, cells ) {
                                var x = table.cells('.PublicHoliday');
                                alert(cells[0].className);
                                alert( (cells.length * cells[0].length)+' cells were updated' );
                            } );

I setup autofill and when I go to drag it, it would highlight the rows but not save any data in it. Now, I don't know what changed but it doesn't even show the little blue box to drag. I'm using autofill with keys together + inlining. Wondering what I'm doing wrong...

autoFill: {
                columns: ':not(:first-child)',
                editor: editor
            },
            keys: {
                columns: ':not(:first-child)',
                editor: editor
            },
            select: {
                style: 'os',
                selector: 'td:first-child',
                blurable: true
            },     

Try autofilling the age column. The increment/decrement arrows are displayed but the numbers are hidden.

Kevin

Workaround (Almost)
I can hide the AutoFill dialog with css and manually trigger the click event on the fill method I want, but there isn't an event on AutoFill that fires after the dialog is shown for me to know when to perform this trickery. Definitely not a desired solution, regardless. :-)

Side Notes
It would also be really handy to have an option to lock filling behavior to purely vertical or horizontal (similar to Excel behavior) so that users can't fill both directions at once. This would circumvent the popup for instances when horizontal vs vertical fill methods had to be chosen from. Obviously it limits functionality, but for use cases where it's not needed it would be handy.

If the KeyTable extension had the ability to focus multiple cells in a single row or in a single column (perhaps with Ctrl+Click) then vertical and horizontal filling could be controlled based upon the type of selection and also avoid the need to choose the fill method.

https://github.com/DataTables/Dist-DataTables-AutoFill-Bootstrap/tree/master/js