RadDock Q3 Create So Many Issue. Please help us

2 posts, 0 answers
  1. dipen shah
    dipen shah avatar
    11 posts
    Member since:
    Jan 2010

    Posted 05 Mar 2010 Link to this post

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

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head id="Head1" runat="server">

     

    <title></title>

     

    <link id="Link1" href="~/Styles/UDStyles.css" rel="stylesheet" type="text/css" runat="server" />

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

     

    <UpdatedControls>

    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />

     

    </UpdatedControls>

     

    </telerik:AjaxSetting>

    <telerik:AjaxSetting AjaxControlID="RadGrid1">

     

    <UpdatedControls>

    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />

     

    </UpdatedControls>

     

    </telerik:AjaxSetting>

     

    </AjaxSettings>

     

    </telerik:RadAjaxManager>

     

    <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" Skin="Web20">

     

    <ContentTemplate>

     

    <telerik:RadGrid ID="RadGrid1" Skin="Office2007" 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>

     

    </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 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);

    }

    }

    }

    }

  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 05 Mar 2010 Link to this post

    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">
    <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top