RadGrid z-index property for IE8 and IE6

[Manishkumar]

Hi;
I am using Telerik RadGrid in a panel which open by modal extender popup.
but some how in IE6.0 the background is not greyed but work fine in IE8.0
I think it has do some thing with z-index property in both browser
Can you please tell What is the z index property set for Telerik RadGrid
in IE8.0 and in IE 6.0

[Daniel]

Hello Manishkumar,

Please post your code so that we can examine your setup. In the meantime I recommend that you visit the following link:
Controlling absolute positioning with z-index

Regards,
Daniel
the Telerik team

[Manishkumar]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Data;
using System.Collections;
public partial class Home : System.Web.UI.Page
{


    protected void Page_Load(object sender, EventArgs e)
    {

        if (!Page.IsPostBack)
        {
            hdnLastTabIndex.Value = "5";
            FillTabStrip(RadTabStrip1);

            // EventLogConsole1.LoggedEvents.Clear();

            ArrayList arrdata = new ArrayList();
            arrdata.Add("Data12");
            arrdata.Add("Data123");
            arrdata.Add("Data124");
            arrdata.Add("Data125");



            ArrayList repdata = new ArrayList();
            repdata.Add("Report1");
            repdata.Add("Report2");
            repdata.Add("Report3");
            repdata.Add("Report4");

            ArrayList admindata = new ArrayList();
            admindata.Add("Admin1");
            admindata.Add("Admin2");
            admindata.Add("Admin3");
            admindata.Add("Admin4");

            Session["ArrData"] = arrdata;
            //Session["RepData"] = repdata;



            DataTable dtchid = new DataTable();
            dtchid.Columns.Add("DataTextChild");
            dtchid.Columns.Add("MasterId");
            dtchid.Columns.Add("Sequence");
            dtchid.Columns.Add("Id");
            dtchid.Columns.Add("ControlID");
            for (int j = 0; j < arrdata.Count; j++)
            {
                DataRow dr1 = dtchid.NewRow();
                dr1["DataTextChild"] = arrdata[j].ToString();
                dr1["MasterId"] = "0";
                dr1["Sequence"] = j.ToString();
                dr1["Id"] = j.ToString();
                dtchid.Rows.Add(dr1);
                dtchid.AcceptChanges();
            }

            for (int k = 0; k < arrdata.Count; k++)
            {
                DataRow dr1 = dtchid.NewRow();
                dr1["DataTextChild"] = repdata[k].ToString();
                dr1["MasterId"] = "1";
                dr1["Sequence"] = "null";
                dr1["Id"] = k.ToString();
                dr1["ControlID"] = "Report.aspx";
                dtchid.Rows.Add(dr1);
                dtchid.AcceptChanges();
            }

            for (int a = 0; a < admindata.Count; a++)
            {
                DataRow dr1 = dtchid.NewRow();
                dr1["DataTextChild"] = admindata[a].ToString();
                dr1["MasterId"] = "2";
                dr1["Sequence"] = "null";
                dr1["Id"] = a.ToString();
                dtchid.Rows.Add(dr1);
                dtchid.AcceptChanges();
            }

            if (!Page.IsPostBack)
            {
                //FillTabStrip(RadTabStrip1, arrdata, null, 1);
                ArrayList arrdatalist = new ArrayList();
                arrdatalist.Add("Data12");
                arrdatalist.Add("Data1211");
                arrdatalist.Add("Data1244");

                ArrayList Headerdata = new ArrayList();
                Headerdata.Add("Data12");
                Headerdata.Add("");
                Headerdata.Add("");


                DataTable dt = new DataTable();
                dt.Columns.Add("DataText");
                dt.Columns.Add("Id");
                dt.Columns.Add("Desc");

                for (int i = 0; i < arrdatalist.Count; i++)
                {
                    DataRow dr = dt.NewRow();
                    dr["DataText"] = arrdatalist[i].ToString();
                    dr["Id"] = i.ToString();
                    dr["Desc"] = Headerdata[i].ToString();
                    dt.Rows.Add(dr);
                    dt.AcceptChanges();
                }

                Session["Data"] = dtchid;
                RadGrid1.DataSource = dt;
                RadGrid1.DataBind();
            }
        }
    }
    protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
    {
        this.UpdateToolTip(args.Value, args.UpdatePanel);
    }

    protected void gettabDetails_clicked(object sender, EventArgs e)
    {

        RadPageView pageView = new RadPageView();
        pageView.ID = "RadPageView" + (RadTabStrip1.Tabs.Count + 1);

       // string userControlName = pageView.ID + "CS.ascx";
        Control userControl = Page.LoadControl("WebUserControl.ascx");
        userControl.ID = pageView.ID + "_userControl";
        pageView.Controls.Add(userControl);

        RadMultiPage1.PageViews.Add(pageView);

        RadTab tab = new RadTab();
        hdnLastTabIndex.Value = (Convert.ToInt32(hdnLastTabIndex.Value) + 1).ToString();
        // tab = RadTabStrip1.Tabs[Convert.ToInt32(hdnLastTabIndex.Value) -1 ];
        tab.PageViewID = "RadPageView" + RadTabStrip1.Tabs.Count + 1;
        tab.Text = "999";

        RadTabStrip1.Tabs.Add(tab);
    }
    protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
    {
        // if (string.IsNullOrEmpty(hdnLastTabIndex.Value))
        {
            //if (Convert.ToInt32(hdnLastTabIndex.Value) > 6)
            {
                string userControlName = e.PageView.ID + "CS.ascx";

                //Control userControl = Page.LoadControl("UserControls/Grid.ascx");
                //userControl.ID = e.PageView.ID + "_userControl";

                //e.PageView.Controls.Add(userControl);
            }
        }
    }

    private void UpdateToolTip(string elementID, UpdatePanel panel)
    {

        Control ctrl = Page.LoadControl("WebUserControl.ascx");
        panel.ContentTemplateContainer.Controls.Add(ctrl);
        //   WebUserControl details = (WebUserControl)ctrl;
        //details.ProductID = elementID;

    }


    private void FillTabStrip(RadTabStrip tabStrip)
    {
        tabStrip.Tabs.Clear();

        RadPageView pageView = new RadPageView();

        for (int i = 0; i < 5; i++)
        {
            RadTab tab = new RadTab();
            tabStrip.Tabs.Add(tab);
            switch (i)
            {
                case 0:
                    tab.Text = "TelerikTab1";
                    tab.PageViewID = "RadPageView1";

                    break;
                case 1:
                    tab.Text = "TelerikTab2";
                    tab.PageViewID = "RadPageView2";
                    break;
                case 2:
                    tab.Text = "TelerikTab3";
                    tab.PageViewID = "RadPageView3";
                    break;
                case 3:
                    tab.Text = "TelerikTab4";
                    tab.PageViewID = "RadPageView4";
                    break;
                case 4:
                    {


                        pageView.ID = "RadPageView" + (RadTabStrip1.Tabs.Count + 1);

                        //string userControlName = pageView.ID + "CS.ascx";
                        //Control userControl = Page.LoadControl("UserControls/Grid.ascx");
                        //userControl.ID = pageView.ID + "_userControl";
                        //pageView.Controls.Add(userControl);

                        RadMultiPage1.PageViews.Add(pageView);


                        // tab = RadTabStrip1.Tabs[Convert.ToInt32(hdnLastTabIndex.Value) -1 ];
                        tab.PageViewID = "RadPageView" + RadTabStrip1.Tabs.Count + 1;
                        tab.Text = "TelerikTab" + hdnLastTabIndex.Value;

                        RadTabStrip1.Tabs.Add(tab);
                        break;
                    }
                default:
                    break;
            }
        }
    }



    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {


        }
    }

    protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
    {


    }

    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {

    }
    protected void RadGrid1_RowDataBound(object sender, GridItemEventArgs e)
    {





    }

}

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script type="text/javascript">
        function addTab() {

            // Adds the tab to the Tabs Collection of the selected tab
            selectedTab.get_tabs().add(tab);
            tab.set_text("Child Tab " + selectedTab.get_tabs().get_count());



        }

        function removeTab() {

            //Removes the selected tab from the Tabs Collection of the tabstrip
            tabStrip.get_tabs().remove(selectedTab);

        }

        function disableTab() {

            //Disables the selected tab
            selectedTab.set_enabled(false);

        }
        var combo = null;
        function CloseActiveToolTip() {
            //            var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
            //            if (tooltip) tooltip.hide();
        }

        function OnClientHide(sender, args) {
            //            if (combo) {
            //                $find(combo.id).hideDropDown();
        }


    </script>
    <style type="text/css">


        .modalPopup
{
      background-color:#ffffdd;
      border-width:3px;
      border-style:solid;
      border-color:Gray;
      padding:5px;
      width: 350px;
      height:300px;
      margin-left: auto;
       margin-right: auto;
         z-index :100;
}

.modalBackgroundpop {
       background-color:Gray;
    filter: alpha(opacity=50);
    opacity: 0.9;
    position:relative;
   z-index = 250000;

 }
    </style>
</head>
<body class="BODY">
    <form runat="server" id="mainForm" method="post">
       <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        Telerik.Web.UI.RadWebControl.prototype._clearParentShowHandlers = function () {
            var array = this._invisibleParents;
            for (var i = 0; i < array.length; i++) {
                this.remove_parentShown(array[i]);
            }

            this._invisibleParents = [];
            this._parentShowDelegate = null;
        }
    </script>
</telerik:RadScriptBlock>


    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
                Name="MicrosoftAjax.js" Path="~/Scripts/MicrosoftAjax.js" />
            <asp:ScriptReference Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
                Name="MicrosoftAjaxWebForms.js" Path="~/Scripts/MicrosoftAjaxWebForms.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //<![CDATA[
        function checkgdatachange()
        { }

        function addTab() {


            var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
            var selectedTab = tabStrip.get_selectedTab();

            tabStrip.trackChanges();

            var tab = new Telerik.Web.UI.RadTab();
            //tab.set_text("Section Tab " + selectedTab.get_tabs().get_count());

//            tab.set_text("Section Tab " + document.getElementById('hdnLastTabIndex').value);
//            tab.set_pageViewID("RadPageView7");
//            tabStrip.get_tabs().add(tab)
            //selectedTab.get_tabs().add(tab);
            //            var ObjNewRadPageView = new Telerik.Web.UI.RadPageView();
            //
            //            ObjNewRadPageView = ObjRadPageView;
            //            debugger;
            tabStrip.commitChanges();



        }
   var tabstip1;


   function fnfunction(SelectedText,ispopup)
   {

    var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
    tabStrip.trackChanges();
    var myTab;
   /*
    if(ispopup == 0)
        tab = tabStrip.findTabByText(document.getElementById("txtdata").value);
    else if(ispopup == 1)
        tab = tabStrip.findTabByText(SelectedText);

    if(tab != null)
    {
        var tabs = tab.get_parent().get_tabs();
        var index = tabs.indexOf(tab);
        tabStrip.get_tabs().getTab(index).select();

    }
    else
        alert("Invalid Input");
     */
      tabStrip = $find("<%=RadTabStrip1.ClientID %>");
         if(ispopup == 0)
        myTab = tabStrip.findTabByText(document.getElementById("txtdata").value);
    else if(ispopup == 1)
        myTab = tabStrip.findTabByText(SelectedText);
              if(myTab != null)
    {
        myTab.set_selected(true);
        tabStrip._scroller._scrollTo(myTab.get_element().offsetLeft);
        tabStrip._updateScrollState(tabStrip, tabStrip._scroller._currentPosition);
               }
                 else
        alert("Invalid Input");



     tabStrip.commitChanges();

   }

    </script>
    <table cellpadding="0" cellspacing="0" style="width: 100%">
        <tr>
            <td>

            </td>
        </tr>
        <tr>
            <td bgcolor="#ffffcc" height="2">
            </td>
        </tr>
        <tr>
            <td bgcolor="#f6f6f6">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td width="75%">



                        </td>

                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="left" colspan="3">
                <div id="divSection" class="divSection">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                                            <%-- <telerik:RadTabStrip ID="RadTabStrip4" runat="server" MultiPageID="RadMultiPage1"
                                    SelectedIndex="0" CssClass="tabStrip" ScrollButtonsPosition="Right">
                                    <Tabs>
                                        <telerik:RadTab Text="General" Width="15%" Selected="true" PageViewID="RadPageView1">
                                        </telerik:RadTab>
                                        <telerik:RadTab Text="CheckList Sec1" Width="15%" PageViewID="RadPageView3">
                                        </telerik:RadTab>
                                        <telerik:RadTab Text="Report link" Width="15%" PageViewID="RadPageView4">
                                        </telerik:RadTab>
                                        <telerik:RadTab Text="Sample Tab4" Width="15%" PageViewID="RadPageView2">
                                        </telerik:RadTab>
                                        <telerik:RadTab Text="Sample Tab5" Width="15%" PageViewID="RadPageView5">
                                        </telerik:RadTab>
                                        <telerik:RadTab Text="Sample Tab6" Width="15%" PageViewID="RadPageView6">
                                        </telerik:RadTab>
                                    </Tabs>
                                </telerik:RadTabStrip>--%>
                                <table>
                                    <tr>
                                        <td align="left">
                                            <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Style="float: left" SelectedIndex="0"
                                                MultiPageID="RadMultiPage1" Width="800" ScrollButtonsPosition="Right"   OnClientTabSelecting="checkgdatachange" ScrollChildren="true">
                                            </telerik:RadTabStrip>
                                            </telerik:RadTabStrip>
                                        </td>

                                         <td align="right">
                                          <asp:Button ID = "btnpop" runat="server" Text="ClickToOpenPOP" />

                                        </td>
                                    </tr>
                                </table>
                                <telerik:RadMultiPage ID="RadMultiPage1" runat="server" CssClass="multiPage" ScrollBars="Auto" OnPageViewCreated="RadMultiPage1_PageViewCreated">
                                    <telerik:RadPageView ID="RadPageView1" runat="server" Selected="true">

                                    </telerik:RadPageView>
                                    <telerik:RadPageView ID="RadPageView2" runat="server" ScrollBars="Auto">

                                    </telerik:RadPageView>
                                    <telerik:RadPageView ID="RadPageView3" runat="server">

                                    </telerik:RadPageView>
                                    <telerik:RadPageView ID="RadPageView4" runat="server">

                                    </telerik:RadPageView>

                                    <telerik:RadPageView ID="RadPageViewDemo" runat="server">

                                    </telerik:RadPageView>
                                </telerik:RadMultiPage>
                            </td>
                        </tr>
                    </table>
                </div>
                <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="Textarea" />
            </td>
        </tr>
        <tr>
            <td height="23" colspan="3">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td width="2%">
                        </td>
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" RelativeTo="Element"
                                Width="250px" Height="200px" Animation="Resize" HideEvent="ManualClose" Skin="Office2007"
                                OnAjaxUpdate="OnAjaxUpdate" OnClientHide="OnClientHide" RenderInPageRoot="true"
                                AnimationDuration="200" EnableShadow="true" Position="TopRight">
                            </telerik:RadToolTipManager>
                            <telerik:RadToolTipManager runat="server" ID="RadToolTipManager2" RelativeTo="Element"
                                Width="250px" Height="200px" Animation="Resize" Skin="WebBlue" OnAjaxUpdate="OnAjaxUpdate"
                                OnClientHide="OnClientHide" RenderInPageRoot="true" AnimationDuration="200" EnableShadow="true"
                                Position="TopRight">
                            </telerik:RadToolTipManager>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF" height="23">
                <br>
                <table cellpadding="0" cellspacing="0" class="style1" border="0">
                    <tr>
                        <td colspan="6" height="1" bgcolor="gray">
                        </td>
                    </tr>
                    <tr>


                        <td width="21%">



                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>


           <cc1:ModalPopupExtender  BehaviorID="mdltabdata" runat="server" TargetControlID="btnpop"
            PopupControlID="Panel2" BackgroundCssClass="modalBackgroundpop" ID="mdlgrdpop">
        </cc1:ModalPopupExtender>
      <asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" Style="display: none;" HorizontalAlign="Left"   >
    <telerik:RadGrid ID="RadGrid1" OnPreRender="RadGrid1_PreRender" runat="server" AutoGenerateColumns="false"
    AllowSorting="false" AllowMultiRowSelection="False" AllowPaging="False" PageSize="5"
    GridLines="None" ShowGroupPanel="false" OnItemCreated="RadGrid1_ItemCreated"
    OnItemCommand="RadGrid1_ItemCommand">
    <PagerStyle Mode="NumericPages"></PagerStyle>
    <MasterTableView AllowMultiColumnSorting="False" DataKeyNames="Id" GroupLoadMode="Server">
        <Columns>
            <telerik:GridBoundColumn SortExpression="DataText" HeaderText="Tab Navigation" HeaderButtonType="TextButton"
                DataField="DataText" UniqueName="DataText">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn SortExpression="CheckList" HeaderButtonType="TextButton"
                DataField="Desc" UniqueName="CheckList">
            </telerik:GridBoundColumn>
        </Columns>
        <NestedViewTemplate>
            <asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap" Visible="false">
                <telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0" RenderSelectedPageOnly="false">
                    <telerik:RadPageView runat="server" ID="PageView1">
                        <asp:Label ID="Label1" Font-Bold="true" Font-Italic="true" Text='<%# Eval("Id") %>'
                            Visible="false" runat="server" />
                        <telerik:RadGrid runat="server" ID="grdpopupgrid" AllowSorting="true" EnableLinqExpressions="false"
                            AutoGenerateColumns="false" OnItemDataBound="RadGrid1_RowDataBound">
                            <ClientSettings>
                                <Selecting AllowRowSelect="True" />
                                <ClientEvents OnRowDblClick="RowDoubleClick" />
                            </ClientSettings>
                            <PagerStyle Mode="NumericPages"></PagerStyle>
                            <MasterTableView AllowMultiColumnSorting="False" DataKeyNames="DataTextChild" GroupLoadMode="Server">
                                <Columns>
                                    <telerik:GridBoundColumn SortExpression="DataTextChild" HeaderText="" HeaderButtonType="TextButton"
                                        DataField="DataTextChild" UniqueName="DataTextChild">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="Id" HeaderText="" HeaderButtonType="TextButton"
                                        DataField="Id" UniqueName="Id" Visible="false">
                                    </telerik:GridBoundColumn>
                                     <telerik:GridBoundColumn SortExpression="ControlID" HeaderText="" HeaderButtonType="TextButton"
                                        DataField="ControlID" UniqueName="ControlID" Visible="false">
                                    </telerik:GridBoundColumn>
                                </Columns>
                            </MasterTableView>
                        </telerik:RadGrid>
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </asp:Panel>
        </NestedViewTemplate>
    </MasterTableView>
    <ClientSettings AllowDragToGroup="true" />
</telerik:RadGrid>
</asp:Panel>
    <asp:HiddenField id="hdnLastTabIndex" runat="server" />
    </form>
</body>
</html>

please find the code snipeet 1. is the C# code 2. is the html code


Telerik version 2010.3.1215.35
AjaxcontrolToolkit version  3.5.40412.2

[Manishkumar]

hi
Do we have any solution for this issue.
please reply ASAP. Its very urgent

[Manishkumar]

hi;
please find the more information in the attachscreen. to more details in the issue

[Daniel]

Hello Manishkumar,

I failed to reproduce the problem on my end. I attached a sample screenshot and a runnable demo based on your code. Let me know if I'm missing something.

Best regards,
Daniel
the Telerik team