Getting value from fixed column with inputs

metscore

Hello,

I've been trying quite a few things and I've googling quite intensely without getting so much wiser, so posting here is kind of my last resort before going nuts.
Anyway here goes:

I have a mvc asp.net application where I'm trying to use DataTables. The prerequisite is that the first three of my columns are fixed. (There are like 9 columns in total)
This works nicely except for the fact that the third column is an input where the user can change the value to his or her liking. The user then presses a save button (outside the DataTable) and I use Ajax to post data back to the server.
Code snippet below:

    // Initialize DataTable
    var table;
    $(document).ready(function () {
        table = $('#node-settings-table').DataTable({
            scrollY: "300px",
            scrollX: true,
            scrollCollapse: true,
            paging: false,
            fixedColumns: {
                leftColumns: 3
            },
            searching: false
        });
    });

.....

    // When the user presses the save button we would like to post the form back to the controller on the server 
    function postFormDataToServer() {
        var formData = table.$('input, select').serialize();
        jQuery.ajax({
            type: 'POST',
            url: '/NodeSettings/SaveNodeSettings',
            data: formData,
            success: function () { }
        });
    }

The problem is that the data (formData in the example above) is the data underneath the fixed column. Hence I never see the value that the user might have edited in the input box (residing in the third column which is fixed)

I'm going about this the wrong way or am I completely stupid ?
Any help is greatly appreciated !

King regards
Magnus

colin

Hi Magnus,

It looks like it should be ok, it's very similar to this example. We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. 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

metscore

Hi Colin,

Thank you very much for your reply. Obviously I should have made a test case (my bad). I have now done that (click here for it)

If you just run it and press the "Save data" button you should see something like this in the console window:

"Result: c=Author&d=Developer&b=Director&a=System%20Architect"

If you change the text in one of the input boxes ("position") and press the "Save data" button again, I would have expected to see a different result, i.e the value of the edited position. Unfortunately this does not happen, but rather the same result is shown again.

I'm probably doing something incorrect, so any advice how to change the code would be greatly appreciated.

In advance thank you very much for you time and efforts.

King regards
Magnus

colin

Hi Magnus,

Thanks for that example, it helped a lot.

With fixed columns, DataTables clones the original columns and layers them over the top of the table. You can get the edited values by accessing that cloned layer instead, see this modified example here.

The big problem though is that whenever the table is redrawn (try sorting by a different column for example) the cloned value will be replaced with the original - meaning all the edits revert to their original state. For a big fix, you'll need to write those modified cloned input elements back to the original table.

For a simple fix, just move the input element out of the fixed column area, and everything will work as is.

Hope that helps,

Cheers,

Colin

metscore

Hi Colin,

Thanks for you reply and your suggestion.
Yes, I understand the concept of the cloned layer but I couldn't understand how to get the data from it.

To resolve the resorting issue I'll try to prevent the user from being able to sort the table.
Unfortunately the user wants to have one of the editable columns fixed, so I'll just have to live with that fact...

You've been very helpful !

King regards,
Magnus

allan

Its not just sorting that would cause the issue Colin mentioned - any table draw would: filter and paging for example.

To get the data you'd need to have an event listener on table.DTFC_Cloned input and then use the data-dt-row and data-dt-column properties that are on each cell in the cloned table. That will give you a reference back to the original cell, so you can write the value to the original input.

Its a bit messy but it would certainly work.

Allan

metscore

Thank you very much Allan for your comment and suggested solution. I'd certainly give it a try !

The issue is fixing up some previously written code so there is no pagination nor any filtering allowed currently (phew )...

My more intermediate "quest" is that the instantiation of the DataTable on the table takes quite a long time (due to the amount of data and that no pagination is used).
The table is dynamically built in (cs)html using asp.net (with data received from the controller) and I like to prevent the user from first seeing the large table and 3 seconds later seeing the DataTable version (with scrollbars etc).
First draft is just a spinner on top, but it's really "not what the doctor ordered".

colin

Hi @metscore,

Could you hide the table element with CSS or JS while it the data is loading, and just as you call the DataTables initialisation, you unhide it?

Cheers,

Colin

metscore

Hi Colin,

Thanks for coming back. Yes, that was one of the first things I tried, but a few things seem to happen then.

1) The three fixed columns are not being fixed, i.e. they move the same way all the others do.
2) Some minor UI problems.

(As seen in the example, for some peculiar reason, that I don't understand, a second double scroll bar injected in the layout that works good. It is only approximately "2 pixels wide", but still annoying why it sometimes ends up there)

However, your answer got me thinking. I was always unhiding the table after initialisation of the DataTable. (It seem logical to me at the time)

However in your answer you say "just as you call"... Hmmm... Maybe just do the unhiding just prior to initialise the DataTable.

$(document).ready(function () {
        $('#node-settings-table').show();
        table = $('#node-settings-table').DataTable({
            scrollY: "300px",
            scrollX: true,
            scrollCollapse: true,
            paging: false,
            fixedColumns: {
                leftColumns: 3
            },
            searching: false
        });
    });

and tada it works just fine !! By moving the $('#node-settings-table').show(); just prior to the DataTable call all looks good... Why didn't I even try that ? Duh....

Thanks again for your time an efforts !

King regards
Magnus

metscore

Hi Colin,

Everything seem now to be working quite well, thanks to you and your team.... However there are a few glitches still lingering however...

I'll try to show one of them using a a video .
(The other is the "double" scrollbar, for which I've been unable to find an explanation so far... )

When the user resizes the window the DataTable seem to resize itself, but this seems to malfunction sometimes.
I have only one resize and that is done on page reload, I'm not using any resize events.

    function performSizeAdjustments() {
        var container = $('#middle-content-left-padding');

        // Take care of width
        var wrapper = $('.dataTables_wrapper');
        wrapper.width(container.width() - 48);
    }

Do you have any idea or suggestions how to remedy the issue seen in the video ?

King regards
Magnus

allan

Hi Magnus,

We'd need a test page showing the double scrollbar in order to be able to debug that. Something is throwing off the width calculation, but without being able to debug it, I'm not sure what.

Would be worth updating to the latest versions of everything if you aren't already using them.

Allan

metscore

HI Allan,

Thanks for your fast reply. Obviously it is difficult for you to try to grasp the issue if you can't debug it.
I'll see if I can create some kind of testpage where the issues occurs.

I'm currently using the following versions:

FixedColumns 3.2.5
DataTables 1.10.18
jQuery JavaScript Library v1.7.2
(Old version of jQuery is used due to compability issues with other components I've been told)

Just to make sure I've also tried to update jQuery to version

jQuery JavaScript Library v3.3.1

but this did not change any behaviour of the DataTable.

I'll try to get back with a test environment.

King regards
Magnus

metscore

Just an short update.

When trying to create a testpage I realized that if the column header is very short (currently it is consists of the text ID) the problem with double scrollbars occur. If I just chang it to

<th>ID&nbsp;&nbsp;&nbsp;</th>

the problem with a double scrollbar disappears.

The table flickering resizing issue (where the table grows out of "context") is still happening on my testpage. I'll try to put it somewhere so you can access it.

King regards
Magnus

allan

interesting - yes that would be great if you could.

Thanks,
Allan

metscore

Hi Allen,

I've made a small demo of the resizing issue residing on Azure.

If you head over to the URL and slowly increase the window size horizontally you should hopefully see that the table size flickers between having a scrollbar to not having a scrollbar and a large horizontal size.

I seem to get the problem in Chrome, Edge, IE11 and Firefox browsers.

I hope that this helps and again, thanks for your efforts !

King regards
Magnus

metscore

Hello again Allan,

I just realized that there might be something in my css that is causing the issue. This css was something I inherited in the project and I haven't thought much about it, but now I pulled it out (to remove the coloring you see in the demo) and suddenly the size flickering does not seem to happen.

Below the line that seem to cause the problem. (I don't know how yet.... )

#node-settings-table div { vertical-align: bottom; font-size: smaller; text-align: center; padding-right: 3px; white-space: nowrap }

King regards
Magnus

allan

It looks like you need to include the FixedColumns CSS at the first thing to do. Not sure if that will solve it outright, but it will help!

Allan

metscore

Hi Allan,

I tried moving the fixedColumns.dataTables.css to be the first item included. Unfortunately that did not seem to change anything.

However, since I have removed the 'erroneous' css line it all seem to work fairly well so unless you want to investigate more, maybe it is time to put this behind us ?

Have a great day.
King regards
Magnus