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

2010 Q1 Command row height and skin

21 Answers 185 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 15 Mar 2010, 03:00 PM
Hi,

Has the default height for the command row changed?  All of a sudden (Web20 skin) the height of the command row has been reduced by about 10-15 px (haven't measured yet).  In addition the colours seem to be washed out on what I can see of it.

Re the height issue does this mean that all grids now need to have a height set manually?

Pager buttons look better though.

Regards

Jon

21 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 15 Mar 2010, 05:02 PM
Hi Jon,

The default height of the command row has not changed. Can you compare your RadGrid instance with the ones at this online demo?

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/commanditem/defaultcs.aspx

(please select Web20 from the skin chooser at top-right)

If you need further assistance, please send us a simple demo.

All the best,
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.
0
Jon
Top achievements
Rank 1
answered on 15 Mar 2010, 05:30 PM
Hi Dimo,

I think that my one is narrower.  Mine looks like there is no padding so in the morning I'll look at the style sheets to see if there is a rule in there that could somehow be working differently now,  Strange that the background on mine looks more washed out too. 

Regards,

Jon
0
Dimo
Telerik team
answered on 16 Mar 2010, 10:04 AM
Hi Jon,

Please also check whether you have set EnableEmbeddedBaseStyleSheet="false" for the RadGrid. It should be set to "true", unless you explicitly want to remove the base CSS.

Kind regards,
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.
0
Jon
Top achievements
Rank 1
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:
  1. The colour is washed out,
  2. The height is all off by a few px (possibly a padding difference)
  3. There now appears to be a border at the top
  4. 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
0
Iana Tsolova
Telerik team
answered on 18 Mar 2010, 03:25 PM
Hi Jon,

Could you try re-attaching the screenshot? It also be of help if you can send the the whole problematic page code.

Greetings,
Iana
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.
0
Jon
Top achievements
Rank 1
answered on 18 Mar 2010, 06:26 PM
Here you go.

It seemed to be any grid I did.  I'll have a go at a generic grid in the morning...

Regards,

Jon
0
Dimo
Telerik team
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.
0
Jon
Top achievements
Rank 1
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
0
Dimo
Telerik team
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

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.
0
Jon
Top achievements
Rank 1
answered on 23 Mar 2010, 08:57 PM

Hi Dimo,

Sorry I should have said that earlier - I forgot that there was another way to do the command item stuff ;)

Thanks for that - I take it that the default height changed in this version? 

 

The annoying thing was that I originally used the height setting but removed it several months back when I realised that the default height was what I needed...  Serves me right for being cocky I suppose!

 

In the image did you see the glitch on the right of the command template?  I'll let you know if it's still present after I work out what height etc I need to use.

 

Thanks again,

 

Jon

0
Dimo
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

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.
0
Jon
Top achievements
Rank 1
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> 
0
Dimo
Telerik team
answered on 29 Mar 2010, 02:19 PM
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"
 
<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

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.
0
Jon
Top achievements
Rank 1
answered on 29 Mar 2010, 03:10 PM
Sorry Dimo, needs to have Skin="Web20" in it...  I set mine with a skin file so normally forget to include in examples.

I've just tried copying your code into a new web app and then setting it to Web20.  Still get the problem so think there is a problem with the Web20 CSS.

Let me know if you still can't do it and I'll give you the solution file and a screen shot.

Regards,

Jon
0
Dimo
Telerik team
answered on 29 Mar 2010, 06:04 PM
Hi Jon,

The skin name doesn't matter in this case, the problem must be caused by something else. Can you specify the browser and its version, the RadControls version and whether you are running the page in quirks mode or standards mode?

Greetings,
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.
0
Jon
Top achievements
Rank 1
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
0
Dimo
Telerik team
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

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.
0
Jon
Top achievements
Rank 1
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
0
Dimo
Telerik team
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

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.
0
Jon
Top achievements
Rank 1
answered on 31 Mar 2010, 12:29 PM
Hi Dimo,

OK no problem.

I think that a document detailing the small number of differences would be generally found useful.  If there are only a small number of differences then it would be an easy doc to write and maintain.  I'm sure that many people like myself would find it useful as it would help greatly when testing an application as we can then easily tell when a difference is down to the controls and when it is an issue with our own code.

I'm sure that it would also help reduce forum posts as then people can refer to that in the first instance before posting a comment.

Regards,

Jon
0
Dimo
Telerik team
answered on 01 Apr 2010, 11:56 AM
Hi Jon,

I agree, we will consider documenting such browser inconsistencies.

All the best,
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.
Tags
Grid
Asked by
Jon
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jon
Top achievements
Rank 1
Iana Tsolova
Telerik team
Share this question
or