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

RadDock Q3 Create So Many Issue. Please help us

1 Answer 46 Views

Dock

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

dipen shah asked on 05 Mar 2010, 02:35 PM

teeth.jpg

expand.jpg

collapseandexpand.jpg

I attached the code and screen. Please take a look. We are putting grid in RadDock. RadGrid contain Filer option. Now In Rad Dock we collapse and expand. Grid will Hide.

2nd Concern is we are using Web20 Skin. In Normal window it is working fine. But when we decrrease the size of window we are getting teeth image. I attached all images.

Please take a look and give us solution ASAP. Please note that we are using IE 6.0

.ASPX Page

<%@ Page Language="C#" AutoEventWireup="false" ValidateRequest="false" CodeFile="TierMaskCodesTest.aspx.cs"

Inherits="TierMaskCodes" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

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

</head>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<tr>

<tr>

<tr>

<td>

<telerik:RadDockLayout ID="RadDockLayout2" runat="server">

<telerik:RadDockZone ID="RadDockZone2" runat="server" Width="99%" BorderWidth="0">

<telerik:RadDock runat="server" ID="RadDock2" Title="Expand Collapse Issue" Width="100%"

EnableDrag="false" DefaultCommands="ExpandCollapse" Skin="Web20">

<telerik:RadGrid ID="RadGrid1" Skin="Office2007" runat="server" GridLines="None"

AutoGenerateColumns="False" OnInit="RadGrid1_Init" AllowFilteringByColumn="true">

</RowIndicatorColumn>

</ExpandCollapseColumn>

<telerik:GridBoundColumn DataField="Column1" AllowFiltering="false" HeaderText="Column1"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column2" AllowFiltering="false" HeaderText="Column2"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column3" AllowFiltering="false" HeaderText="Column3"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column4" HeaderText="Column4"

ShowFilterIcon="true" AllowFiltering="true"></telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</HeaderContextMenu>

</FilterMenu>

</ClientSettings>

</telerik:RadGrid>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"

MinDisplayTime="200" Width="75px">

<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

style="border: 0px;" />

</telerik:RadAjaxLoadingPanel>

<asp:HiddenField ID="loadErrMsg" runat="server" />

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

</Windows>

</telerik:RadWindowManager>

</form>

</body>

</html>

.CS Page

using System;

using System.Collections.Generic;

using System.Data;

using System.Linq;

using Telerik.Web.UI;

public partial class TierMaskCodes : System.Web.UI.Page

{

protected override void OnLoad(EventArgs e)

{

DataTable Dt1 = new DataTable();

Dt1.Columns.Add(new DataColumn("Column1"));

Dt1.Columns.Add(new DataColumn("Column2"));

Dt1.Columns.Add(new DataColumn("Column3"));

Dt1.Columns.Add(new DataColumn("Column4"));

DataRow Dr1 = Dt1.NewRow();

Dr1["Column1"] = "Good";

Dr1["Column2"] = "to";

Dr1["Column3"] = "eat";

Dr1["Column4"] = "Oranges";

Dt1.Rows.Add(Dr1);

DataRow Dr2 = Dt1.NewRow();

Dr2["Column1"] = "Good";

Dr2["Column2"] = "to";

Dr2["Column3"] = "eat";

Dr2["Column4"] = "Cherries";

Dt1.Rows.Add(Dr2);

DataRow Dr3 = Dt1.NewRow();

Dr3["Column1"] = "Good";

Dr3["Column2"] = "to";

Dr3["Column3"] = "eat";

Dr3["Column4"] = "Peaches";

Dt1.Rows.Add(Dr3);

DataRow Dr4 = Dt1.NewRow();

Dr4["Column1"] = "Good";

Dr4["Column2"] = "to";

Dr4["Column3"] = "eat";

Dr4["Column4"] = "Grapes";

Dt1.Rows.Add(Dr4);

DataRow Dr5 = Dt1.NewRow();

Dr5["Column1"] = "Good";

Dr5["Column2"] = "to";

Dr5["Column3"] = "eat";

Dr5["Column4"] = "Apples";

Dt1.Rows.Add(Dr5);

RadGrid1.DataSource = Dt1;

RadGrid1.DataBind();

}

protected void RadGrid1_Init(object sender, System.EventArgs e)

{

GridFilterMenu menu = RadGrid1.FilterMenu;

int i = 0;

while (i < menu.Items.Count)

{

if (menu.Items[i].Text == "NoFilter" || menu.Items[i].Text == "Contains" || menu.Items[i].Text == "DoesNotContain" || menu.Items[i].Text == "StartsWith"

|| menu.Items[i].Text == "EndsWith" || menu.Items[i].Text == "EqualTo" || menu.Items[i].Text == "NotEqualTo")

{

i++;

}

else

{

menu.Items.RemoveAt(i);

}

1 Answer, 1 is accepted

answered on 05 Mar 2010, 05:07 PM

Hi Dipen,

1. The problem seems to be present only under IE6. It is caused by the fact that the parent element of the Grid, which in this case is the <div> rendered by the AJAX Panel (placed by the AjaxManager), does not have any width and height set. If you set width and height to 100% the problem disappears. The following JavaScript code will set gridParent CSS class to the parent element of the grid (i.e. the AJAX panel's <div>):

<telerik:RadScriptBlock runat="server">

<script type="text/javascript">

function pageLoad()

{

var grid = $find("<%=RadGrid1.ClientID %>");

grid.get_element().parentNode.className = "gridParent";

}

</script>

<style type="text/css">

.gridParent

{

width: 100%;

height: 100%;

}

</style>

</telerik:RadScriptBlock>

Here is the modified source code:

.aspx

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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 id="Head1" runat="server">

<title></title>

<telerik:RadScriptBlock runat="server">

<script type="text/javascript">

function pageLoad()

{

var grid = $find("<%=RadGrid1.ClientID %>");

grid.get_element().parentNode.className = "gridParent";

}

</script>

<style type="text/css">

.gridParent

{

width: 100%;

height: 100%;

}

</style>

</telerik:RadScriptBlock>

</head>

<body style="margin: 0px; padding: 0px;">

<form id="form1" runat="server" style="margin: 0px; padding: 0px;">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<input type="button" value="Button1" onclick="Show(); return false;" />

<table border="0" cellpadding="2" cellspacing="1" width="95%">

<tr>

<td style="width: 100%; border: solid 1px #B5C7DE;">

<table width="100%" cellspacing="0">

<tr>

<td style="width: 100%;">

<table width="100%" border="0" cellspacing="0">

<tr>

<td>

<telerik:RadDockLayout ID="RadDockLayout2" runat="server">

<telerik:RadDockZone ID="RadDockZone2" runat="server" Width="99%" BorderWidth="0">

<telerik:RadDock runat="server" ID="RadDock2" Title="Expand Collapse Issue" Width="100%"

EnableDrag="false" DefaultCommands="ExpandCollapse">

<ContentTemplate>

<div id="divGrid" style="width: 100%; height: 100%;">

<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" AutoGenerateColumns="False"

OnInit="RadGrid1_Init" AllowFilteringByColumn="true">

<GroupingSettings CaseSensitive="false" />

<MasterTableView>

<RowIndicatorColumn Visible="False">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="False" Resizable="False">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="Column1" AllowFiltering="false" HeaderText="Column1">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column2" AllowFiltering="false" HeaderText="Column2">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column3" AllowFiltering="false" HeaderText="Column3">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column4" HeaderText="Column4" ShowFilterIcon="true"

AllowFiltering="true">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<AlternatingItemStyle BackColor="#EFF3FB" />

<HeaderContextMenu EnableTheming="True" Skin="Office2007">

<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

</HeaderContextMenu>

<FilterMenu EnableTheming="True" Skin="Office2007">

<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

</FilterMenu>

<ClientSettings>

</ClientSettings>

</telerik:RadGrid>

</div>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"

MinDisplayTime="200" Width="75px">

<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

style="border: 0px;" />

</telerik:RadAjaxLoadingPanel>

<asp:HiddenField ID="loadErrMsg" runat="server" />

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

<Windows>

</Windows>

</telerik:RadWindowManager>

</form>

</body>

</html>

.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using Telerik.Web.UI;

public partial class Teeth : System.Web.UI.Page

{

protected override void OnLoad(EventArgs e)

{

DataTable Dt1 = new DataTable();

Dt1.Columns.Add(new DataColumn("Column1"));

Dt1.Columns.Add(new DataColumn("Column2"));

Dt1.Columns.Add(new DataColumn("Column3"));

Dt1.Columns.Add(new DataColumn("Column4"));

DataRow Dr1 = Dt1.NewRow();

Dr1["Column1"] = "Good";

Dr1["Column2"] = "to";

Dr1["Column3"] = "eat";

Dr1["Column4"] = "Oranges";

Dt1.Rows.Add(Dr1);

DataRow Dr2 = Dt1.NewRow();

Dr2["Column1"] = "Good";

Dr2["Column2"] = "to";

Dr2["Column3"] = "eat";

Dr2["Column4"] = "Cherries";

Dt1.Rows.Add(Dr2);

DataRow Dr3 = Dt1.NewRow();

Dr3["Column1"] = "Good";

Dr3["Column2"] = "to";

Dr3["Column3"] = "eat";

Dr3["Column4"] = "Peaches";

Dt1.Rows.Add(Dr3);

DataRow Dr4 = Dt1.NewRow();

Dr4["Column1"] = "Good";

Dr4["Column2"] = "to";

Dr4["Column3"] = "eat";

Dr4["Column4"] = "Grapes";

Dt1.Rows.Add(Dr4);

DataRow Dr5 = Dt1.NewRow();

Dr5["Column1"] = "Good";

Dr5["Column2"] = "to";

Dr5["Column3"] = "eat";

Dr5["Column4"] = "Apples";

Dt1.Rows.Add(Dr5);

RadGrid1.DataSource = Dt1;

RadGrid1.DataBind();

}

protected void RadGrid1_Init(object sender, System.EventArgs e)

{

GridFilterMenu menu = RadGrid1.FilterMenu;

int i = 0;

while (i < menu.Items.Count)

{

if (menu.Items[i].Text == "NoFilter" || menu.Items[i].Text == "Contains" || menu.Items[i].Text == "DoesNotContain" || menu.Items[i].Text == "StartsWith"

|| menu.Items[i].Text == "EndsWith" || menu.Items[i].Text == "EqualTo" || menu.Items[i].Text == "NotEqualTo")

{

i++;

}

else

{

menu.Items.RemoveAt(i);

}

2. This is a known issue when specifying the Width in percent values. To avoid the problem follow this KB article: http://www.telerik.com/support/kb/aspnet-ajax/dock/fixing-raddock-title-when-its-width-is-specified-in-percent-values-and-the-browser-is-resized.aspx

Sincerely yours,
Pero
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadDock Q3 Create So Many Issue. Please help us

1 Answer, 1 is accepted