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

Skin not showing correctly - IE 9

5 Answers 38 Views

ListView

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

Kevin F asked on 27 Jan 2015, 02:14 PM

data.png

I'm seeing some weird display behavior using a ListView with a data pager on IE 9. I've already told the clients they need to upgrade their browsers but not all of them will :)

Anyway, I've attached a PNG of what I see (unfortunately not ALL the time). The IE 9 F12 dev tools are horrible so I can't tell from those if a style sheet isn't loading correctly or what.

This is a scenario where I have a RadWindow which contains a RadTabStrip. The tabs' content in the strip are dynamically loaded via ASCX controls.

I'm curious if others have seen this behavior with IE 9, and if they were able to eliminate it.

ASPX:

<telerik:radlistview id="lstViewEmployment" runat="server" datakeynames="Id" datasourceid="dsEmployments" allowpaging="True" allowcustompaging="True"

allownaturalsort="True" pagesize="1" skin="Windows7" onitemcreated="lstViewEmployment_ItemCreated" oniteminserted="lstViewEmployment_ItemInserted"

onitemupdated="lstViewEmployment_ItemUpdated" onitemcanceling="lstViewEmployment_ItemCanceling" onitemediting="lstViewEmployment_ItemEditing"

onitemdatabound="lstViewEmployment_ItemDataBound">

<LayoutTemplate>

<div class="RadListView RadListViewFloated RadListView_Windows7">

<div class="rlvFloated">

<div runat="server" id="itemPlaceholder"></div>

</div>

<telerik:RadDataPager runat="server" SEOPagingQueryPageKey="" Skin="Windows7" ID="RadDataPager1" PageSize="1" Width="900">

<Fields>

<telerik:RadDataPagerButtonField FieldType="FirstPrev" />

<telerik:RadDataPagerButtonField FieldType="NextLast" />

<telerik:RadDataPagerGoToPageField CurrentPageText="Employment Record" EnableSubmitButton="false" HorizontalPosition="RightFloat" />

</Fields>

</telerik:RadDataPager>

<div style="display: none">

<telerik:RadCalendar runat="server" ID="rlvSharedCalendar" Skin='<%#Container.Skin %>' RangeMinDate='<%#new DateTime(1900, 1, 1) %>' />

</div>

<div style="display: none">

<telerik:RadTimeView runat="server" ID="rlvSharedTimeView" Skin='<%# Container.Skin %>' />

</div>

</LayoutTemplate>

<ItemTemplate>

<div class="rlvI">

<telerik:RadButton ID="btnEdit" runat="server" Text="Edit" ToolTip="Edit" CommandName="Edit" CausesValidation="false"></telerik:RadButton>

<telerik:RadButton ID="btnDelete" runat="server" Text="Delete" ToolTip="Delete" CommandName="Delete" CausesValidation="false"></telerik:RadButton>

<div class="formLine">

<div class="formField66">

Name of Employer:

<asp:Label ID="lblEmployerName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>

</div>

<div class="formLine">

<div class="formField66">

Employment Address:

<asp:Label ID="lblEmployerAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>

</div>

<div class="formLine">

<div class="formField33">

City, State:

<asp:Label ID="lblCity" runat="server" Text='<%# Eval("City") %>'></asp:Label>,

<asp:Label ID="lblState" runat="server" Text='<%# Eval("State") %>'></asp:Label>

</div>

<div class="formField33">

County:

<asp:Label ID="lblCounty" runat="server" Text='<%# Eval("County") %>'></asp:Label>

</div>

<div class="formField33">

Zip:

<asp:Label ID="lblZip" runat="server" Text='<%# Eval("ZipCode") %>'></asp:Label>

</div>

<div class="formLine">

<div class="formField33">

Phone Number:

<asp:Label ID="lblPhone" runat="server" Text='<%# SorBll.Util.FormatPhoneNumber(Eval("Phone")) %>'></asp:Label>

</div>

<div class="formField66">

Employment Begin Date:

<asp:Label ID="lblStartDate" runat="server" Text='<%# SorBll.Util.FormatNullableDate(Eval("BeginDate")) %>'></asp:Label>

</div>

<div class="formLine">

<div class="formField66">

Occupation:

<asp:Label ID="lblOccupation" runat="server" Text='<%# Eval("Occupation") %>'></asp:Label>

</div>

</ItemTemplate>

<AlternatingItemTemplate>

<div class="rlvA">

<telerik:RadButton ID="btnEdit" runat="server" Text="Edit" ToolTip="Edit" CommandName="Edit" CausesValidation="false"></telerik:RadButton>

<telerik:RadButton ID="btnDelete" runat="server" Text="Delete" ToolTip="Delete" CommandName="Delete" CausesValidation="false"></telerik:RadButton>

<div class="formLine">

<div class="formField66">

Name of Employer:

<asp:Label ID="lblEmployerName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>

</div>

<div class="formLine">

<div class="formField66">

Employment Address:

<asp:Label ID="lblEmployerAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>

</div>

<div class="formLine">

<div class="formField33">

City, State:

<asp:Label ID="lblCity" runat="server" Text='<%# Eval("City") %>'></asp:Label>,

<asp:Label ID="lblState" runat="server" Text='<%# Eval("State") %>'></asp:Label>

</div>

<div class="formField33">

County:

<asp:Label ID="lblCounty" runat="server" Text='<%# Eval("County") %>'></asp:Label>

</div>

<div class="formField33">

Zip:

<asp:Label ID="lblZip" runat="server" Text='<%# Eval("ZipCode") %>'></asp:Label>

</div>

<div class="formLine">

<div class="formField33">

Phone Number:

<asp:Label ID="lblPhone" runat="server" Text='<%# SorBll.Util.FormatPhoneNumber(Eval("Phone")) %>'></asp:Label>

</div>

<div class="formField66">

Employment Begin Date:

<asp:Label ID="lblStartDate" runat="server" Text='<%# SorBll.Util.FormatNullableDate(Eval("BeginDate")) %>'></asp:Label>

</div>

<div class="formLine">

<div class="formField66">

Occupation:

<asp:Label ID="lblOccupation" runat="server" Text='<%# Eval("Occupation") %>'></asp:Label>

</div>

</AlternatingItemTemplate>

<EditItemTemplate>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function CloseCityPopUpAndRefreshEmploymentEdit() {

var combo = $find("<%= lstViewEmployment.EditItems[0].FindControl("cboEmploymentCity").ClientID %>");

combo.requestItems("", false);

}

function onEmpCityClientFocus(sender, args) {

var box = $find("<%= lstViewEmployment.EditItems[0].FindControl("cboEmploymentCity").ClientID %>");

box.showDropDown();

}

</script>

</telerik:RadScriptBlock>

<div class="rlvIEdit">

<div class="formLine">

<div class="formField66">

Name of Employer:

<telerik:RadTextBox ID="txtEmployerName" runat="server" MaxLength="50" Width="400" Text='<%# Bind("Name") %>' TabIndex="1">

<ClientEvents OnBlur="ForceUpperCase" />

</telerik:RadTextBox>

</div>

<div class="formLine">

<div class="formField66">

Employment Address:

<telerik:RadTextBox ID="txtEmployerAddress" runat="server" MaxLength="50" Width="400" Text='<%# Bind("Address") %>' TabIndex="2">

<ClientEvents OnBlur="ForceUpperCase" />

</telerik:RadTextBox>

</div>

<div class="formLine">

<div class="formField33">

City, State:

<asp:LinkButton ID="lnkAddEmploymentCityEdit" runat="server" OnClick="lnkAddEmploymentCityEdit_Click">ADD CITY</asp:LinkButton>

|

<asp:LinkButton ID="lnkClearCity" runat="server" OnClick="lnkClearCity_Click">CLEAR CITY</asp:LinkButton>

<br />

<telerik:RadComboBox ID="cboEmploymentCity" runat="server" EmptyMessage="Type city ..." DataValueField="IDNumber" TabIndex="3" OnItemsRequested="cboEmploymentCity_ItemsRequested"

OnClientFocus="onEmpCityClientFocus" DataTextField="CITY" MarkFirstMatch="true" DropDownAutoWidth="Enabled" DataSourceID="dsCities" EnableLoadOnDemand="False">

<ItemTemplate>

<%# Eval("CITY") %>, <%# Eval("State") %>, <%# Eval("ZIPCODE1") %> <%# Eval("COUNTY") %>

</ItemTemplate>

</telerik:RadComboBox>

,

<telerik:RadTextBox ID="txtEmploymentState" runat="server" MaxLength="2" Width="45px" Enabled="false" Text='<%# Bind("State") %>'></telerik:RadTextBox>

</div>

<div class="formField33">

County:<br />

<telerik:RadTextBox ID="txtEmploymentCounty" runat="server" MaxLength="50" Enabled="false" Text='<%# Bind("County") %>'></telerik:RadTextBox>

</div>

<div class="formField33">

Zip:<br />

<telerik:RadMaskedTextBox ID="txtEmploymentZip" runat="server" Mask="#####" Enabled="false" Text='<%# Bind("ZipCode") %>'></telerik:RadMaskedTextBox>

</div>

<div class="formLine">

<div class="formField33">

Phone Number:<br />

<telerik:RadMaskedTextBox ID="txtEmploymentPhoneNumber" runat="server" Mask="(###) ###-####" Columns="15" Text='<%# Bind("Phone") %>' TabIndex="4"></telerik:RadMaskedTextBox>

</div>

<div class="formField66">

Employment Begin Date:

<telerik:RadDatePicker ID="txtEmploymentStartDate" runat="server" MinDate="1/1/1900" SelectedDate='<%# Bind("BeginDate") %>' TabIndex="5"></telerik:RadDatePicker>

</div>

<div class="formLine">

<div class="formField66">

Occupation:

<telerik:RadTextBox ID="txtEmploymentOccupation" runat="server" MaxLength="255" Width="400" Text='<%# Bind("Occupation") %>' TabIndex="6">

<ClientEvents OnBlur="ForceUpperCase" />

</telerik:RadTextBox>

</div>

<telerik:RadButton ID="btnUpdate" runat="server" Text="Update" ToolTip="Update" CommandName="Update"></telerik:RadButton>

<telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" ToolTip="Cancel" CommandName="Cancel" CausesValidation="false"></telerik:RadButton>

</div>

</EditItemTemplate>

<InsertItemTemplate>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function CloseCityPopUpAndRefreshEmploymentInsert() {

var combo = $find("<%= lstViewEmployment.InsertItem.FindControl("cboEmploymentCity").ClientID %>");

combo.requestItems("", false);

}

function onEmpCityClientFocus(sender, args) {

var box = $find("<%= lstViewEmployment.InsertItem.FindControl("cboEmploymentCity").ClientID %>");

box.showDropDown();

}

</script>

</telerik:RadScriptBlock>

<div class="rlvIEdit">

<div class="formLine">

<div class="formField66">

Name of Employer:

<telerik:RadTextBox ID="txtEmployerName" runat="server" MaxLength="50" Width="400" Text='<%# Bind("Name") %>' TabIndex="1">

<ClientEvents OnBlur="ForceUpperCase" />

</telerik:RadTextBox>

</div>

<div class="formLine">

<div class="formField66">

Employment Address:

<telerik:RadTextBox ID="txtEmployerAddress" runat="server" MaxLength="50" Width="400" Text='<%# Bind("Address") %>' TabIndex="2">

<ClientEvents OnBlur="ForceUpperCase" />

</telerik:RadTextBox>

</div>

<div class="formLine">

<div class="formField33">

City, State:

<asp:LinkButton ID="lnkAddEmploymentCityInsert" runat="server" OnClick="lnkAddEmploymentCityInsert_Click">ADD CITY</asp:LinkButton>

|

<asp:LinkButton ID="lnkClearCity" runat="server" OnClick="lnkClearCity_Click">CLEAR CITY</asp:LinkButton>

<br />

<telerik:RadComboBox ID="cboEmploymentCity" runat="server" EmptyMessage="Type city ..." DataSourceID="dsCities" DataValueField="IDNumber"

DataTextField="CITY" MarkFirstMatch="true" DropDownAutoWidth="Enabled" TabIndex="3" OnItemsRequested="cboEmploymentCity_ItemsRequested" OnClientFocus="onEmpCityClientFocus">

<ItemTemplate>

<%# Eval("CITY") %>, <%# Eval("State") %>, <%# Eval("ZIPCODE1") %> <%# Eval("COUNTY") %>

</ItemTemplate>

</telerik:RadComboBox>

,

<telerik:RadTextBox ID="txtEmploymentState" runat="server" MaxLength="2" Width="45px" Enabled="false" Text='<%# Bind("State") %>'></telerik:RadTextBox>

</div>

<div class="formField33">

County:<br />

<telerik:RadTextBox ID="txtEmploymentCounty" runat="server" MaxLength="50" Enabled="false" Text='<%# Bind("County") %>'></telerik:RadTextBox>

</div>

<div class="formField33">

Zip:<br />

<telerik:RadMaskedTextBox ID="txtEmploymentZip" runat="server" Mask="#####" Enabled="false" Text='<%# Bind("ZipCode") %>'></telerik:RadMaskedTextBox>

</div>

<div class="formLine">

<div class="formField33">

Phone Number:<br />

<telerik:RadMaskedTextBox ID="txtEmploymentPhoneNumber" runat="server" Mask="(###) ###-####" Columns="15" Text='<%# Bind("Phone") %>' TabIndex="4"></telerik:RadMaskedTextBox>

</div>

<div class="formField66">

Employment Begin Date:

<telerik:RadDatePicker ID="txtEmploymentStartDate" runat="server" MinDate="1/1/1900" SelectedDate='<%# Bind("BeginDate") %>' TabIndex="5"></telerik:RadDatePicker>

</div>

<div class="formLine">

<div class="formField66">

Occupation:

<telerik:RadTextBox ID="txtEmploymentOccupation" runat="server" MaxLength="255" Width="400" Text='<%# Bind("Occupation") %>' TabIndex="6">

<ClientEvents OnBlur="ForceUpperCase" />

</telerik:RadTextBox>

</div>

<telerik:RadButton ID="btnInsert" runat="server" Text="Add Employment Record" ToolTip="Add" CommandName="PerformInsert"></telerik:RadButton>

<telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" ToolTip="Cancel" CommandName="Cancel" CausesValidation="false"></telerik:RadButton>

</div>

</InsertItemTemplate>

<EmptyDataTemplate>

<div class="RadListView RadListView_Windows7">

<div class="rlvEmpty">There are no items to be displayed.</div>

</div>

</EmptyDataTemplate>

</telerik:radlistview>

Datasource:

<asp:LinqDataSource runat="server" EntityTypeName="" ID="dsEmployments" ContextTypeName="SorDal.Sor2PendingDbDataContext"

EnableDelete="True" EnableInsert="True" EnableUpdate="True" OrderBy="Id" TableName="PendingOffenderEmployers" Where="OffenderId == @OffenderId"

OnInserting="dsEmployments_Inserting" OnUpdating="dsEmployments_Updating">

<WhereParameters>

<asp:SessionParameter SessionField="CurrentPendingOffenderId" Name="OffenderId" Type="Int32"></asp:SessionParameter>

</WhereParameters>

<InsertParameters>

<asp:SessionParameter SessionField="CurrentPendingOffenderId" Name="OffenderId" Type="Int32"></asp:SessionParameter>

</InsertParameters>

</asp:LinqDataSource>

C#:

protected void lstViewEmployment_ItemCreated(object sender, RadListViewItemEventArgs e)

{

RadComboBox cbo = e.Item.FindControl("cboEmploymentCity") as RadComboBox;

if (cbo != null)

{

cbo.AutoPostBack = true;

cbo.SelectedIndexChanged += cboEmploymentCity_SelectedIndexChanged;

}

protected void lstViewEmployment_ItemInserted(object sender, RadListViewInsertedEventArgs e)

{

btnAddEmploymentRecord.Enabled = true;

}

protected void lstViewEmployment_ItemUpdated(object sender, RadListViewUpdatedEventArgs e)

{

btnAddEmploymentRecord.Enabled = true;

}

protected void lstViewEmployment_ItemCanceling(object sender, RadListViewCommandEventArgs e)

{

btnAddEmploymentRecord.Enabled = true;

}

protected void lstViewEmployment_ItemEditing(object sender, RadListViewCommandEventArgs e)

{

btnAddEmploymentRecord.Enabled = false;

}

protected void lstViewEmployment_ItemDataBound(object sender, RadListViewItemEventArgs e)

{

if (e.Item is RadListViewEditableItem)

{

RadListViewEditableItem item = e.Item as RadListViewEditableItem;

RadComboBox cboEmploymentCity = item.FindControl("cboEmploymentCity") as RadComboBox;

PendingOffenderEmployer emp = item.DataItem as PendingOffenderEmployer;

cboEmploymentCity.Text = emp.City;

}

protected void lstViewEmployment_PageIndexChanged(object sender, RadListViewPageChangedEventArgs e)

{

DisableUtilityWindows();

}

5 Answers, 1 is accepted

answered on 30 Jan 2015, 12:21 PM

Hello Kevin,

I have to say that we have no such reports to IE 9 in particular. Can you please confirm that the problem is not replicated in other browsers as well?

Currently, the only thing that I could suggest is that you see if you are loading the resources from CDN. The CDN is enabled by default and if you are not disabling it in your web.config file, please try adding the following and see if the issue will remain:

<appSettings>

<add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />

<add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" />

I am looking forward to your reply with the result.

Regards,
Konstantin Dikov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 10 Feb 2015, 02:56 PM

Hi Kevin,

Since we are not aware of such issue related to IE 9 only, it will be impossible for us to determine what could cause this on your end.

Can you please inspect your browser's console and see if the resources are loaded correctly in IE 9. You can also test the page in IE 9 on different machine and see if the same issue is observed.

Additionally, you can open a regular support ticket and attach a sample, runnable project that replicates the issue, so we can test it locally.

Best Regards,
Konstantin Dikov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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

Skin not showing correctly - IE 9

5 Answers, 1 is accepted