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

Missing Header in telerik grid

7 Answers 154 Views
Grid
This is a migrated thread and some comments may be shown as answers.
mesha
Top achievements
Rank 1
mesha asked on 28 Apr 2010, 12:25 PM
Hi,

Header is missing after loading the radgrid. Attached is the screen shot.

Following is the code i am using for update panel

<telerik:RadAjaxManagerProxy ID="radAjaxMgr" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="rgrdDocumentList">
<UpdatedControls>
<telerik:AjaxUpdatedControl LoadingPanelID="lstLoadingpane" ControlID="rgrdDocumentList" />
<telerik:AjaxUpdatedControl ControlID="hiddenDirtyFlag" />
</UpdatedControls>
</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel Transparency="10" ID="lstLoadingpane" runat="server"
IsSticky="true" CssClass="FileStoreModalPanel">
</telerik:RadAjaxLoadingPanel>


Here "rgrdDocumentList" is our radgrid control.

Please suggest me the solution.

Thanks,
Shashi

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 29 Apr 2010, 11:21 AM
Hi Shashi,

What makes you think that the RadAjaxManagerProxy control is related to the problem? Is it reproduced only when AJAX is enabled? Can you provide the RadGrid declaration or even better, a runnable web page?

Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
mesha
Top achievements
Rank 1
answered on 29 Apr 2010, 02:48 PM
Hi Dimo,

Many Thanks for your reply.

Unfortunately, i can't provide the sample as the current page contains a huge code that is correlated with other pages and components. I am pasting the radgrid declaration.

<telerik:RadGrid ID="rgrdDocumentList" runat="server" AllowPaging="false" ShowStatusBar="false"
            AutoGenerateColumns="false" AllowMultiRowSelection="true" AllowSorting="true"
            BorderWidth="0" Skin="Office2007"
            GridLines="None"
            EnableEmbeddedSkins="true" Width=100% style="display:none" Height="100%" >
           
            <MasterTableView ItemStyle-Wrap="true"
                BorderWidth = "1"
                HeaderStyle-Wrap="true"
                DataKeyNames="DocumentID"
                TableLayout="Fixed" AllowPaging="true"
                AllowCustomSorting="true"
                EnableColumnsViewState="false"
                CommandItemDisplay="Top"
                ShowFooter="false" AllowCustomPaging="True"  >
                <CommandItemTemplate>
                </CommandItemTemplate>
            </MasterTableView>
           
            <ItemStyle  Wrap="false"  />
            <PagerStyle NextPageText="Next" PrevPageText="Prev"
            Position="Top" Mode="NumericPages"  AlwaysVisible="true"/>
            <HeaderStyle Height="20px" />
            <ClientSettings EnableRowHoverStyle="true">
                <Resizing AllowColumnResize="True"  ResizeGridOnColumnResize="true"></Resizing>
                <ClientEvents OnRowContextMenu="GridRowContextMenu" OnGridCreated="rgrdDocumentList_OnGridCreated"  OnRowCreated="rgrdDocumentList_OnRowCreated"
                        OnDataBinding="rgrdDocumentList_OnGridCreated" OnMasterTableViewCreated="rgrdDocumentList_OnGridCreated"
                        OnRowClick="GridRowClickHandler" OnRowDblClick="rgrdDocumentList_RowDblClick" OnTableCreated="rgrdDocumentList_OnGridCreated"  />
                <Scrolling AllowScroll="true" ScrollHeight="100%" />
                <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
            </ClientSettings>
                <ItemStyle Font-Names="Arial" Font-Size="11px"  ForeColor="black" />
            <AlternatingItemStyle Font-Names="Arial" Font-Size="11px"  ForeColor="black"/>
        </telerik:RadGrid>

And also i have declared a stylesheet class that will set the height of the RadAjaxManager Update Panel to 100% using following post.
http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx

I was able to succeed half away by setting the height but the width is shrinking now. I also tried setting the width of the panel but no luck.

Please let me know the solution.

Thanks,
Shashi
0
Dimo
Telerik team
answered on 29 Apr 2010, 04:14 PM
Hello Shashi,

I suspect the problem to be caused by the display:none style - when used with static headers, RadGrid must calculate and adjust its layout on the client. However, Javascript calculations do not work when an element has a display:none style.

Try repainting the RadGrid when you show it on the client.

http://www.telerik.com/help/aspnet-ajax/grid-repaint.html

If this doesn't help, you will have to remove the display:none style and use visibility:hidden or show the control after an AJAX request.

By the way, ScrollHeight accepts only pixel values and there is no use in setting Height and ScrollHeight at the same time:

http://www.telerik.com/help/aspnet-ajax/height-vs-scrollheight.html

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
mesha
Top achievements
Rank 1
answered on 30 Apr 2010, 09:51 AM
Wow Amazing!

I have removed "display: none" from the radgrid declaration and it is working fine.

Many Thanks for your help and much appreciated your work on providing me the samples.

Thanks,
Shashi
0
mesha
Top achievements
Rank 1
answered on 30 Apr 2010, 05:44 PM
Hi Dimo,

Sorry once again.

I am getting the same issue...problem is when i have thousands of records to be displayed in the grid.

Can you please suggest me.

Thanks,
Shashi
0
mesha
Top achievements
Rank 1
answered on 04 May 2010, 04:44 PM
Hi Dimo,

Can you please send me solution to my problem.

Thanks,
Shashi
0
Dimo
Telerik team
answered on 07 May 2010, 09:14 AM
Hi Shashi,

I can't reproduce the described problem after removing the display:none style. Here is my test page, let me know if I am missing something.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<script runat="server">
 
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 3000;
        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)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
 
        (sender as RadGrid).DataSource = dt;
    }
     
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
<style type="text/css">
 
html,body,form
{
    margin:0;
    padding:0;
    height:100%;
}
 
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadGrid ID="rgrdDocumentList" runat="server" ShowStatusBar="false"
    AllowMultiRowSelection="true" AllowSorting="true"
    BorderWidth="0" Skin="Office2007"
    GridLines="None" OnNeedDataSource="RadGrid_NeedDataSource"
    Height="100%" style="outline:none">
    <MasterTableView ItemStyle-Wrap="true"
        BorderWidth = "1"
        HeaderStyle-Wrap="true"
        TableLayout="Fixed"
        AllowCustomSorting="true"
        EnableColumnsViewState="false"
        CommandItemDisplay="Top"
        ShowFooter="false">
        <CommandItemTemplate>
        </CommandItemTemplate>
    </MasterTableView>
    <ItemStyle  Wrap="false"  />
    <PagerStyle NextPageText="Next" PrevPageText="Prev"
    Position="Top" Mode="NumericPages"  AlwaysVisible="true"/>
    <HeaderStyle Height="20px" />
    <ClientSettings EnableRowHoverStyle="true">
        <Resizing AllowColumnResize="True"  ResizeGridOnColumnResize="true"></Resizing>
        <Scrolling AllowScroll="true" />
        <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
    </ClientSettings>
        <ItemStyle Font-Names="Arial" Font-Size="11px"  ForeColor="black" />
    <AlternatingItemStyle Font-Names="Arial" Font-Size="11px"  ForeColor="black"/>
</telerik:RadGrid>
 
</form>
</body>
</html>


Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Grid
Asked by
mesha
Top achievements
Rank 1
Answers by
Dimo
Telerik team
mesha
Top achievements
Rank 1
Share this question
or