Retaining focus on column header after sorting

[Rajeev]

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
 

[Viktor Tachev]

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

[Rajeev]

Hi,

Thank you. This approach is working for me.

Thanks
Rajeev

[Rajeev]

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

[Viktor Tachev]

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

[Rajeev]

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

[Rajeev]

Very sad part is that it is not working in IE 7. Viktor do you have any idea to fix this in IE 7.

[Viktor Tachev]

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