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

Styling difference in 2013.3 SP1

4 Answers 23 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 15 Nov 2013, 05:10 PM

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

Sort by
0
Konstantin Dikov
Telerik team
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.
0
Dave
Top achievements
Rank 1
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


0
Dave
Top achievements
Rank 1
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


0
Konstantin Dikov
Telerik team
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
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.
Tags
Grid
Asked by
Dave
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Dave
Top achievements
Rank 1
Share this question
or