Question

I’m using the tableToGrid method of jqGrid to convert an ASP.Net GridView into a jqGrid. The grid is converted and everything looks good. But once I click a column to sort by, the data gets sorted and then I lose the vertical scrollbar, or really, just the ability to scroll. It seems like it wants to implement paging when I don’t have any paging. For example, the data being returned and bound to the grid contains about 75 rows that I just list; with no paging. After I click a column to sort, it shows about 20 rows, there is no vertical scroll bar and I can’t see the other rows (the ones past 20). Do I have to setup paging?

Thank you for any assistance.

tableToGrid("#ContentPlaceHolder1_grid",
        { height: 600,
          forceFit: true,
          viewrecords: true, 
          hidegrid: true,
          gridview: true,
          autowidth: true,
          colNames: ['Id', 'Number', 'Facility', 'Department', 'Category', 'Job Title', 'Date Last Modified'],
          colModel: [
              { name: 'Id', index: 'Id', width: 30, hidden: true },
              { name: 'Number', index: 'Number', width: 75, title: false },
              { name: 'Facility', index: 'Facility', width: 120 },
              { name: 'Department', index: 'Department', width: 120 },
              { name: 'Category', index: 'Category', width: 120 },
              { name: 'Job_Title', index: 'Job_Title', width: 170, sortable: false },
              { name: 'Date_Last_Modified', index: 'Date_Last_Modified', width: 100, sortable: true, align: 'right' }
          ]
        });

My GridView is wrapped inside an UpdatePanel.

<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="content" class="ui-widget half-height-widget">
            <div class="ui-widget-header ui-corner-top"> 
                <h2 id="PageTitle">
                    <img alt="JSA" src="Images/jsa.png"/>Open JSA Document
                    <span id="toolbar">
                        <asp:Button ID="open" Text="Open" CssClass="button" runat="server" />
                    </span>                        
                </h2>
            </div>        
            <div class="ui-widget-content ui-corner-bottom"> 
                <div id="content-div" style="overflow: auto;">
                    <div id="files" style="height: 601px;">
                        <asp:GridView runat="server" ID="grid" AutoGenerateColumns="False">
                            <Columns>
                                <asp:TemplateField HeaderText="">
                                    <ItemTemplate><img class="jqGrid-icon" onclick='alert(<%# Eval("Id") %>);' alt='' src="images/magnifier-medium.png" /></ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="Number" HeaderText="Number" />
                                <asp:BoundField DataField="Facility" HeaderText="Facility" />
                                <asp:BoundField DataField="Department" HeaderText="Department" />
                                <asp:BoundField DataField="Category" HeaderText="Category" />
                                <asp:BoundField DataField="Job_Title" HeaderText="Job Title" />
                                <asp:BoundField DataField="Date_Last_Modified" 
                                    HeaderText="Date Last Modified" />
                            </Columns>
                        </asp:GridView>
                    </div>
                </div>            
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

Answer 1

You should just include rowNum: 1000 in the list of jqGrid options in the second parameters of tableToGrid. If you don’t have visible pager the local data paging still exist. So you should increase the page size from the default value rowNum: 20 to any large enough value (like 1000 or 10000 for example). Probably the usahe of height: 'auto' is one more option which you need.

See the modified demo here.