[Solved] Grid Scrolling Issue

[Duke]

Hello, Telerik Team.
We ran into a weird problem. The scrolling function does not work properly in IE 11 (I think IT restricts the policy to IE 8 or under in the domain since I did not find any issue in my home laptop IE 11).

Here is the page code.

<telerik:RadGrid ID="RotateGrid" Width="950px" runat="server" GridLines="None"
                    AllowPaging="false" AllowSorting="false" PageSize="10" Visible="true"
                    Skin="Vista" HeaderStyle-Font-Bold="true" OnItemDataBound="RotateGrid_ItemDataBound">
                    <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst"
                        Dir="LTR" Frame="Border" TableLayout="Fixed" HeaderStyle-Font-Bold="true">
                        <Columns>
                            <telerik:GridBoundColumn DataField="AcademicYear" HeaderText="Academic Year" Visible="True" HeaderStyle-Width="85px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Period" HeaderText="Period" Visible="True" HeaderStyle-Width="40px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="StartDate" HeaderText="Start" Visible="True" HeaderStyle-Width="70px" DataFormatString="{0:M/d/yyyy}">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="EndDate" HeaderText="End" Visible="True" HeaderStyle-Width="70px" DataFormatString="{0:M/d/yyyy}">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Preceptor" HeaderText="Preceptor" UniqueName="Preceptor" Visible="True" HeaderStyle-Width="188px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Preceptor" HeaderText="PreceptorHid" UniqueName="PreceptorHid" Display="false" HeaderStyle-Width="0px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Rotation" HeaderText="Rotation" UniqueName="Rotation" Visible="True" HeaderStyle-Width="188px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Rotation" HeaderText="RotationHid" UniqueName="RotationHid" Display="false" HeaderStyle-Width="0px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Team" HeaderText="Team" Visible="True" HeaderStyle-Width="35px" Display="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="HoStatus" HeaderText="HO" Visible="True" HeaderStyle-Width="32px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="AttStatus" HeaderText="Att" Visible="True" HeaderStyle-Width="32px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="RotStatus" HeaderText="Rot" Visible="True" HeaderStyle-Width="32px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="StudentYear" HeaderText="StudentYear" Display="false" HeaderStyle-Width="0px">
                            </telerik:GridBoundColumn>
                        </Columns>
                        <EditFormSettings>
                            <EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType">
                            </EditColumn>
                        </EditFormSettings>
                    </MasterTableView>
                    <ClientSettings>
                        <Scrolling AllowScroll="true" UseStaticHeaders="True" ScrollHeight="370px"></Scrolling>
                    </ClientSettings>
                </telerik:RadGrid>

Back-End C#:

protected void Page_Load(object sender, EventArgs e)
    {
        IsValidUser();

        using (var context = new CourseInformationDataContext())
        {
            var studentId = (string)Session["StudentID"];
            var classMemberList = from cm in context.Class_Members
                                  join sm in context.CO_StudentMappings on cm.ID equals sm.WesternU_Id
                                  where cm.ID == studentId
                                  select new
                                  {
                                      // use  ?? "null coalescing" operator to handle nulls
                                      Last = cm.Last ?? "",
                                      First = cm.First ?? "",
                                      Nickname = cm.Nickname ?? "",
                                      PhotoURL = cm.PhotoURL ?? "",
                                      StudentID = cm.ID ?? "",
                                      Class = cm.Class ?? "",
                                      MediTrekId = sm.MediTrek_Id ?? "",
                                  };

            foreach (var member in classMemberList)
            {
                Class.Text = member.Class;
                StudentId.Text = "WU ID: " + member.StudentID;
                MediTrekId.Text = "MediTrek ID: " + member.MediTrekId;
                MediTrekIdHid.Value = member.MediTrekId;
                LastNameLbl.Text = member.Last.ToString();

                // concatenate the names if nickname is present
                if (!string.IsNullOrEmpty(member.Nickname.ToString()))
                {
                    FirstNameLbl.Text = member.First.ToString() + "  (" + member.Nickname.ToString() + ")";
                }
                else
                {
                    FirstNameLbl.Text = member.First.ToString();
                }

                StudentImage.ImageUrl = AppSolution.ImageVal(Server, "~/Pics/" + member.PhotoURL.ToString());

                if (Session["Demonstration"] == "true")
                {
                    StudentImage.CssClass = "blurImage";
                    LastNameLbl.Text = DemoWordsWithGUID(LastNameLbl.Text.Length);
                    FirstNameLbl.Text = DemoWordsWithGUID(FirstNameLbl.Text.Length);
                    StudentId.Text = "WU ID: @123456789";
                    MediTrekId.Text = "MediTrek ID: 123456";
                    DemoModeCreator dmc = new DemoModeCreator();
                    StudentImage.ImageUrl = "~/Pics/" + dmc.DemoImage(member.PhotoURL.ToString());
                }
            }

            //Rotation Schedule Grid
            var rotateList = from mts in context.CO_MediTrekEvalStatus
                             join sm in context.CO_StudentMappings on mts.StudentMediTrekId equals sm.MediTrek_Id
                             where sm.WesternU_Id.Equals(studentId)
                             orderby mts.StartDate
                             select mts;

            RotateGrid.DataSource = rotateList;
            RotateGrid.DataBind();
        }
    }

    protected void RadComboBox1_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
    {
        CO_MediTrekEvalDetail item = e.Item.DataItem as CO_MediTrekEvalDetail;
        e.Item.Text = item.FromDate.GetValueOrDefault().ToString("MM/dd/yyyy") + " - " + item.Preceptor + "@" + item.Rotation;
        e.Item.Value = item.CompositeKey;
    }

    protected void RotateGrid_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            DateTime now = DateTime.Now;
            DateTime from = Convert.ToDateTime(item["StartDate"].Text);
            DateTime to = Convert.ToDateTime(item["EndDate"].Text);
            if (from == null || to == null)
                return;

            to = to.AddDays(1);

            if (now.Ticks >= from.Ticks && now.Ticks <= to.Ticks)
            {
                item.BackColor = System.Drawing.Color.LightGreen;
            }

            int len = 29;
            string tx1 = item["Preceptor"].Text;
            if (tx1.Length > len)
                item["Preceptor"].Text = "<div onmouseover=\"ShowLongString(this);\" onmouseout=\"ShowShortString(this);\"><span class=\"short\">" + tx1.Substring(0, len) + "...</span><span class=\"long\" style=\"display:none;\">" + tx1 + "</span></div>";
            string tx2 = item["Rotation"].Text;
            if (tx2.Length > len)
                item["Rotation"].Text = "<div onmouseover=\"ShowLongString(this);\" onmouseout=\"ShowShortString(this);\"><span class=\"short\">" + tx2.Substring(0, len) + "...</span><span class=\"long\" style=\"display:none;\">" + tx2 + "</span></div>";

            //DIV block for status
            AttachStatusDiv(ref item, "HoStatus");
            AttachStatusDiv(ref item, "AttStatus");
            AttachStatusDiv(ref item, "RotStatus");
        }
    }

    private void AttachStatusDiv(ref GridDataItem item, string columnName)
    {
        //string greenDiv = "<div class=\"rot-done\" title=\"done\"></div>";
        string pinkDiv = "<div class=\"rot-due\" title=\"due\"></div>";
        string hoStatus = item[columnName].Text.ToLower().Trim();

        string compositeKey = "";
        switch (columnName)
        {
            case "HoStatus":
                {
                    int sy = 0;
                    try
                    {
                        sy = int.Parse(item["StudentYear"].Text);
                    }
                    catch (Exception) { }
                    // For 4th year evalution, it has mid-term and final two evaluations.
                    if (sy == 4)
                        compositeKey = string.Join("@", MediTrekIdHid.Value, item["PreceptorHid"].Text, "@Mid-Term" + item["StartDate"].Text, item["Period"].Text, AppEnumeration.CO_MT_EVAL_TYPE["pes"]) + "|pes";
                    else
                        compositeKey = string.Join("@", MediTrekIdHid.Value, item["PreceptorHid"].Text, item["StartDate"].Text, item["Period"].Text, AppEnumeration.CO_MT_EVAL_TYPE["pes"]) + "|pes";
                    break;
                }
            case "AttStatus":
                {
                    compositeKey = string.Join("@", MediTrekIdHid.Value, item["PreceptorHid"].Text, item["StartDate"].Text, item["Period"].Text, AppEnumeration.CO_MT_EVAL_TYPE["sep"] + "|sep");
                    break;
                }
            case "RotStatus":
                {
                    compositeKey = string.Join("@", MediTrekIdHid.Value, item["RotationHid"].Text, item["StartDate"].Text, item["Period"].Text, AppEnumeration.CO_MT_EVAL_TYPE["ses"] + "|ses");
                    break;
                }
            default:
                {
                    break;
                }
        }
        switch (hoStatus)
        {
            case "done":
                item[columnName].Controls.Add(GetDoneButton(compositeKey));
                //item[columnName].Text = greenDiv;
                break;
            case "due":
                item[columnName].Text = pinkDiv;
                break;
            default:
                break;
        }
    }

    private RadButton GetDoneButton(string compositeKey)
    {
        RadButton btn = new RadButton
                        {
                            Skin = "",
                            Width = new System.Web.UI.WebControls.Unit(12),
                            Height = new System.Web.UI.WebControls.Unit(16),
                            BackColor = System.Drawing.Color.LightGreen,
                            BorderWidth = new System.Web.UI.WebControls.Unit(1),
                            BorderColor = System.Drawing.Color.Black,
                            BorderStyle = System.Web.UI.WebControls.BorderStyle.Solid,
                            ToolTip = "Click to view the detail.",
                            CommandArgument = compositeKey,
                        };
        btn.Click += GetDetail;

        return btn;
    }

    protected void GetDetail(object sender, System.EventArgs e)
    {
        RadButton btn = sender as RadButton;
        string[] paras = btn.CommandArgument.Split('|');
        string compositeKey = paras[0];
        if (!string.IsNullOrEmpty(compositeKey))
        {
            RotationGridPanel.Visible = false;
            CompositeKeyHid.Value = compositeKey;
            using (var context = new CourseInformationDataContext())
            {
                var evaluationList = (from ev in context.CO_MediTrekEvalDetails
                                      where ev.CompositeKey.Equals(compositeKey)
                                      select ev).FirstOrDefault();

                if (evaluationList != null)
                {
                    List<EvaluationModel> list = new List<EvaluationModel>();
                    string title = "";
                    switch (paras[1])
                    {
                        case "pes":
                            {
                                int qc = 7;
                                string[] local = precptEvalsOfStuQuestions6;
                                if (int.Parse(evaluationList.StudentYear) > 2)
                                {
                                    qc = 10;
                                    local = precptEvalsOfStuQuestions9;
                                }

                                for (int i = 1; i < qc; i++)
                                {
                                    EvaluationModel model = new EvaluationModel
                                    {
                                        Item = local[i - 1],
                                        Result = evaluationList.GetType().GetProperty("Q" + i).GetValue(evaluationList) as string,
                                    };
                                    list.Add(model);
                                }

                                title = "Preceptor Evaluation of Student";
                                DescriptionLit.Text = "";
                                DescriptionLit.Visible = false;
                                if (int.Parse(evaluationList.StudentYear) == 4)
                                {
                                    FouthYearSwitch.Items[0].Selected = true;
                                    FouthYearSwitch.Visible = true;
                                }
                                else
                                    FouthYearSwitch.Visible = false;

                                break;
                            }
                        case "sep":
                            {
                                int qc = 12;
                                string[] local = stuEvalsOfPrecptQuestion11;
                                if (int.Parse(evaluationList.StudentYear) > 2)
                                {
                                    qc = 15;
                                    local = stuEvalsOfPrecptQuestion14;
                                }
                                for (int i = 1; i < qc; i++)
                                {
                                    EvaluationModel model = new EvaluationModel
                                    {
                                        Item = local[i - 1],
                                        Result = evaluationList.GetType().GetProperty("Q" + i).GetValue(evaluationList) as string,
                                    };
                                    list.Add(model);
                                }

                                title = "Student Evaluation of Preceptor";
                                DescriptionLit.Text = "<div style=\"padding-bottom:5px;\"><i>NA = Unable to Assess; 1 = Strongly Disagree; 2 = Disagree; 3 = Agree; 4 = Strongly Agree</i></div>";
                                DescriptionLit.Visible = true;
                                FouthYearSwitch.Visible = false;

                                break;
                            }
                        case "ses":
                            {
                                int qc = 14;
                                for (int i = 1; i < qc; i++)
                                {
                                    EvaluationModel model = new EvaluationModel
                                    {
                                        Item = stuEvalsOfSiteQuestions[i - 1],
                                        Result = evaluationList.GetType().GetProperty("Q" + i).GetValue(evaluationList) as string,
                                    };
                                    list.Add(model);
                                }

                                title = "Student Evaluation of Site";
                                DescriptionLit.Text = "<div style=\"padding-bottom:5px;\"><i>NA = Unable to Assess; 1 = Strongly Disagree; 2 = Disagree; 3 = Agree; 4 = Strongly Agree</i></div>";
                                DescriptionLit.Visible = true;
                                FouthYearSwitch.Visible = false;

                                break;
                            }
                        default: break;
                    }
                    // Mandatory and General Comments
                    EvaluationModel mc = new EvaluationModel
                    {
                        Item = this.mc,
                        Result = evaluationList.MandatoryComments,
                    };
                    list.Add(mc);

                    EvaluationModel gc = new EvaluationModel
                    {
                        Item = this.gc,
                        Result = evaluationList.GeneralComments,
                    };
                    list.Add(gc);

                    RotDetailGrid.Visible = true;
                    RotDetailGrid.DataSource = list;
                    RotDetailGrid.DataBind();
                    GridTitle.Text = "<b>Type</b>: " + title;
                    DateLit.Text = "<b>Time</b>: " + evaluationList.FromDate.GetValueOrDefault().ToString("MM/dd/yyyy") + " - " + evaluationList.ToDate.GetValueOrDefault().ToString("MM/dd/yyyy");
                    EvaluatorLit.Text = "<b>Preceptor</b>: " + evaluationList.Preceptor;
                    RotationLit.Text = "<b>Rotation</b>: " + evaluationList.Rotation;
                    ErrorLit.Visible = false;
                }
                else
                {
                    GridTitle.Text = "";
                    DateLit.Text = "";
                    EvaluatorLit.Text = "";
                    RotationLit.Text = "";
                    RotDetailGrid.Visible = false;
                    ErrorLit.Text = "<div style=\"padding-top:10px;font-size:12px;\"><img src=\"" + Page.ResolveUrl("~/Styles/Images/error.gif") + "\" alt=\"error\" style=\"vertical-align:middle;\"/> We cannot find the evaluation data for you. You may contact <a href=\"mailto:[e-mail]?subject=CO MediTrek Data Issue\">[e-mail]</a> to check the detail for you.</div>";
                    ErrorLit.Visible = true;
                    if (compositeKey.IndexOf("Mid-Term") != -1)
                    {
                        FouthYearSwitch.ClearSelection();
                        FouthYearSwitch.Visible = true;
                    }
                    else
                        FouthYearSwitch.Visible = false;
                }
            }

            RotDetailPanel.Visible = true;
        }
    }

[Pavlina]

Hello Duke,

Please set the position:relative style to the scrollable container (RadGrid in your case) and you should be able to resolve the problem in IE:

.rgDataDiv
 {
    position:relative;
 }

Regards,
Pavlina
Telerik