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

[Solved] Ugly/Broken Label Shifting when Sorting (Two-Line Heading)

12 Answers 235 Views

Grid

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

12 Answers, 1 is accepted

answered on 15 Sep 2009, 07:17 AM

Hi Levi,

RadGrid header labels are by default inline text nodes. If a sort icon must be displayed and the header label occupies two lines, the sort icon will go to the second line.

I am not sure what do you mean by "both lines of the label would shift together" - the lines don't shift at all, the sort icon is added on the right side and the column width may be increased a little. If you provide some screenshots, it will be more clear. Thanks.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 18 Sep 2009, 06:09 AM

Hello Dimo,

The labels do indeed shift. My columns will not get wider as I have them set to fixed. This behavior is different in previous versions of the DLL where both lines shifted together. Below you can see an example:

Here is how it used to work before the skins redesign. Both lines would shift together to make room for the sort symbol:

Parts ^
Sold

Now only the bottom line shifts would looks awkward:
Parts
Solid ^

Any ideas on how I can get it to work like it did in previous versions?

Thanks,
Levi

answered on 18 Sep 2009, 12:57 PM

Hello Levi,

The expected behavior of the RadGrid sort indicators has always been as the one you are seeing with the current version. Probably you have used some custom approach to position the icon, which does not work any more.

If you send us a sample web page, which demonstrates the RadGrid behavior with an old version, we will help you implement the behavior with the new version.

In the meantime, I am sending you one possible approach:

    
            <%@ Page Language="C#" %> 
        
            <%@ Import Namespace="System.Data" %> 
        
            <%@ 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"> 
        
            <script runat="server"> 
        
            protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        
            { 
        
                DataTable dt = new DataTable(); 
        
                DataRow dr; 
        
                int colsNum = 10; 
        
                int rowsNum = 5; 
        
                string colName = "Column"; 
        
                for (int j = 1; j <= colsNum; j++) 
        
                { 
        
                    dt.Columns.Add(String.Format("{0}{1} {0}{1}", colName, j)); 
        
                } 
        
                for (int i = 1; i <= rowsNum; i++) 
        
                { 
        
                    dr = dt.NewRow(); 
        
                    for (int k = 1; k <= colsNum; k++) 
        
                    { 
        
                        dr[String.Format("{0}{1} {0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); 
        
                    } 
        
                    dt.Rows.Add(dr); 
        
                } 
        
                (sender as RadGrid).DataSource = dt; 
        
            } 
        
            </script> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            <style type="text/css"> 
        
            .RadGrid .rgHeader a 
        
            { 
        
                float:left; 
        
                width:1px; 
        
            } 
        
            .RadGrid .rgHeader .rgSortAsc, 
        
            .RadGrid .rgHeader .rgSortDesc 
        
            { 
        
                float:right; 
        
            } 
        
            .RadGrid .rgHeader .rgSortAsc, 
        
            .RadGrid .rgHeader .rgSortDesc 
        
            { 
        
                margin-top:10px; 
        
            } 
        
            *+html .RadGrid .rgHeader .rgSortAsc, 
        
            *+html .RadGrid .rgHeader .rgSortDesc 
        
            { 
        
                margin-top:-5px; 
        
            } 
        
            * html .RadGrid .rgHeader .rgSortAsc, 
        
            * html .RadGrid .rgHeader .rgSortDesc 
        
            { 
        
                margin-top:-5px; 
        
            } 
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadGrid 
        
                ID="RadGrid1" 
        
                runat="server" 
        
                Skin="Office2007" 
        
                Width="900px" 
        
                AllowSorting="true" 
        
                OnNeedDataSource="RadGrid_NeedDataSource"> 
        
                <MasterTableView TableLayout="Fixed"> 
        
                     <SortExpressions> 
        
                        <telerik:GridSortExpression FieldName="Column2 Column2" /> 
        
                     </SortExpressions> 
        
                </MasterTableView> 
        
            </telerik:RadGrid> 
        
            </form> 
        
            </body> 
        
            </html>

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 18 Sep 2009, 04:28 PM

Hello Dimo,

Thanks for this, although I have my labels right aligned, so this approach wouldn't work for me. Any ideas? I got this to somewhat work, although the sort symbol does not vertically center with the label:

    
               <telerik:GridBoundColumn UniqueName="PurchaseAssists" DataFormatString="{0:#,0}" 
        
                                            SortExpression="PurchaseAssists" HeaderText="<div align='right' style='display:inline-block'>Purchase<br/>Assists</div>" DataField="PurchaseAssists" 
        
                                            ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right">  
        
                                            <HeaderStyle></HeaderStyle>  
        
                                        </telerik:GridBoundColumn>

I tried using float, but wouldn't work. Inline-block was the only way I could keep the sort symbol on the right side or prevent it from moving down to the next line. Also I don't think inline-block is fully supported by all browsers. I'd prefer to just modify the grid classes though, without messing up the columns I have left aligned. Maybe that's not possible. Your help is appreciated.

Thanks,
Levi

answered on 18 Sep 2009, 04:40 PM

Hi Levi,

The solution provided above is the best thing I can offer you by using native RadGrid CSS classes only and not modifying the header HTML.

Modifying the header HTML (your approach) is also a viable option, so feel free to use it according to your preference.

As I said, if you have had the RadGrid control behave as expected with the old version, show us how you did it and what difficulties you have implementing the same approach with the latest version.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 18 Sep 2009, 04:47 PM

The approach i listed doesn't work on IE6. The old version of Telerik didn't require me to do anything. It just worked the way it was supposed to. I don't know how you can say that this is expected behavior when it is not consisent with other grids or applications that have grids. I can't imagine anyone who would prefer the label shifting unevenly over it moving together. Use Google Analytics for example which has mostly right aligned columns. You will see the entire label shifts left when sorting, rather than the line splitting in two. I can restore the old DLL off a backup, although I'm not sure what purpose that would solve. I will see what I can find. You can replicate this easy enough. Just take any of your demos and put a carriage return in the label (or force it to wrap by making the column too small). Set the column to right aligned and then sort on it. Not every one can have single row labels, which I guess you guys assume is the case. Why not support both methods gracefully?

answered on 24 Sep 2009, 07:51 AM

headersorting.zip

Hi Levi,

Unfortunately I'm still getting the same behavior with both older and newer version of RadGrid. Can you please check the attached page and let me know if I'm missing something obvious.

Greetings,
Rosen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 25 Sep 2009, 10:15 PM

I don't see any issues with the code. It may be that it always behaved this way, or perhaps it was an older version. I'm pretty sure it did though. That being said, is there anything I can do to fix this problem? It makes my application look slighly broken, besides it being awkward looking. I can't use inline-block (which is the only thing that fixed it), because it won't work on older browsers. If you know some way I can modify the html using an event handler or perhaps a way using CSS I'd really appreciate it. I also hope you guys will implement a solution for future versions as there is no reason someone would want the label to seperate (IMHO).

Thanks,
Levi

answered on 07 Oct 2009, 05:07 PM

Here is a solution for anyone is interested.

First add the following css class:
<style type="text/css">
    .inlinebox
    {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        *display:inline;
    }
</style>

Then for your double line headings do the following for the header text:

    
            <telerik:GridBoundColumn ... ... 

            HeaderText="<span class='inlinebox'>Two</br>Lines</span>">  
        
            </telerik:GridBoundColumn>

Two caveats.. It causes single line labels to shift downward. I think it's some issue with line height, because it works perfect with multi-line labels. Also, if you're using fixed column widths, you'll want to explicitly use "<br/>" to break up the lable. Otherwise display block causes it to fill the whole width of the heading. I get around this by checking for "<br>" before wrapping the label with a span. If anyone finds a better solution, please let me know.

BTW, I tried just modifying the grid skin, but this won't work on firefox. You have to physically add a span around the label. I added an event handler to do this automatically. I loop through all the RadGrids on my page then execute the following code:

protected virtual void FixGridColumns(telerik.RadGrid grid)

{

foreach (telerik.GridColumn col in grid.MasterTableView.RenderColumns)

{

if (!col.HeaderText.Contains("</span>") && col.HeaderText.Contains("<br")) // prevent editing on follow-up requests and ensure it's a double line label

col.HeaderText =

"<span class='inlinebox'>" + col.HeaderText + "</span>";

}