How to update Input field on fixedColumn

adityapewekar

I have a html table which is loaded with data from server side. The table is then converted to Datatable using following script

    $('#myTable').DataTable({
                        scrollY: "300px",
                        scrollX: true,
                        scrollCollapse: true,
                        paging: false,
                        fixedColumns: true,
                        fixedColumns: {
                            leftColumns: 1,
                        },
                        fixedHeaders: {
                            header: true
                        }
                    });

The first column of the table is an Autocomplete text box. When I select the value from the autocomplete the value is not reflected on the fixed column. I have used following code to update the column but didn't worked.

                $.fn.dataTable
                    .tables({ visible: true, api: true })
                    .columns.adjust()
                    .fixedColumns().relayout();

OR

$("#myTable").DataTable().fixedColumns().update()

Is there am missing some thing ?

colin

Hi @adityapewekar ,

There's a lot going on there. Could you make a test case demonstrating the problem, please. It doesn't need the server-side component, just the HTML table that it would generate. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

adityapewekar

Hi Colin,

Please find below the link for a scenario.

http://live.datatables.net/gixidiri/1/edit

Please let me know if I am missing anything in the config.
Currently I am able to render the autocomplete but when I change the value of autocomplete on the fixedColumn the textbox value is not updated when inspected but able to see the updated value on UI.

allan

Am I right in saying that you are trying to update the data point for that column with the selected value? If so, you would need to use cell().data() to update the data that DataTables has for that cell. It doesn't automatically read a value from any input element that can be dynamically changed by the end user (be it an auto complete or just a regular input).

Allan

adityapewekar

Hi Allan,

Using the DataTable().fixedColumns().update() api, now I am able to update the columns, but the main problem is the Grid shows an inappropriate behavior when the fixed Column contains AutoComplete textbox.

The Grid is under a tab which is initially hidden. So to make sure the layout is properly rendered I use.

 $($.fn.dataTable.tables(true)).DataTable()
              .columns.adjust()
              .fixedColumns().relayout();

when the tab is been displayed, but the autocomplete on the first column triggers twice on the first column due to this. If I don't use relayout, the autocomplete works properly but my UI is scrambled and the fixedColumn is also not applied.

allan

I don't understand why auto complete would be triggered twice by the table redrawing. Could you give me a link to the page showing the issue please?

Allan

adityapewekar

Hi Allan,

Please find below the link for the scenario of my Issue.
http://live.datatables.net/gixidiri/8/edit

In my application the Grid is under a tab which is already rendered as a datatable and the tab is initially hidden. The click event in the above link acts as the tab link of my application.

Observe the behavior of autocomplete before and after the click event .

Please let me know if I am in a wrong loop.

allan

Right - so what I see happening is that the AutoComplete works in the fixed column before the click, but not at all after. That is because the elements are recloned when the fixed column is updated.

Normally it would be possible to just re-initialise the input library once the reclone is done, but jQuery UI appears to have some kind of class prevention on that, since the input elements have an autocomplete class on them now.

A workaround is to enhance only the inputs in the fixed column:

$( "table.DTFC_Cloned .auto" ).autocomplete({

http://live.datatables.net/gixidiri/9/edit

That works, but limited. You'd need to also have the AutoComplete update the cell's data (cell().data()) when an item is selected since otherwise the reclone is going to wipe out the data.

Generally, I'd suggest avoiding putting more complex controlled in the fixed columns due to the reclone action.

Allan