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

2010 Q1 Command row height and skin

21 Answers 227 Views

Grid

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

21 Answers, 1 is accepted

answered on 16 Mar 2010, 10:51 AM

Hi Dimo,

I've tried a couple of things and had no luck. I tried removing my stylesheet from the doc so the only styles were ones from the grid. I also tried explicitly setting the EnableEmbeddedBaseStyleSheet to true but nothing. Normally that settings doesn't get set.

Attached is an image comparing old vs new - new is on top and in the screenshot you can see the following differences:

The colour is washed out,
The height is all off by a few px (possibly a padding difference)
There now appears to be a border at the top
The scroll column in the list (rightmost) is too high by one px.

It's almost as if a different skin is in use but given the similarity of the rest of the grid I know that isn't the case.

Regards,

Jon

answered on 23 Mar 2010, 11:32 AM

Hello Jon,

We have decreased the contrast of the command item row background for some skins, so that it does not stand out so much. If you prefer the darker background, you can create a custom background image from a screenshot and use it as a background for the rgCommandRow CSS class - in other words, you can override the RadGrid skin.

div.RadGrid_Web20 .rgCommandRow
{
background: ..... ;
}

However, it is still not clear why the height is smaller than expected in your case. Have you tried placing a RadGrid on a standalone page - is the problem exhibited there? (it should not be). Can you please send a simple demo, which reproduces the issue?

Sincerely yours,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 23 Mar 2010, 02:56 PM

Hi Dimo,

While the Telerik controls are great the changes to the skins do get somewhat fustrating especially seeing as there wasn't any mention of this change. Also when I looked at a Web20 grid on the 2010 version of the demo site all of the grids seemed to have the 2009 version of the background - hence my confusion on this.

I've just tried creating a new website with one file, with teh following code I end up getting the behaviour already shown - bear in mind that this is vanilla stuff, no stylesheets in the background or anything.

Run this as a 2009 then a 2010 grid and fingers crossed you'll see what I get.

    
                    <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" Skin="Web20">  
        
            <HeaderContextMenu EnableAutoScroll="True"></HeaderContextMenu> 
        
            <MasterTableView CommandItemDisplay="Top" > 
        
            <RowIndicatorColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </RowIndicatorColumn> 
        
            <ExpandCollapseColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </ExpandCollapseColumn> 
        
                                <CommandItemTemplate> 
        
                                    command item temnplate  
        
                                </CommandItemTemplate> 
        
            </MasterTableView> 
        
                    </telerik:RadGrid>

Regards,

Jon

answered on 23 Mar 2010, 05:28 PM

Hello Jon,

Well, I didn't occur to me that you are using a CommandItemTemplate. In this case the observed layout is expected. Please set some height to the command item:

<CommandItemStyle Height="30px" />

or use:

<CommandItemTemplate>
<table class="rgCommandTable" style="width:100%"><tr><td class="rgCommandCell">aaaa</td></tr></table>
</CommandItemTemplate>

Sincerely yours,
Dimo
the Telerik team

answered on 24 Mar 2010, 09:10 AM

Hello Jon,

The glitch that you are talking about can occur if the header row is expanded for some reason (depending on its content and possibly some custom styling).

The image at the top right RadGrid corner is a background image applied to a <div> with a rgHeaderDiv CSS class. You should either change the image with a custom one to match the header height, or reduce the header to its normal height.

Regards,
Dimo
the Telerik team

answered on 29 Mar 2010, 01:02 PM

Hi Dimo,

I've got the CSS sorted out for the header but the issue with the right hand glitch is still present. If you use the code below you should be able to get the glitch.

It seems to be because I have the client scroll height set but don't have the columns going to the full width of the table. When I allow one column to expand to the full width BUT have the right hand scroll bar I still see the effect above the scrollbar. As you'll see in this example (make sure your dataset goes off the page).

It seems as though the header row of the scrollbar column is 1px to short.

Is there a simple CSS fix for it?

Regards,

Jon

    
            <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" GridLines="None" Width="789px" > 
        
                <HeaderContextMenu EnableAutoScroll="True"></HeaderContextMenu> 
        
                <MasterTableView DataKeyNames="MenuItemID" DataSourceID="SqlDataSource1">  
        
                    <RowIndicatorColumn> 
        
                        <HeaderStyle Width="20px"></HeaderStyle> 
        
                    </RowIndicatorColumn> 
        
                    <ExpandCollapseColumn> 
        
                        <HeaderStyle Width="20px"></HeaderStyle> 
        
                    </ExpandCollapseColumn> 
        
                    <Columns> 
        
                        <telerik:GridBoundColumn DataField="MenuItemID" DataType="System.Int16" HeaderText="MenuItemID" ReadOnly="True" SortExpression="MenuItemID" UniqueName="MenuItemID">  
        
                            <HeaderStyle Width="50px" /> 
        
                            <ItemStyle Width="50px" /> 
        
                        </telerik:GridBoundColumn> 
        
                        <telerik:GridBoundColumn DataField="Text" HeaderText="Text" SortExpression="Text" UniqueName="Text">  
        
                            <HeaderStyle Width="50px" /> 
        
                            <ItemStyle Width="50px" /> 
        
                        </telerik:GridBoundColumn> 
        
                    </Columns> 
        
                </MasterTableView> 
        
                <ClientSettings > 
        
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="347"></Scrolling> 
        
                </ClientSettings> 
        
            </telerik:RadGrid>

answered on 29 Mar 2010, 02:19 PM

290312-grid.gif

Hi Jon,

This is what I am seeing... Am I missing something?

By the way, ItemStyle-Width should never be used.

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

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

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" DataSourceID="XmlDataSource1" GridLines="None" Width="789px" >

<HeaderContextMenu EnableAutoScroll="True"></HeaderContextMenu>

<MasterTableView DataKeyNames="MenuItemID">

<RowIndicatorColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="MenuItemID" DataType="System.Int16" HeaderText="MenuItemID" ReadOnly="True" SortExpression="MenuItemID" UniqueName="MenuItemID">

<HeaderStyle Width="50px" />

<ItemStyle Width="50px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Text" HeaderText="Text" SortExpression="Text" UniqueName="Text">

<HeaderStyle Width="50px" />

<ItemStyle Width="50px" />

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings >

<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="347"></Scrolling>

</ClientSettings>

</telerik:RadGrid>

<asp:XmlDataSource ID="XmlDataSource1" runat="server">

<Data>

<nodes>

<node MenuItemID="1" Text="text 1" />

<node MenuItemID="2" Text="text 2" />

<node MenuItemID="3" Text="text 3" />

<node MenuItemID="4" Text="text 4" />

<node MenuItemID="5" Text="text 5" />

<node MenuItemID="6" Text="text 6" />

<node MenuItemID="1" Text="text 1" />

<node MenuItemID="2" Text="text 2" />

<node MenuItemID="3" Text="text 3" />

<node MenuItemID="4" Text="text 4" />

<node MenuItemID="5" Text="text 5" />

<node MenuItemID="6" Text="text 6" />

<node MenuItemID="1" Text="text 1" />

<node MenuItemID="2" Text="text 2" />

<node MenuItemID="3" Text="text 3" />

<node MenuItemID="4" Text="text 4" />

<node MenuItemID="5" Text="text 5" />

<node MenuItemID="6" Text="text 6" />

</nodes>

</Data>

</asp:XmlDataSource>

</form>

</body>

</html>

Best wishes,
Dimo
the Telerik team

answered on 29 Mar 2010, 09:05 PM

Hi Dimo,

Not so sure about the skin not mattering. Web20, WebBlue and Sunset all have this problem. Simple, Sitefinity and Windows7 don't do the same thing but instead of the less height they don't have the line that is at the bottom of the header (but that could be by design). The rest of the skins all seem to work properly...

The browser that I am on is IE7 (7.06001.18000) (fully patched). Using the initial release of the 2010 Q1 software.

I've tried it in Firefox but on this test the columns don't have the right width (they go 50%).

Does IE7 have the compat/quirks mode?

Regards,

Jon

answered on 30 Mar 2010, 09:20 AM

Hi Jon,

Sorry, there has been misunderstanding on my part. We will fix the backgruond misalignment for Q1 2010 SP1 (due in mid April). I have updated your Telerik points.

The Firefox layout is expected. Actually, IE6 and IE7 are the only browsers, which do not expand the columns to the full RadGrid width. In other browsers you must specify width to the MasterTableView, if you want it to be less than the RadGrid width.

Best wishes,
Dimo
the Telerik team

answered on 30 Mar 2010, 11:04 AM

Hi Dimo,

Many thanks for that - I'm pleased that I hadn't missed a trick on that - normally I've done something silly.

On the subject of the width are you saying that if I have two columns a and b that are both assigned widths of 50px then I have to set the MasterTableView width to 100px ?

Could I submit a feature request for a flag in the RadGrid to override the current behaviour and respect the widths?

Also is there a document available for each release that provides information about all of these areas where there is a defined browser difference? Obviously some things (hopefully most!) will be 100% the same across browsers but it would be nice to have a single reference that we can go to to see all known places that we may need to work on fixing issues?

I'm just looking forward to when I have time to work on Silverlight and move away from the browser differences ;)

Best Regards,

Jon

answered on 30 Mar 2010, 01:47 PM

Hello Jon,

We will consider implementing this behavior, depending on customer feedback - so far there have been very little requests for it.

I am afraid there is no document describing browser inconsistencies, as their number is not large and most of them are insignificant. The most important difference with regard to RadGrid is that IE6 and IE7 apply larger column widths, because they add the cell paddings to the resultant column widths. For example, if you set column width of 50px, it will be 64px wide in IE6 and IE7 (+ 7px left and 7px right padding).

Regards,
Dimo
the Telerik team