This is a migrated thread and some comments may be shown as answers.

Grid paging issue, Ajax Rad Grid control

3 Answers 115 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Leonard
Top achievements
Rank 1
Leonard asked on 07 Dec 2011, 03:05 AM

Hi:
I have a  grid that appears to work properly in ASP.net 3.5 and IE8.  That means the grid will fill up the page and the pager control will appear at the bottom and there is a vertical scroll bar that will scroll the number of rows per page.

But when I upgraded to framework 4 and IE 9, the grid extends past the bottom of the browser and I have to enlarge the browser window to see the page control.  In some cases only half the page control will appear without some type of manual refresh.

Are there issues with the Grid control and ASP.Net 4 and or IE9?  Incidentally, I don't believe it is an IE9 problem because I get the same behaviour in FireFox and Opera.

Thanks

3 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 09 Dec 2011, 12:41 PM
Hello Leonard,

Could you please elaborate a bit more on your application. Do you have any custom styles applied to the RadGrid controls. Please send us your RadGrid markup and the related code behind so we could investigate the issue locally and advise you further.
Also please let me know if you are using the latest version of RadGrid control?

Best wishes,
Maria Ilieva
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Leonard
Top achievements
Rank 1
answered on 10 Dec 2011, 04:45 PM

Thank you for your reply.  I will try provide more info.  Since I just inherited this project and am new to the Telerik library, I apologize if I have left out anything that is important.  Reading the documentation, my impression is that the grid is suppose to automatically respond to a resize event, so I'm not sure why the ResizeGrid Javascript is being called other than the previous developer knew understood the library better that I currently do.  On studying the problem further, what I question is the edge condition where the paging size is 100 and the number of rows in the table is less than 100 but greater than the number of rows that can be displayed in the browser window.  Does the grid know to still include a paging control at the bottom of the browser screen?

Any thoughts or suggestions would really be appreciated.  - thank you again.

It is a asp.net application with a master page, but the grid is not on the master.
The all the rad controls are within a single asp:content panel.
The primary radcontrol groupings are (I'll leave out the bodies of the blocks that I don't think affect the problem):

<telerik:RadCodeBlock >...</telerik:RadCodeBlock>
 
<telerik:RadAjaxPanel>
    <telerik:RadWindowManager />
    <telerik:RadWindow />   <--there are five of these
    <ucGridSettingsManager:GridSettingsManager ID="ucGridSettingsManager" runat="server" />
    <telerik:RadGrid ID="rgOrder" runat="server" AllowPaging="True" AutoGenerateColumns="False"
            AllowMultiRowSelection="true" AllowSorting="True" EnableLinqExpressions="false" Height="200px" GridLines="None" OnItemDataBound="rgOrder_ItemDataBound" OnNeedDataSource="rgOrder_NeedDataSource"
            OnDetailTableDataBind="rgOrder_DetailTableDataBind" OnItemCommand="rgOrder_ItemCommand">
            <MasterTableView DataKeyNames="OrderHeaderSK" ClientDataKeyNames="ModuleTransactionSK,SiteSK,OrderHeaderSK,OrderID,ZeroPriceItems"
                TableLayout="Fixed" PageSize="100" PagerStyle-Mode="NextPrevAndNumeric" Name="Order"
                CommandItemDisplay="Top" EnableHeaderContextMenu="true">
                <CommandItemTemplate>
                    <telerik:RadToolBar ID="rtbCommand" runat="server" Width="100%" OnClientButtonClicking="clientbuttonclicking"
                        OnButtonClick="rtbCommand_ButtonClick">
                        <Items>
                            There are a bunch of buttons here.
                        </Items>
                    </telerik:RadToolBar>
                </CommandItemTemplate>
                <Columns>
                    There is a bunch of GridBoundColumns here
                </Columns>
                <DetailTables>
                    <telerik:GridTableView Name="OrderDetail" DataKeyNames="ItemSK" AllowFilteringByColumn="False"
                        EnableHeaderContextMenu="false">
                        <Columns>
                            There is a bunch of GridBoundColumns here
                        </Columns>
                    </telerik:GridTableView>
                </DetailTables>
            </MasterTableView>
            <ClientSettings AllowColumnsReorder="true" AllowColumnHide="true" ColumnsReorderMethod="Reorder"
                AllowAutoScrollOnDragDrop="false">
                <Selecting AllowRowSelect="true" />
                <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                <Resizing AllowColumnResize="true" />
                <ClientEvents OnGridCreated="ResizeGrid" OnRowSelected="RowSelected" />
            </ClientSettings>
        </telerik:RadGrid>
</telerik:RadAjaxPanel>

In the code behind file the event handlers that I think are relevant are:

protected void rgOrder_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
    rwNote.VisibleOnPageLoad = false;
     Order o = new Order();
     DataTable dt = o.GetOrderHeaderList(CurrentDataEntityCompanySK, CurrentUserSK);
     rgOrder.DataSource = dt;

}

The ResizeGrid is located javascript located on the master page:
function ResizeGrid(sender, args) {
    var gridelement = $(sender.get_element());
    var gridPosition = gridelement.position();

    var gridoffset = gridelement.offset();
    gridelement.height($(window).height()-3 - gridoffset.top);

    sender.repaint();

    var settings = $("#divSavedSettings");
    if (settings.length > 0) {

        var containerPosition;
        containerPosition = $(gridelement).offset();
        settings.css({ top: containerPosition.top + 7 + "px", right: 10 + "px" });

    }
}

Thanks you for your help and suggestions!

0
Maria Ilieva
Telerik team
answered on 14 Dec 2011, 01:40 PM
Hi Leonard,

You can set PagerStyle AlwaysVisible property as 'true' to achieve the required functionality:
<MasterTableView>
  <PagerStyle AlwaysVisible="true" />

I hope this helps.

Best wishes,
Maria Ilieva
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Tags
Grid
Asked by
Leonard
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Leonard
Top achievements
Rank 1
Share this question
or