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

Missing Header in telerik grid

7 Answers 185 Views

Grid

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

mesha asked on 28 Apr 2010, 12:25 PM

grid1.JPG

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

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

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.

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"

"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</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