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

[Solved] Styling difference in 2013.3 SP1

4 Answers 104 Views

Grid

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

Dave asked on 15 Nov 2013, 05:10 PM

Version-2013-3-1015-35.gif

Version-2013-3-1114-35.gif

I'm getting a different styling on checkboxes with 2013.3 SP1. Take a look at the attached screenshots, one from version 2013.3.1015 and the other from 2013.3.1114. These are both IE 8, Windows XP Pro. Firefox does not have this difference. In FF, the 1114 version looks the same as the 1015 version Here is a boiled down version of the ASPX page with RadGrid, single column, checkbox in header.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestCheckbox.aspx.cs" Inherits="TestCheckbox" %>

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

<title></title>

</head>

<body>

<form id="form1" runat="server">

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

<Services>

<asp:ServiceReference path="~/WS/wsIHExplorer.asmx" />

</Services>

</telerik:RadScriptManager>

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Default" ShowChooser="false" />

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />

<telerik:RadGrid ID="RadGrid1" runat="server"

AutoGenerateColumns="false"

Width="100%"

Height="100%"

BorderWidth="0px"

AllowMultiRowSelection="true"

>

<PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" />

<MasterTableView

TableLayout="Fixed"

AutoGenerateColumns="false"

PageSize="10"

AllowPaging="true"

AllowSorting="true"

AllowNaturalSort="false"

>

<Columns>

<telerik:GridTemplateColumn UniqueName="Selection" HeaderStyle-Width="60px" HeaderStyle-HorizontalAlign="Center">

<HeaderTemplate>

<asp:CheckBox ID="chkSelectionHeader" runat="server" />

</HeaderTemplate>

<ClientItemTemplate>

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

<tr>

<td align="center"><input id="chkSelection" type="checkbox" /></td>

</tr>

</table>

</ClientItemTemplate>

<ItemStyle HorizontalAlign="Center" />

</telerik:GridTemplateColumn>

</Columns>

<NoRecordsTemplate>

<div>

</div>

</NoRecordsTemplate>

</MasterTableView>

<ClientSettings>

<ClientEvents

OnCommand="function () {}"

/>

<Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

<DataBinding ShowEmptyRowsOnLoad="false" />

</ClientSettings>

</telerik:RadGrid>

</form>

</body>

</html>

4 Answers, 1 is accepted

answered on 19 Nov 2013, 05:12 PM

Hi Dave,

Thank you for contacting us.

Our developers team is aware of the arose issue with the styling of input elements within RadGrid and are working on a fix, so it could be included in our next internal build.

For the time being you could add RadFormDecorator control on the page. Thus will fix the issue with the check box in IE:

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />

Please excuse us for any inconvenience caused by this.

Regards,
Konstantin Dikov
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 20 Nov 2013, 08:13 AM

Hi Konstantin,

Thank you for the response and work around. Indeed this did the trick for the checkbox in the HeaderTemplate. However, please note in the sample aspx page that there is a ClientItemTemplate also containing an input element (checkbox). The FormDecorator has no affect on this input element. Again, the styling worked fine in 2013.3.1015, it has only become an issue in SP1. Hopefully you will be able to suggest a workaround, otherwise I have no choice but to stick with 1015 until the styling issue is resolved. If the latter turns out to be the case, do you have any idea when a fix might be available?

Meanwhile, can you suggest a workaround?

Thanks!
Dave

answered on 20 Nov 2013, 07:10 PM

Konstantin,

I found a work around. I removed the ClientItemTemplate declaration and left it blank:

<ClientItemTemplate>

</ClientItemTemplate>

In the RowDataBound client event, I added html to the cell using the same input / label and skinning that the FormDecorator uses:

var lbSelected = item.get_dataItem()["Selected"]

var lCell = item.get_cell("Selected");

var lsInnerHtml = "<table cellspacing='0' cellpadding='0' width='100%'><tr><td align='center'>";

lsInnerHtml += "<input id='chkSelection_" + lsIndex + "' type='checkbox' " + (lbSelected ? 'checked=checked' : '') + " class='rfdRealInput' />";

lsInnerHtml += "<label for='chkSelection_" + lsIndex + "' id='lblSelection_" + lsIndex + "' class='" + (lbSelected ? 'rfdCheckboxChecked' : 'rfdCheckboxUnchecked') + "'> </label>";

lsInnerHtml += "</td></tr></table>";

lCell.innerHTML = lsInnerHtml;

And finally, in the click event for the checkbox, I swapped the skin from checked to unchecked as indicated.

So, a bit messy but it works.

Is there a time frame as to when it will be fixed and I can avoid this messy workaround?

Thanks!
Dave

answered on 22 Nov 2013, 10:46 AM

Hi Dave,

Thank you for getting back to us.

I am glad that you were able to find a workaround for the other issues you have encounter.

Regarding your question about the time frame, I assure you that our developers team are doing their best to provide a fix for this bug in our next internal build, but for now I am not able to confirm if it will be introduced with it.

Please have in mind that this is a major bug and the fix will be added as soon as possible.

Once again, please excuse us for any inconvenience caused by this.

Regards,
Konstantin Dikov
Telerik