[Solved] Ajax Rebind Grids Size problem inside Tab

[Avi Raju]

My page contains 2 tabs and under each tab, there is a grid inside.

After performing something on the page, it fires a ajax request to the server side to cause a rebind to the grid.
The grid inside the focused tab is rendered perfectly. However the second one is not, the height of the grid is just about 1 row.

javascript:

        function ReloadGrid()
        {
            $find("<%=RadAjaxManager1.ClientID%>").ajaxRequest("RefreshGrid");
         }

Declaration:

<telerik:RadTabStrip ID="radGrid" SelectedIndex="0" runat="server" MultiPageID="GridMultiPage" Skin="Outlook">
                    <Tabs>
                        <telerik:RadTab runat="server" Text="Expense Detail" PageViewID="ExpenseDetail" Selected="True">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="View all detail lines" PageViewID="AllDetail">
                        </telerik:RadTab>
                    </Tabs>
           </telerik:RadTabStrip>
           <telerik:RadMultiPage ID="GridMultiPage" runat="server" SelectedIndex="0"  >
                <telerik:RadPageView ID="ExpenseDetail" runat="server" BorderStyle="none">
                    <telerik:RadGrid ID="expenseDetailGrid" runat="server" AllowPaging="True" AllowSorting="True"
                        GridLines="None" AutoGenerateColumns="False" ShowFooter="True" Skin="Outlook" Width="600px" Height="290px" OnNeedDataSource="expenseDetailGrid_NeedDataSource">
                        <MasterTableView DataKeyNames="Expense_Detail_Id" ClientDataKeyNames="Expense_Detail_Id">
                            <RowIndicatorColumn>
                                <HeaderStyle Width="20px" />
                            </RowIndicatorColumn>
                            <ExpandCollapseColumn>
                                <HeaderStyle Width="20px" />
                            </ExpandCollapseColumn>
                            <Columns>
                               .....    Removed .......
                            </Columns>
                        </MasterTableView>
                        <ClientSettings>
                            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                            <Selecting AllowRowSelect="True" />
                            <ClientEvents OnRowSelected="expenseDetailGridRowSelected" />
                        </ClientSettings>
                        <FilterMenu EnableTheming="True" Skin="Outlook">
                            <CollapseAnimation Duration="200" Type="OutQuint" />
                        </FilterMenu>
                        <PagerStyle Mode="NextPrevAndNumeric" />
                    </telerik:RadGrid>
               </telerik:RadPageView>
               <telerik:RadPageView ID="AllDetail" runat="server" BorderStyle="none" >
                   <telerik:RadGrid ID="allDetailGrid" runat="server" AllowPaging="True" AllowSorting="True"
                        GridLines="None" AutoGenerateColumns="False" ShowFooter="True" Skin="Outlook" Width="980px" Height="290px" OnNeedDataSource="AllDetailGrid_NeedDataSource" OnItemDataBound="allDetailGrid_ItemDataBound">
                        <MasterTableView DataKeyNames="AG_Expense_Detail_Line_Id" ClientDataKeyNames="AG_Expense_Detail_Line_Id">
                            <RowIndicatorColumn>
                                <HeaderStyle Width="20px" />
                            </RowIndicatorColumn>
                            <ExpandCollapseColumn>
                                <HeaderStyle Width="20px" />
                            </ExpandCollapseColumn>
                            <Columns>
                            .... Removed
                            </Columns>
                        </MasterTableView>
                        <ClientSettings ReorderColumnsOnClient="True">
                            <Scrolling AllowScroll="True" UseStaticHeaders="True"/>
                            <Selecting AllowRowSelect="True" />
                            <Resizing AllowColumnResize="True" />
                              <ClientEvents OnRowSelected="allDetailGridRowSelected" />
                        </ClientSettings>
                        <FilterMenu EnableTheming="True" Skin="Outlook">
                            <CollapseAnimation Duration="200" Type="OutQuint" />
                        </FilterMenu>
                        <PagerStyle Mode="NextPrevAndNumeric"/>
                       <ItemStyle Wrap="True"/>
                    </telerik:RadGrid>
              </telerik:RadPageView>
</telerik:RadMultiPage>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1" >
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="expenseDetailGrid"   />
                            <telerik:AjaxUpdatedControl ControlID="allDetailGrid"  />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="expenseDetailGrid">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="expenseDetailGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="allDetailGrid">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="allDetailGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Transparency="10" BackColor="#e0e0e0">
                <table width="100%" height="100%">
                <tr>
                    <td valign="middle" align="center"><img src="../../images/loading6.gif" /></td>
                </tr>
                </table>
            </telerik:RadAjaxLoadingPanel>

Code Behind :

protected void AllDetailGrid_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {

        Expense_Detail_Line_DataAdapter da_expensedetailline = new Expense_Detail_Line_DataAdapter();
        DataSet ds_expensedetailline = da_expensedetailline.GetExpenseDetailLineByExpense(_ExpenseId);
        allDetailGrid.DataSource = ds_expensedetailline;
    }



   protected void expenseDetailGrid_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        Expense_Detail_DataAdapter da_expensedetail = new Expense_Detail_DataAdapter();
        DataSet ds_expensedetail = da_expensedetail.GetExpenseDetailByExpense(_ExpenseId);
        expenseDetailGrid.DataSource = ds_expensedetail;
    }

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        if (e.Argument == "RefreshGrid")
        {
            expenseDetailGrid.Rebind();
            allDetailGrid.Rebind();
        }
    }

[Avi Raju]

Could someone please help ... ?

[Sebastian]

Hello Avi,

The discrepancy you described is indeed strange and unfortunately I cannot say for certain what might be the exact reason for it. Can you please check whether setting ClientSettings -> Scrolling -> ScrollHeight for your grids explicitly (which matches their Height value) alleviates the abnormality? Additionally, verify that you are using the latest release 2009.1.402 of RadControls for ASP.NET AJAX in your project.

If the discrepancy remains, please post a live url where it can be observed and troubleshoot further. Thus I will be able to check the rendered html of the respective grid using IE developer toolbar or Firebug and hopefully will find the cause of the oddity to address it.

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Avi Raju]

I have tried to set the scroll height the same as height , but the problem still exists.
I tried to upgrade to 2009 Q1 as well but some of the skin are removed which stop me using 2009 Q1.

I have a video capture on the problem, how can I post it?

[Sebastian]

Hello Avi,

You can use our support ticket system for this purpose and attach the video you prepared in order to research the issue further. Another option would be to use some free hosting service for video upload and provide a link to it in this public forum thread (since the Telerik forums do not allow file attachments).

Kind regards,
Sebastian
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[DheepaB]

Has this ever been solved I have a similar problem where I have a grid inside a user control and when I call a method in the user control to rebind the grid, the height of the grid seems to be one row. I set the scroll height to be the same but still no luck.

[Sebastian]

Hello DheepaB,

Here is the reply my colleague Dimo provided when Avi posted an example in a new support ticket he started:

When used with static headers, RadGrid needs to perform some Javascript calculations and readjust its layout on the client. This cannot be achieved when the RadGrid is inside an invisible container, because dimension-related Javascript calculations do not work in this case.

The solution is to force manual layout adjust (example below) when the active pageview is changed. The other option is to set RenderSelectedPageOnly="true" to the RadMultiPage.

Copy Code

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        if (e.Argument == "RefreshGrid")
        {
            expenseDetailGrid.Rebind();
            allDetailGrid.Rebind();
        }
    }

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 30;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = DateTime.Now.ToLongTimeString();
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Vista" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
    OnAjaxRequest="RadAjaxManager1_AjaxRequest" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="expenseDetailGrid" />
                <telerik:AjaxUpdatedControl ControlID="allDetailGrid" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="expenseDetailGrid">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="expenseDetailGrid" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="allDetailGrid">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="allDetailGrid" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<asp:Button ID="Button1" runat="server" OnClientClick="ReloadGrid();return false;"
    Text="AJAX Request" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">

function ReloadGrid()
{
    $find("<%=RadAjaxManager1.ClientID%>").ajaxRequest("RefreshGrid");
}

function ClientTabSelected(sender, args)
{
    var selectedPageViewID = $find("<%= GridMultiPage.ClientID %>").get_selectedPageView().get_id();
    if (selectedPageViewID == "<%= ExpenseDetail.ClientID %>")
    {
        var grid = $find("<%= expenseDetailGrid.ClientID %>");
    }
    else
    {
        var grid = $find("<%= allDetailGrid.ClientID %>");
    }
    grid.get_masterTableView().get_element().style.tableLayout = "auto";
    grid.get_masterTableViewHeader().get_element().style.tableLayout = "auto";
    grid.get_masterTableViewHeader().get_element().parentNode.style.width = "auto";
    grid.get_masterTableViewHeader().get_element().parentNode.style.marginRight = 0;
    grid.get_masterTableViewHeader().get_element().parentNode.style.paddingRight = Telerik.Web.UI.Grid.getScrollBarHeight() + "px";
    grid.repaint();
}

</script>
</telerik:RadCodeBlock>

<telerik:RadTabStrip ID="radGrid" SelectedIndex="0" runat="server" MultiPageID="GridMultiPage"
    Skin="Outlook" OnClientTabSelected="ClientTabSelected">
    <Tabs>
        <telerik:RadTab runat="server" Text="Expense Detail" PageViewID="ExpenseDetail" Selected="True">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="View all detail lines" PageViewID="AllDetail">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

<telerik:RadMultiPage ID="GridMultiPage" runat="server" SelectedIndex="0">
    <telerik:RadPageView ID="ExpenseDetail" runat="server" BorderStyle="none">
        <telerik:RadGrid ID="expenseDetailGrid" runat="server" AllowPaging="True" AllowSorting="True"
            GridLines="None" ShowFooter="True" Skin="Outlook"
            Width="600px" Height="290px" OnNeedDataSource="RadGrid_NeedDataSource">
            <ClientSettings>
                <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                <Selecting AllowRowSelect="True" />
            </ClientSettings>
        </telerik:RadGrid>
    </telerik:RadPageView>
    <telerik:RadPageView ID="AllDetail" runat="server" BorderStyle="none">
        <telerik:RadGrid ID="allDetailGrid" runat="server" AllowPaging="True" AllowSorting="True"
            GridLines="None" ShowFooter="True" Skin="Outlook"
            Width="980px" Height="290px" OnNeedDataSource="RadGrid_NeedDataSource">
            <ClientSettings ReorderColumnsOnClient="True">
                <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                <Selecting AllowRowSelect="True" />
                <Resizing AllowColumnResize="True" />
            </ClientSettings>
        </telerik:RadGrid>
    </telerik:RadPageView>
</telerik:RadMultiPage>

</form>
</body>
</html>

Best regards,
Sebastian
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.