Scroller widget

[MentorEdit]

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

[TheSin-]

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

[MentorEdit]

@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]

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. :crying_cat_face: hehe

[ckarthikin]

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]

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]

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]

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

[Mottie]

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]

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]

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]

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+