Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadGrid with same Size RadWindow

4 Answers 128 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Christiano
Top achievements
Rank 1
Christiano asked on 30 Aug 2010, 06:14 PM
gridok.JPG
gridnook.JPG
I use in my application a RadGrid with same Size RadWindow. I use style="width:98%; height:95%; position:absolute"  and            <MasterTableView TableLayout="Auto"></MasterTableView>  in my RadGrid and work fine. But when i try use RadWindowManager
option ShowContentDuringLoad="false" the RadGrid don't show in the first time the same way. Why?
Anybody can help me?

4 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 01 Sep 2010, 03:47 PM
Hi Christiano,

When used with static headers, RadGrid performs some Javascript size calculations on the client in order to adjust its layout. Such calculations work differently or do not work at all (which is normal) when the control is placed inside an inivisible container, as in your case. I advise you to leave ShowContentDuringLoad set to "true".

Alternatively, you should remove some of the widths and styles that the control has set and repeat the layout adjusting procedure.

page with RadWindow:

<%@ Page Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!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>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadWindow ID="RadWindow1" runat="server" Skin="Office2007" ShowContentDuringLoad="false"
    VisibleOnPageLoad="true" Width="800px" Height="400px" NavigateUrl="343526_grid2.aspx">
</telerik:RadWindow>
 
</form>
</body>
</html>


page inside RadWindow

<%@ 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 = 140;
    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="RadGrid1"
    runat="server"
    AllowPaging="true"
    PageSize="20"
    Skin="Office2007"
    Height="100%"
    style="border-width:0;outline:none;"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        <ClientEvents OnGridCreated="MyGridCreated" />
    </ClientSettings>
</telerik:RadGrid>
 
<script type="text/javascript">
 
function MyGridCreated(sender, args)
{
    sender.GridHeaderDiv.style.width = "";
    sender.GridDataDiv.style.width = "";
    sender.get_masterTableView().get_element().style.tableLayout = "auto";
    sender.get_masterTableView().get_element().style.width = "";
    sender.get_masterTableViewHeader().get_element().style.tableLayout = "auto";
    sender.get_masterTableViewHeader().get_element().style.width = "";
    var cols = sender.get_element().getElementsByTagName("col");
    for (var j = 0; j < cols.length; j++)
    {
        cols[j].style.width = "";  
    }
    sender.get_masterTableView().get_element().style.width = "100%";
    sender.get_masterTableViewHeader().get_element().style.width = "100%";
    //alert('');
    window.setTimeout(function(){sender._scrolling._initializeDimensions();}, 1);
}
 
</script>
 
</form>
</body>
</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
Christiano
Top achievements
Rank 1
answered on 01 Sep 2010, 09:14 PM
grid-ie7.JPG
grid-ie8.JPG
Thanks Dimo , really work now! But don't work in IE8 and Chrome Browsers, only in IE7. Do you have any ideia why that?
0
Accepted
Dimo
Telerik team
answered on 02 Sep 2010, 10:43 AM
Hello Christiano,

Probably you have added AJAX functionality without setting a 100% height to the generated update panel (a <div> element).

If you are using the latest RadControls version, set UpdatePanelHeight="100%" in the RadGrid telerik:AjaxUpdatedControl tag. Otherwise, refer to:

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx

Sincerely yours,
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
Christiano
Top achievements
Rank 1
answered on 02 Sep 2010, 06:37 PM
Thanks so much!
Tags
Grid
Asked by
Christiano
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Christiano
Top achievements
Rank 1
Share this question
or