Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incompatible with sScrollX/sScrollY #43

Closed
spamguy opened this issue Apr 14, 2014 · 16 comments
Closed

Incompatible with sScrollX/sScrollY #43

spamguy opened this issue Apr 14, 2014 · 16 comments

Comments

@spamguy
Copy link

spamguy commented Apr 14, 2014

Hi -- first off, great tool!

This ticket is more or less a clone of #13 with some expansion. To start from the beginning, YADCF renders oddly when DataTables' sScrollX/sScrollY is enabled. Modifying the included example.html triggers it right away:

$(document).ready(function(){
  $('#example').dataTable({sScrollX: '100%'}).yadcf([
        {column_number : 0},
        {column_number : 1,  filter_type: "range_number_slider", filter_container_id: "external_filter_container"},
        {column_number : 2, data: ["Yes", "No"], filter_default_label: "Select Yes/No"},
        {column_number : 3, text_data_delimiter: ",", filter_type: "auto_complete"},
        {column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});

Also give the div 'container' an arbitrary length -- say, 500px. In the result, note how the table renders strangely all around: the table's width isn't accurate (comment out the .yadcf() to compare), column headers display separate from the filter row, the sort arrows render twice, etc.

Everything above applies to sScrollY too.

The previous ticket #13 claimed to have a workaround, but I just got an alert() error from YADCF when I tried it.

@vedmack
Copy link
Owner

vedmack commented Apr 14, 2014

Hi and thanks,

In Issue #13 the user took the filter outside the table which ofcourse solved the problem because the filter wasn't inserted in the table header, I will take a look into yours scenario

@pcbulai
Copy link

pcbulai commented Jun 26, 2014

@spamguy I solved this problem by modifying YADCF(unfortunately). I'll try and explain how and where(1). The solution from #13 is good as long as your table doesn't use ColVis(2) and the filters can be placed outside of the table(3).

  1. Using YADCF with a scrollable table doesn't really work without filter_container_ID being set, and this one happens because datatables breaks every scrolling table in up to 3 different tables. If you have datatables 1.10, scroll to line 3451:
/*
         * The HTML structure that we want to generate in this function is:
         *  div - scroller
         *    div - scroll head
         *      div - scroll head inner
         *        table - scroll head table
         *          thead - thead
         *    div - scroll body
         *      table - table (master table)
         *        thead - thead clone for sizing
         *        tbody - tbody
         *    div - scroll foot
         *      div - scroll foot inner
         *        table - scroll foot table
         *          tfoot - tfoot
         */

Now, see that "master table" in the lines above? That table, which is the 2nd one, has the ID = your table ID before datatable init. The ID to whom you bind the .dataTable() object to. And this is important while using scrollable tables and YADCF because the latter one always uses that ID to know where to create the filters.

You can solve it doing something like this:

  • define your table options as separate object
  • define your table like so $(table).dataTable(optionsHere)
  • query the DOM for the element .dataTables_wrapper.no-footer > tbody and add to it a new ID that contains the name of your initial table. For example, my table ID was #datagrid and I set the id for .dataTables_wrapper.no-footer > tbody equal to datagrid-header
  • go to your YADCF.js plugin and edit the lines 1753 -> 1770 from
$.fn.yadcf = function (options_arg) {

        if ($(this.selector).length === 1) {
            setOptions(this.selector, options_arg);
            initAndBindTable(this, this.selector, 0);
        } else {
            var i = 0,
                selector;
            for (i; i < $(this.selector).length; i++) {
                $.fn.dataTableExt.iApiIndex = i;
                selector = this.selector + ":eq(" + i + ")";
                setOptions(this.selector, options_arg);
                initAndBindTable(this, selector, i);
            }
            $.fn.dataTableExt.iApiIndex = 0;
        }
        return this;
    };

to

$.fn.yadcf = function (options_arg) {

    if ($(this.selector + '-header').length === 1) {
      setOptions(this.selector + '-header', options_arg);
      initAndBindTable(this, this.selector + '-header', 0);
    } else {
      var i = 0,
        selector;
      for (i; i < $(this.selector + '-header').length; i++) {
        $.fn.dataTableExt.iApiIndex = i;
        selector = this.selector + '-header' + ":eq(" + i + ")";
        setOptions(this.selector + '-header', options_arg);
        initAndBindTable(this, selector, i);
      }
      $.fn.dataTableExt.iApiIndex = 0;
    }
    return this;
  };
  • YADCF.js line 211 from
options[selector_arg] = tmpOptions;

to

var a = selector_arg.split('-')[0];
    options[a] = tmpOptions;
  • YADCF line 1708 from
table_selector_tmp = table_selector;

to

table_selector_tmp = table_selector.split('-')[0];
  1. Using filter_container_id on hidden columns always throws errors because by the moment you init YADCF, datatables already takes those column out of the DOM. If you don't specify an ID for the filter, toggling column visibility doesn't display the filters unless you do something like what I said here Add support for ColVis #56

  2. If you need to place the filters inside the scrolling table, do step 1.

@vedmack the solution I proposed on the first point of this enormous comment can be implemented in YADCF as a custom option.

I hope I helped.

@vedmack
Copy link
Owner

vedmack commented Jun 26, 2014

Wow @sloby :) nice one! thanks for the solution, I hope that someday I'll get to add the support for the sScrollX/sScrollY ( so many things to do but no spare time :| )

@pcbulai
Copy link

pcbulai commented Jun 26, 2014

@vedmack don't I know it...?! Stay tuned for my next challenge with YADCF where I have to implement Pickadate instead of jQuery UI Datepicker. Maybe I'll push some code here after all this hassle.

@vedmack
Copy link
Owner

vedmack commented Jun 26, 2014

Feel free to send pull requests :) but make sure that work on the latest yadcf version, I released 0.7.7.beta1 a hour ago with server side filtering support.

@pcbulai
Copy link

pcbulai commented Jun 27, 2014

Oki. But first I gotta find that spare time too :)

@spamguy
Copy link
Author

spamguy commented Jun 27, 2014

@sloby (and @vedmack): This is great! Thanks for the attention.

vedmack added a commit that referenced this issue Oct 19, 2014

Verified

This commit was signed with the committer’s verified signature.
* New Feature, added support for sScrollX / sScrollY #43
@vedmack
Copy link
Owner

vedmack commented Oct 19, 2014

@vedmack vedmack closed this as completed Oct 19, 2014
@the86freak
Copy link

actually this doesn't seem to work in the latest version anymore in your example:
http://yadcf-showcase.appspot.com/ajax_mData_source.html

Yes, there's scroll-bar and you can also swipe it left/right for about a pixel.
But even though you can see, that the header is not scrolled.

What would you suggest to fix that? Do you see a workaround? I'm happy to help out there.

edit: it works with 0.8.6 and 0.8.7 but not with 0.8.8 any more.
see this fiddle with 0.8.7
http://jsfiddle.net/The86Freak/3h7k25fh/73/

@vedmack
Copy link
Owner

vedmack commented Jun 30, 2015

As to the scrollY , it works in the showcase, as to the scrollX, I havent used it in that page, and I don't really know why that horizontal scroll appears there, but it will appear even without using the yadcf (so its not related to yadcf), my fix was to place the filters in the right table headers, I don't really know that horizontal bar appears, but I guess you can get the answer on datatables forum , sorry.

Anyway, if you want to know if something happens because of yadcf or not , just comment out yadcf init code and see how datatables behaves.

@vedmack
Copy link
Owner

vedmack commented Jul 1, 2015

@the86freak it works just fine with the 0.8.8 / 0.8.9 and looks the same as your jsfiddle.

@the86freak
Copy link

@vedmack first: thanks for having a look into that.
you'r right, if you leave the css with v 0.8.8

if you also change that to 0.8.8 the header is not scrolling anymore.

Further investigation showed, that if I remove:

126 .dataTables_scrollHead {            
127         overflow: visible !important;           
128 }

from ../vedmack/yadcf/0.8.8/jquery.dataTables.yadcf.css
the header also scrolls again.
Is that a side-effect with another css or do you think you can remove that?

edit: update md

@vedmack
Copy link
Owner

vedmack commented Jul 5, 2015

@the86freak , will try to get back to you in a day or two

@vedmack
Copy link
Owner

vedmack commented Jul 5, 2015

@the86freak, Can you provide me an example of improper behaviour of yadcf css with a scrollX or scrollY ? because I can't understand your issue.

@the86freak
Copy link

@vedmack sure, no problem. I'll sum up:
The problem is, that when the table is bigger as the parent container (viewport), the overlapping part of the table (and its headers) are 'disapearing' - of course.
So when you define the width with scrollX, I excpect that I can scroll the table(content) horizontal and then also the header schould scroll according with the table-body.

This works with css-version 0.8.7: http://jsfiddle.net/The86Freak/q6bmyju9/

since css-version 0.8.8 it doesn't work anymore: http://jsfiddle.net/The86Freak/q6bmyju9/2/

@vedmack
Copy link
Owner

vedmack commented Jul 13, 2015

@the86freak ,'overflow: visible !important; ' will be removed in next beta, thanks for reporting

vedmack added a commit that referenced this issue Jul 17, 2015
p.s chosen wont play well in scrolX/Y mode (select2 will fit perfectly)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants