Rad Grid Customize Sorting

5 posts, 0 answers
  1. Manishkumar
    Manishkumar avatar
    240 posts
    Member since:
    Feb 2009

    Posted 17 Aug 2012 Link to this post

    I  have a stack column in RadGrid (shown in below image) and I want to apply sorting on the both fields of that column. For the sorting these columns  I had applied my own logic and I could sort the columns but I am not able to apply color on column header and the ascending descending image which comes when we use default sorting of RadGrid.

    Please tell me how to apply color and image to that column while sorting and when we sort with this stack column then the column, which we had sorted previously should get the default column header style.

    Or Is there any alternative to sort the stack columns?

    Please reply ASAP.

  2. Manishkumar
    Manishkumar avatar
    240 posts
    Member since:
    Feb 2009

    Posted 22 Aug 2012 Link to this post

    Hi;
    Can anyone reply to this ASAP as we have production roll out this week.
  3. Galin
    Admin
    Galin avatar
    526 posts

    Posted 22 Aug 2012 Link to this post

    Hi Manishkumar,

    You can change the background of the sorted header and the inner icon with the following CSS

    div.RadGrid th.rgSorted
    {
         background: red;
    }
     
    div.RadGrid .rgHeader .rgSortAsc
    {
         background: url("images/imageSortAsc.gif") red;
    }
     
    div.RadGrid .rgHeader .rgSortDesc
    {
         background: url("images/imageSortDesc.gif") green;
    }


    I hope this helps.

    Regards,
    Galin
    the Telerik team
    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 their blog feed now.
  4. Manishkumar
    Manishkumar avatar
    240 posts
    Member since:
    Feb 2009

    Posted 27 Aug 2012 Link to this post

    I was tring to change the background color of a header and I wrote below code on item data bound 

     

    if (e.Item.ItemType == GridItemType.Header )
    {  

    e.Item.Cells[13].BackColor = System.Drawing.Color.Yellow;
    }

    but it is applying color in half cell only(please find the image attached below for the same)

    And I want to apply default color to others column header. So is there any property which can apply default style to header.

    Please reply ASAP as we have production roll out this week.

  5. Galin
    Admin
    Galin avatar
    526 posts

    Posted 30 Aug 2012 Link to this post

    Hi Manishkumar,

    You should change the entire background, not only its background-color, e.g.

    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item.ItemType == GridItemType.Header)
        {
            e.Item.Cells[13].Style.Add("Background", "yellow");
        }
    }


    Also, you can achieve this with the CssClass
    e.Item.Cells[13].CssClass = "customHeaderCell";

    and CSS
    div.RadGrid th.rgSorted
    {
         background: yellow;
    }

    I hope this helps.

    Regards,
    Galin
    the Telerik team
    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 their blog feed now.
Back to Top