Remove RadGrid from Tab order

[abhilash]

I want to remove Radgrid from the taborder. I have set TabIndex="-1"  to remove from taborder but it is not working. Any help will be appreciated.

<Common:RadGrid ID="HistoryGrid" GridLines="Both" AllowMultiRowSelection="False"
                                    EnableAJAX="True" ShowStatusBar="True" PageSize="25" AllowPaging="True" AllowSorting="True"
                                    runat="server" Skin="Green" EnableEmbeddedSkins="false" OnNeedDataSource="HistoryGrid_NeedDataSource"
                                    OnItemDataBound="HistoryGrid_ItemDataBound" Width="99%" TabIndex="-1">
                                    <ClientSettings AllowKeyboardNavigation="True" AllowColumnsReorder="True" ReorderColumnsOnClient="True">
                                        <Resizing AllowColumnResize="True" AllowRowResize="False" />
                                        <Selecting AllowRowSelect="False" />
                                        <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="false" />
                                        <ClientEvents OnActiveRowChanged="ActiveRowChanged" OnRowSelected="RowSelected" OnKeyPress="GridKeyPressed" />
                                    </ClientSettings>

[Tsvetoslav]

Hi abhilash,

 You need to attach a client event handler for the grid's focus event:

<telerik:RadGrid ... onfocus="focusIt(this)" ...>
    .
    .
    .
    .
</telerik:RadGrid

And define the handler as follows:

<script type="text/javascript">
    function focusIt(sender)
    {
        sender.blur();
    }
</script>

I hope this helps.

Regards,
Tsvetoslav
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.

[abhilash]

Thanks its working.  This is how I added.

 

<Common:RadGrid ID="HistoryGrid" GridLines="Both" AllowMultiRowSelection="False"

 

 

EnableAJAX="True" ShowStatusBar="True" PageSize="25" AllowPaging="True" AllowSorting="True"

 

 

runat="server" Skin="Green" EnableEmbeddedSkins="false" OnNeedDataSource="HistoryGrid_NeedDataSource"

 

 

OnItemDataBound="HistoryGrid_ItemDataBound" Width="99%" TabIndex="-1" OnFocus="focusIt(this)" >

 

[Clayton Kelemen]

Hi there,

We have a similar issue. However, adding the logic below does not work for us. It appears that once the RadGrid receives focus the sender.blur() call in the JS is sending the focus to the top of the page (must be the first control that can receive a tab)...not to the next control.

I'm not sure if it is related, but in the ASCX page, after adding the onfocus="focusIt()" property to the RadGrid, the onfocus is underlined and the hover message says "Attribute 'onfocus' is not a vadid element of RadGrid"

Does this have something to do with the verison of the Telerik WebControls we are using? We are currently using 2008.2.1001.20. We have plans to upgrade but not in the near future.

Thanks,
CK

[Tsvetoslav]

Hi Clayton,

Attached is a small sample.

Regards,
Tsvetoslav
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.

[Clayton Kelemen]

Thanks for your suggestion.

We tried that on our grid but we were getting the error "nextSibling is NULL or is not an object".

We modified the javascript method to:

    <Telerik:RadScriptBlock ID="ScriptBlock1" runat="server">
        <script type="text/javascript" language="javascript">
            function skipFocusOnGrid ( sender )
            {
                if ( sender.nextSibling == null )
                {
                    alert ('Next Sibling is NULL');
                }
                else
                {
                    sender.nextSibling.focus();
                }
            }
        </script>
    </Telerik:RadScriptBlock>

When our grid receives focus, we get the JS alert prompt that indicates that the nextSibling is NULL.

Any other suggestions?

Thanks,
CK

[Tsvetoslav]

Hi Clayton,

The purpose of my sample was to give you a guideline - in your particular case you need to find through dom operations the next control after the grid and that depends on the structure of your control tree.

If this suggestion does not help, is it possible that you paste your whole mark-up and code-behind.

Regards,
Tsvetoslav
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.

[Clayton Kelemen]

We found a solution to our problem.

In the Code Behind of our user control we added a reference to a dynamic JS method using the ClientId of our user control. We used a dynamic JS method because our control can be used multiple times on the same page so without the dynamic JS method name the multiple controls can get confused.

        /// <summary>
        /// Handles the PreRender event of the Page control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
        protected void Page_PreRender(object sender, EventArgs e)
        {
            // add JS event handler for the OnGridCreated event of the RadGrid
            //     - the JS method will remove the tabindex on the grid control so when tabbing there is no tab stop on the grid
            this.grdResults.ClientSettings.ClientEvents.OnGridCreated = this.grdResults.ClientID + "_OnGridCreated";
        }

In the front of our control we added the JS method:

<script type="text/javascript" language="javascript">

//
// FUNCTION: [RadGrid.ClientID]_OnGridCreated
// DESCRIPTION: this function is called by the RadGrids OnGridCreated() JS event
//     - this function will set the TabIndex of the RadGrid to -1 so that the focus
//         does not go to the table (DIV) that surrounds the grid when tabbing through the page
//     - the handler for this method is configured oin the Page_PreRender() event in the code-behind
//
function <%= this.grdResults.ClientID %>_OnGridCreated()
{
    //alert('GridCreated: <%= this.grdResults.ClientID %>');
    document.getElementById("<%= this.grdResults.ClientID %>").tabIndex = -1;
}


</script>

Hope this helps someone...

Thanks,
CK

[Caesar]

Hi,

Well this almost works...
We are having a problem in WebKit browsers where the entire radgrid scrolls into view since it receives focus.
It is a very special case when this happens so it is hard to explain the exact case.
We had the same problem in Opera and the following helped for Opera (tabIndex=-1 didn't help):
document.getElementById("<%= this.grdResults.ClientID %>").removeAttribute('tabindex');

The major problem in webkit is that it is impossible??? to remove tabindex once it is set, see the following:
http://stackoverflow.com/questions/2735697/make-focusable-element-unfocusable-on-webkit

The main problem (since tabindex can't be removed in webkit) is that telerik sets tabindex on the main element when creating the client component.
The following line of code runs in telerik grid when created:
this.get_element().tabIndex = 0;

What is the reason for this line of code?
I vote for removing that line of code and use the TabIndex property on the RadGrid to set tabindex correctly instead (no tabindex if no property set)!

Regards
Caesar

[Tsvetoslav]

Hello Rikard,

This line of code has its meaning in terms of the grid's keyboard navigation feature and the focusing of the grid's div element - we are in no position to change it since it is by design and furthermore might lead to breaking changes in other customers' applications. In order to remove the grid from the tab order, just set its index to -1 for webkit browsers, remove it for the Opera one and set the index of the <input>, <img>, <span> and  <a> elements within the grid to -1 through dom operations. You can find more information on how to traverse those dom elements in the following help topic:
http://www.telerik.com/help/aspnet-ajax/grdenabledconventions.html

Hope this information will help.

Greetings,
Tsvetoslav
the Telerik team

[Caesar]

Hi,

Does it still have a meaning if setting ClientSettings.AllowKeyboardNavigation = False???

In WebKit browsers, the grid will still receive focus on click after setting tab order to -1 in javascript.
As I said before, once tab index is set in WebKit browser, you can't remove it, see:
http://stackoverflow.com/questions/2735697/make-focusable-element-unfocusable-on-webkit

Regards
Caesar

[Veli]

Actually, the tabIndex of RadGrid's topmost container is always set to 0. It is a design decision dictated by differences in how browsers handle the tabbing navigation inside the grid. There is no option to turn it off, except for removing the DOM element's tabIndex property, where possible.

Veli
the Telerik team

[Stacy]

This is the grid that is in the "org control"...

<wasp:WLPGrid 

      

    ID="OrganizationUnitGrid" 

    runat="server"

    AutoGenerateColumns="False"

    AlternatingItemStyle-BackColor="Transparent"

    ItemStyle-BackColor="Transparent"

    ShowHeader="false" 

    AllowMultiRowEdit="True"

    BorderStyle="none"

>

I have a control (organization control) embedded within a control.  The organization control is seen in the attached jpg.  When I am tabbing thru the main control, once it gets to the organization control, it highlights the grid (outlining it) then tabs to the dropdowns.  Is there any way I can avoid this behavior and tab from input to input without having the grid highlighted?

[Tsvetoslav]

Hello Stacy,

I am sending you a small sample where the grid is jumped over in the tab order and the focus is received by the first filtering box. By analogy, you can implement the same for the drop-downs in your control.

Hope it helps.

Regards,
Tsvetoslav
the Telerik team

[Stacy]

Still haven't gotten this to work.  I have an ascx that includes this grid as a child.

For the org grid I have this:

<grid....
    ID="OrganizationUnitGrid"
    ...etc...
    onfocus="onfocus1()"
>

    <MasterTableView DataKeyNames="Key, OrganizationUnitHierarchyId" AllowFilteringByColumn="true">
        <Columns>
            <...GridTemplateControl UniqueName="TemplateOrganizationUnitLevelId">
                <ItemTemplate >
                   <...ComboBox...
                        ID="OrganizationUnitLevelId"
                        AutoPostback="True"

<telerik:RadScriptBlock ID="ScriptBlock1" runat="server">
       <script type="text/javascript">
           function onfocus1(id) {
               $get(id).focus();
           }
       </script>
   </telerik:RadScriptBlock>

and in my .cs file...

protected void Page_Init(object sender, EventArgs e)
 {
    OrganizationUnitGrid.ItemCreated += new GridItemEventHandler(OrganizationUnitGrid_ItemCreated);
}

protected void OrganizationUnitGrid_ItemCreated(object sender, GridItemEventArgs e)
 {
     if (e.Item is GridFilteringItem)
            {
                GridFilteringItem item = e.Item as GridFilteringItem;
                OrganizationUnitGrid.Attributes.Add("onfocus", String.Format("onfocus1('{0}')", item["TemplateOrganizationUnitLevelId"].Controls[0].ClientID));
            }
        }

However the grid is still outlined when tabbing...and if i put anything besides item["TemplateOrganizationUnitLevelId"] then it tells me it "cannot find cell bound to column x"

[Tsvetoslav]

Hi abhilash,

Please, open up a formal support ticket and send a runnable sample - I will do my best to implement the solution into it. Thanks in advance.  

Regards,
Tsvetoslav
the Telerik team

[Stacy]

"I am sending you a small sample where the grid is jumped over in the tab order and the focus is received by the first filtering box. By analogy, you can implement the same for the drop-downs in your control."

This is not the same case.  First create a control with a grid in it.  THEN use it inside another control.  Then try to skip the grid in the tab order.  That is my issue.  There is a jpg attached in this thread showing the "included" control being highlighted.

[Stacy]

Clayton Kelemen

Posted on Jun 4, 2010

I tried your code in your post from June 4, 2010 but the document.get returns null when I am in edit mode but has a value on load.  Is this normal?

[Stacy]

i fixed my issue using the code above from "Clayton" but since document.getElementById didn't work when in edit mode, I had to set ClientIDMode="Static" in my grid declaration in order to get it to work.  Not what I wanted but i'll take it.