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

Scroller widget #634

Closed
MentorEdit opened this issue May 29, 2014 · 61 comments
Closed

Scroller widget #634

MentorEdit opened this issue May 29, 2014 · 61 comments

Comments

@MentorEdit
Copy link

Can I make sticky headers , to act like how it works in excel. That is , thead should get fixed to the table only , so when you scroll the page , rows inside the table move with thead fixed. All other components on the web page do not move. Please let me know if this is possible.

Thanks,
Swathi

@MentorEdit
Copy link
Author

I want the sticky header to stick to the table instead of window top , any idea on how I can achieve this.

Thanks

@Mottie
Copy link
Owner

Mottie commented Jun 4, 2014

Hi @swathikuchi!

Do you mean like the scroller widget?

@MentorEdit
Copy link
Author

Oh ya this is what I was looking for . Thank you so much . I have the following version and I think this does not have scroller . I will try adding this widget and see how it works . Thanks once again.

/*! tableSorter 2.15+ widgets - updated 3/18/2014 (v2.15.11)
 *
 * Column Styles
 * Column Filters
 * Column Resizing
 * Sticky Header
 * UI Theme (generalized)
 * Save Sort
 * [ "columns", "filter", "resizable", "stickyHeaders", "uitheme", "saveSort" ]
 */
/*jshint browser:true, jquery:true, unused:false, loopfunc:true */
/*global jQuery: false, localStorage: false, navigator: false */

@Mottie
Copy link
Owner

Mottie commented Jun 4, 2014

The scroller widget is in the widgets sub-directory: https://github.com/Mottie/tablesorter/blob/master/js/widgets/widget-scroller.js

@MentorEdit
Copy link
Author

Hi ,

I tried to add the widget code ,i could see the scroll bars as expected but the header names are missing and the thead column sizes shrinked . Is there anything I am missing still .

@Mottie
Copy link
Owner

Mottie commented Jun 4, 2014

Are you including the theme css file (e.g. theme.blue.css)?

@MentorEdit
Copy link
Author

yes , I included.

@MentorEdit
Copy link
Author

The headers are not text nodes , its input. But i tweaked the tablesorter files to element.val() instead of text() . So all the other widgets and tablesorter including the cssstickyheader is perfectly working as i expected. But when i add scroller , the headers donot show the names.

@Mottie
Copy link
Owner

Mottie commented Jun 4, 2014

Can you modify this demo to show how you are using the plugin, it would make it easier to understand what issues you are encountering.

@MentorEdit
Copy link
Author

please check this link , http://jsfiddle.net/abkNM/3001/
thanks for your time.

@MentorEdit
Copy link
Author

In the actual tablesorter.js line 483 it was c.headerContent[index] = $(this).text(); , since i was using the textarea element as header content , i changed it to c.headerContent[index] = $(this).val(); By doing this I had no problem in integrating this plugin into my code. But when I try using scroller , the header names are missing. Not sure if this information helps.

Thanks,

@Mottie
Copy link
Owner

Mottie commented Jun 4, 2014

It sounds like you're using an older version of tablesorter. The code you shared from tablesorter.js has changed and is now (ref):

c.headerContent[index] = $(this).html();

That being said, if you change the code in the demo you shared to instead add the header title as innerHTML, it works (demo):

text2.innerHTML = "heading"+i;

@Mottie Mottie added the Demo label Jun 4, 2014
@MentorEdit
Copy link
Author

ok , I am using filter , columnselector , pager , columns widgets as well . So will there be any change if I update this new version of tablesorter.js . Should i change all of the files ?

@Mottie
Copy link
Owner

Mottie commented Jun 4, 2014

Yes, update everything.

You should also be using the parser-input-select.js file. Don't forget to set the parser:

cell2.className = "sorter-inputs";

And here is a demo of it working (demo).

@MentorEdit
Copy link
Author

Ok thank you so much for your time , will update everything right away . Thanks once again.

@MentorEdit
Copy link
Author

Hi Mottie ,

I added the scroller widget and changed all the files as you suggested. Now I can see the names on the thead , but the widths of the thead are completley changed now. And I get two sets of sort icons one outside the text area box and one inside the text area box in the headers. I tried checking out the code but had no clue of why this wierd formatting is occuring. Any help would be appreciated.

Thanks,

@MentorEdit
Copy link
Author

The first screen shot is with scroller widget attached.

The second one is without scroller widget

Thanks

@Mottie
Copy link
Owner

Mottie commented Jun 14, 2014

It appears that the textarea is too narrow, so what you are seeing is a scroll bar to scroll vertically through the text. Try setting a minimum width to the textarea, something like this:

.tablesorter-header textarea {
    min-width: 50px;    
}

In all honestly, I would not recommend using a textarea in the table header in the first place.

@MentorEdit
Copy link
Author

@ Mottie ,
Thank you so much , you are awesome. I did not think about the width at all. I know that its not a good option to use text area , but the requirement is that they need a tool tip for the header names , and the header name should be wrapped .Input element text cant be wrapped so ended up using text area. Please let me know if you think of any option I would always be ready to learn. And can you please tell me how I can fix the individual column sizes using the tablesorter.

Thanks much!

@Mottie
Copy link
Owner

Mottie commented Jun 16, 2014

The column widths can be controlled by adding a class name to the header cells (demo):

<thead>
    <tr>
        <th class="an">AlphaNumeric</th>
        <th class="n">Numeric</th>
        <th class="a">Animals</th>
        <th class="s">Sites</th>
    </tr>
</thead>

then setting the width using css:

.an { width: 10%; }
.n { width: 5%; }

@MentorEdit
Copy link
Author

@Mottie

I tried the above way to set the column widths. It doesn't work :( . I don't have any control on the header once scroller widget is added. I tried width , maxWidth, minWidth , using class name , applying directly to the element using "style.width " but nothing worked. The headers are shifted to right , now the thead and tbody does not match up at all. Can you please tell me where I can fix this.

Thanks.

@Mottie
Copy link
Owner

Mottie commented Jun 17, 2014

Hmm, that does appear to be a problem with the scroller widget. I'll work on something to make that aspect of it behave properly.

@MentorEdit
Copy link
Author

@Mottie

Thanks will wait for the update .

@MentorEdit
Copy link
Author

Hey Mottie ,

Any luck with this. Can you guide me on how to fix this issue.

Thanks,

@Mottie
Copy link
Owner

Mottie commented Jun 18, 2014

Sorry, my time has been limited lately. I did fix the problem, but it only looks good with certain themes. The basic ones like blue, default, blue ice, etc; not so good with jQuery UI & Bootstrap.

Once I get the alignment corrected, I'll push the fix out to the working branch, and/or the master.

@Mottie Mottie changed the title cssstickyheaders Scroller widget Jun 18, 2014
@Mottie
Copy link
Owner

Mottie commented Jun 24, 2014

In the demo I shared before, I added this bit to the code... I'm not sure if you noticed:

cell2.className = "sorter-inputs header" + i;

it's what adds the class name header0, header1, etc to each header cell.

@MentorEdit
Copy link
Author

@ Mottie
yes i tried by adding the class name to the th element but no luck.

@MentorEdit
Copy link
Author

hey just now noticed , i could actually control the width of thead using the classname, but not the td in the tbody any idea on this ?

@Mottie
Copy link
Owner

Mottie commented Jun 25, 2014

Oh, I just realized that you have the widthFixed option set to true... remove that from the initialization code; what it does is creates a <colgroup> with a <col> for each column set at the starting width, so it may interfere with your other settings.

@MentorEdit
Copy link
Author

@Mottie
I changed it to false , and now able to adjust the widths of th and td using text1.style.maxWidth="10px" and the same for td as text2.style.maxWidth="20px"; There is a difference in how the width is set to thead and td , may be because of the sort icons occupying the space. I am just trying to adjust the space of td as per thead. Thank you so much for sticking to this issue and helping me to understand and resolve this.

@MentorEdit
Copy link
Author

@Mottie

I am sorry , was happy for one second that it was working but its not . I could only control thead widths. I am left with this issue , which is really consuming my time. They were fine till I reload the page , once reloaded , it comes up with the old width settings.

Thanks,

@MentorEdit
Copy link
Author

@Mottie
This is an old issue which I opened long back about the scroller widget. I applied the widget , I could edit the widths of the columns but for some reason the changes are not getting saved. So when ever I minimize and maximize the window the th td widths are getting changed. Let me know if you have any idea.

Thanks,

@Mottie
Copy link
Owner

Mottie commented Oct 28, 2014

Hmm, maybe I need to include a copy of the <colgroup> & <col> as well... I'll look into this when I get some free time.

@MentorEdit
Copy link
Author

Hey Mottie ,

Thanks for the reply , I am actually in a bit rush and thinking if you can guide me in what we can do about this. The first time the th and td are aligned properly , but on refresh the td's are not sticking to th widths .Is there any way i can fix this.

Thanks,

@Mottie
Copy link
Owner

Mottie commented Oct 29, 2014

Sorry, I didn't read the old comments when I last posted about including the <colgroup> and <col>s.

What happens if you resize the browser window, do the th & td widths align?

Is there a way you can modify one of the above demos to duplicate the issue being described?

@MentorEdit
Copy link
Author

@Mottie : with scroller widget , on initial launch the headers are respecting the widths which we apply , but once we resize the browser window the headers expand or some how the widths change. I am not sure if I can replicate this with demo but will try .

@MentorEdit
Copy link
Author

http://jsfiddle.net/cCzqn/355/

This is the link with the replication of the table ; Just try doing F12 and you can see the header shrinking on the right most end , This happens when ever I click a button which is just above the table
on my page also .

@MentorEdit
Copy link
Author

And even when i expand or extend the browser window also.

@Mottie
Copy link
Owner

Mottie commented Oct 29, 2014

I can not duplicate the issue being described here. I tried all of the following in both Chrome and Firefox:

  • I resized the browser of that demo and I did not see any misalignment of the columns.
  • I tried resizing the result iframe.
  • I resized a few header textareas, and the columns still line up (even though the textareas overflow into the next cell).
  • I scrolled all over, sorted the table and even thought about kicking it in the jimmy...

At this point I guess I would have to ask for a video showing the problem so I can understand the difference between what I am seeing and the reported issue. Try out screenr, it's a nice online video capture website that requires minimal effort.

@MentorEdit
Copy link
Author

Hey Mottie , was busy and could not reply , I cant share the video of the application because of the confidential issues . But one thing I noticed is , the widths which i set to td's / columns change when i click a button , or close a div element . Any help on this would be very helpful.

@TheSin-
Copy link
Collaborator

TheSin- commented Nov 5, 2014

I don't have an F12, can you add a button to it to show me so I can see it? I can't seem to reproduce it either honestly.

@TheSin-
Copy link
Collaborator

TheSin- commented Nov 5, 2014

how much do the change and do they return after? It's hard to fix in the dark.

@MentorEdit
Copy link
Author

@Mottie
I solved this finally. The issue was the table-layout was fixed , when i changed it to automatic now its not changing. Thank you so much for your time. You can close this issue.

Thanks,

@Mottie
Copy link
Owner

Mottie commented Nov 8, 2014

Oh, I'm glad you solved it. When I started working on this project I didn't think about that css setting and thus all the themes are designed without it set. I'll have to add updating the theme files to my to-do list.
😿 hehe

@ckarthikin
Copy link

Hi Mottie,

Thank you so much for a wonderful script. For the past one year i have used your script for filtering, and paging...currently i am implemented the scroller for first two columns. after implementing that filtering for first columns got disabled and content not changing for first columns while changing the paging...could you please help me on this..thank you so much..Karthik.c

@Mottie
Copy link
Owner

Mottie commented Apr 14, 2015

Hi @ckarthikin!

Did you update core and all the widgets along with the scroller widget? Can you share the initialization code being used? An actual demo of the problem would really help me narrow down the problem.

@ckarthikin
Copy link

Ya i have used updated code...my code is below

 <script type="text/javascript" src="JSNEW/jquery-latest.min1.11.0.js"></script>    
    <script src="JSNEW/jquery.tablesorter2.21.3.js" type="text/javascript"></script>
    <script src="JSNEW/jquery.tablesorter.widgets2.21.3.js" type="text/javascript"></script>
    <script src="JSNEW/widget-scroller2.21.5.js"></script>  
    <script src="js/jquery.tablesorter.pager2.21.0.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $.tablesorter.themes.bootstrap = {
            table: 'table table-striped table-hover table-bordered',
            caption: 'caption',
            header: 'bootstrap-header',
            sortNone: '',
            sortAsc: '',
            sortDesc: '',
            active: '',
            hover: '',
            icons: '',
            iconSortNone: 'bootstrap-icon-unsorted',
            iconSortAsc: 'icon-chevron-up glyphicon glyphicon-chevron-up',
            iconSortDesc: 'icon-chevron-down glyphicon glyphicon-chevron-down',
            filterRow: '',
            footerRow: '',
            footerCells: '',
            even: '',
            odd: ''
        };

        $("#GridView1").tablesorter({
            theme: "bootstrap",
            //widthFixed: true,
            showProcessing: true,
            headerTemplate: '{content} {icon}',
            widgets: ["uitheme", "filter", "zebra", "scroller"],
            widgetOptions: {
                scroller_height: 300,
                scroller_fixedColumns: 3,
                scroller_rowHighlight: 'hover'
            }            
        })
.tablesorterPager({
                   container: $(".ts-pager"),
                   cssGoto: ".pagenum",
                   removeRows: false,
                   output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'

               });
    });
 </script>
-----------------

    <table class="table table-bordered table-striped">
                <tfoot>
                    <tr>
                        <th colspan="7" class="ts-pager form-horizontal">
                            <button type="button" class="btn first">
                                <i class="icon-step-backward glyphicon glyphicon-step-backward"></i>
                            </button>
                            <button type="button" class="btn prev">
                                <i class="icon-arrow-left glyphicon glyphicon-backward"></i>
                            </button>
                            <span class="pagedisplay"></span>
                            <!-- this can be any element, including an input -->
                            <button type="button" class="btn next">
                                <i class="icon-arrow-right glyphicon glyphicon-forward"></i>
                            </button>
                            <button type="button" class="btn last">
                                <i class="icon-step-forward glyphicon glyphicon-step-forward"></i>
                            </button>
                            <select class="pagesize input-mini" title="Select page size">
                                <option value="5" selected="selected">5</option>
                                <option value="10">10</option>
                                <option value="15">15</option>
                                <option value="20">20</option>
                            </select>
                            <select class="pagenum input-mini" title="Select page number">
                            </select>
                        </th>
                    </tr>
                </tfoot>
            </table>

 <asp:GridView ID="GridView1" runat="server" Width="1000px" AutoGenerateColumns="true" 
                EmptyDataText="No record Found" CssClass="table table-striped table-bordered">                
                <AlternatingRowStyle Wrap="False" />
                <EditRowStyle Wrap="False" />
                <EmptyDataRowStyle Wrap="False" />
                <HeaderStyle Wrap="False" />
                <RowStyle Wrap="False" />
                <SelectedRowStyle Wrap="False" />
                 <PagerStyle CssClass="bs-pagination" />   
            </asp:GridView>

@ckarthikin
Copy link

my code gets scattered in view..can i send through mail...

@Mottie
Copy link
Owner

Mottie commented Apr 14, 2015

All you needed to do was wrap the code with a triple back tick `

```html
<!-- html code here -->
```

What does the formatted table HTML look like? You can just provide an example if the data is sensitive.

@Mottie
Copy link
Owner

Mottie commented Apr 14, 2015

It looks like you need to update the core & widgets all to v2.21.5 to match the scroller widget version.

Also @TheSin- pointed out that you might not want to use the tablesorter pager along with GridView's pager. Tablesorter's pager would not show an accurate page number or count. So, either use one or the other.

@ckarthikin
Copy link

Hi i have updatd all the cored to 2.21.5..I am not using GridView's pager.i am using Tablesorter's pager only...the problem is fixed column values not getting changed whule selecting the next page...i have finded a reason disabling which is mentioned in the previous post...thanks for the help...

@Mottie
Copy link
Owner

Mottie commented Apr 14, 2015

I wonder if the problem is because you're using the pager... when I updated the scroller widget, I didn't think it would ever be used along with the pager.

I don't know how GridView does it's paging... does it reload the entire page or just update the table? If it is only updating the table then you'll probably need to trigger an "update" or "setFixedColumnSize" event on the table after the table has updated; hopefully there is a GridView event or some indication that the table has updated.


Maybe this will work? http://forums.asp.net/t/1900937.aspx?how+can+call+javascript+function+on+gridview+paging+

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