Retaining focus on column header after sorting

8 posts, 2 answers
  1. Rajeev
    Rajeev avatar
    48 posts
    Member since:
    Feb 2008

    Posted 20 Nov 2013 Link to this post

    Hi,

    Anyone have any idea to retain the focus on the column header itself after sorting the column by pressing enter key in the column header.

    1. Tab to grid and select one column by pressing tab key itself.
    2. Press enter will sort the column
    3. After the sort done, focus has to retain on the sorted column.

    any help is appreciated.

    Thanks
    Rajeev
     
  2. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    2491 posts

    Posted 25 Nov 2013 Link to this post

    Hello Rajeev,

    You could use JQuery to check if RadGrid has sorted columns and focus the header element for the sorted column. When a column is sorted it has the rgSorted Css class.

    function pageLoad() {
        if ($telerik.$(".rgSorted")[0]) {
            $telerik.$(".rgSorted")[0].firstChild.focus();
        }
    }

    Let me know if this approach is working for you.

    Regards,
    Viktor Tachev
    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.
  3. Rajeev
    Rajeev avatar
    48 posts
    Member since:
    Feb 2008

    Posted 05 Dec 2013 Link to this post

    Hi,

    Thank you. This approach is working for me.

    Thanks
    Rajeev
  4. Rajeev
    Rajeev avatar
    48 posts
    Member since:
    Feb 2008

    Posted 06 Dec 2013 Link to this post

    Hi,

    You approach worked fine when we have only one sorted column. But do you have any idea to set the focus if we have more that one sorted columns. like primary and seconday sort, that time 2 columns will come with rgsorted class.

    Thanks
    Rajeev
  5. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    2491 posts

    Posted 09 Dec 2013 Link to this post

    Hi Rajeev,

    When sorting multiple columns you could extend the logic a bit and add custom Css class that indicates which column was last sorted. This could be implemented in the RadGrid's SortCommand event handler.

    protected void RadGrid1_SortCommand(object sender, GridSortCommandEventArgs e)
    {
        foreach (GridColumn column in (sender as RadGrid).MasterTableView.Columns)
        {
            if (column.HeaderStyle.CssClass.Contains("lastSorted"))
            {
                column.HeaderStyle.CssClass = column.HeaderStyle.CssClass.Replace("lastSorted", "");
            }
        }
     
        GridColumn sortedColumn = (sender as RadGrid).MasterTableView.GetColumn(e.CommandArgument.ToString());
     
        if (e.NewSortOrder == GridSortOrder.None)
        {
            sortedColumn.HeaderStyle.CssClass = "";
        }
        else
        {
            sortedColumn.HeaderStyle.CssClass = "lastSorted rgSorted";
        }
    }

    The JavaScript pageLoad() function should also be modified a little:

    function pageLoad() {
        if ($telerik.$(".lastSorted")[0]) {
            $telerik.$(".lastSorted")[0].firstChild.focus();
        } else if ($telerik.$(".rgSorted")[0]) {
            $telerik.$(".rgSorted")[0].firstChild.focus();
        }
    }

    By using the same approach more Css classes could be added to indicate previously sorted columns.

    Regards,
    Viktor Tachev
    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.
  6. Rajeev
    Rajeev avatar
    48 posts
    Member since:
    Feb 2008

    Posted 18 Dec 2013 Link to this post

    Great. Thanks,

    I tried it in a different way, passing the current sorted column header text from the grid sort command and with jquery loops i am comparing the column text in client side. i am looping through the rgsorted cells using your scripts. it's working fine now.

    Thanks
    Raj
  7. Rajeev
    Rajeev avatar
    48 posts
    Member since:
    Feb 2008

    Posted 20 Jan 2014 Link to this post

    Very sad part is that it is not working in IE 7. Viktor do you have any idea to fix this in IE 7.
  8. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2491 posts

    Posted 23 Jan 2014 Link to this post

    Hello Raj,

    The suggested approach seems to be working as expected with this browser on my end. Would you elaborate more on what issue you are observing in IE 7? Could you also share your markup so we could have better understanding of your scenario?

    Regards,
    Viktor Tachev
    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.
Back to Top