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

Frozen column not functional when traversing the grid using Tab Button

10 Answers 189 Views

Grid

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

10 Answers, 1 is accepted

answered on 11 Sep 2009, 02:40 PM

Hi Ibrahim,

The implementation of the frozen columns feature is quite complex and one limitation is that the tabbing problem cannot be prevented, unless you catch the KeyDown events inside the RadGrid control and cancel all Tab key presses. Sorry for the inconvenience.

ASPX

<telerik:RadGrid onkeydown="mykeydown(event)" />

Javascript

function mykeydown(e)
{
if (e.keyCode && e.keyCode == 9)
return false;
}

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 07 Aug 2013, 07:26 AM

Hello Charles,

You can fix this problem by using the following work around.

1. Add the Javascript event to each control on RadGrid in edit mode on radgrid ItemDataBound event
    e.g. TextBox txt = (e.Item as GridDataItem)["ColumnName"].Controls[0] as TextBox;
                if (txt != null)
                {
                    txt.Attributes.Add("onKeyDown", "return tabKeypress(event);");
                }
2. Write a Javascript Function to move the scrollbar
   e.g.          function tabKeypress(e) {
               if (e.keyCode == 9) { //KeyCode 9 is for tab
                   $("#rad_Frozen").scrollLeft($("#rad_Frozen").scrollLeft()+20);
                  }
            }
   // in above code value 20 is dependent on the average size of each column so that you can move the scroll
// if you want to move to the left then just minus the amount - 20
   // rad_Frozen is outer div created by rad grid for frozen column

This may solve your issue.

Regards/-
Sumit Jambhale
SYONSOFT

answered on 07 Nov 2014, 04:24 AM

Hi Sumit,

I am using GridTemplateColumn into grid using tabKeypress event.

<telerik:GridTemplateColumn DataField="interface_pty_num" SortExpression="interface_pty_num"
                                    UniqueName="InterfacePtyNum" HeaderStyle-VerticalAlign="Top" HeaderText="Interface Pty Num"
                                    HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Bold="true" HeaderStyle-Wrap="true"
                                    HeaderStyle-Width="125px">
                                    <ItemTemplate>
                                        <asp:Label ID="lblRepLocInterfacePtyNum" runat="server" Text='<%# Eval("interface_pty_num") %>'
                                            SkinID="No Bold"></asp:Label>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <telerik:RadTextBox ID="rtbRepLocInterfacePtyNum" runat="server" Text='<%# Bind("interface_pty_num") %>' onKeyDown="return tabKeypress(event);"
                                            MaxLength="40" Width="90%">
                                        </telerik:RadTextBox>
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>

In JavaScript

function tabKeypress(e) {
                if (e.keyCode == 9) { //KeyCode 9 is for tab
                    $("#rad_Frozen").scrollLeft(500 + 20);
            }

But $("#rad_Frozen").scrollLeft is not working. i need to implement this functionality. please help ASAP.

Thanks in Advance,
Dhamu