How To set tab index of telerik rad grid in edit mode

10 posts, 1 answers
  1. Sunny
    Sunny avatar
    26 posts
    Member since:
    Feb 2013

    Posted 29 Aug 2013 Link to this post


    Hello Team,

                              Currently i am using  Telerik rad grid in my project and i am facing some problem during edit time and problem is that i want to give tab indexing to my text boxes so that tab indexing should be from left to right and vice versa and currently first it is working only for left side and after that right side as i have attached screen shot that's my need so please revert me soon i am waiting of your reply...


    Thanks & Regards,
    Sunny
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 29 Aug 2013 Link to this post

    Hello,

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
       {
           dynamic data1 = new[] {
                 new { ID = 1, Name ="Name_1"},
                 new { ID = 2, Name = "Name_2"},
                 new { ID = 3, Name = "Name_1"},
                 new { ID = 4, Name = "Name_4"},
                 new { ID = 5, Name = "Name_1"}
             };
           RadGrid1.DataSource = data1;
       }
     
     
     
     
     
       protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
       {
           if (e.Item.IsInEditMode && e.Item is GridEditableItem)
           {
               GridEditableItem item = e.Item as GridEditableItem;
               TextBox txtID = item["ID"].Controls[0] as TextBox;
               TextBox txtName = item["Name"].Controls[0] as TextBox;
               LinkButton updateButton = (LinkButton)item.FindControl("UpdateButton");
               LinkButton CancelUpdateButton = (LinkButton)item.FindControl("CancelButton");
               //PerformInsertButton : for insert button in Insert mode
     
               txtName.Focus();
               txtName.TabIndex = 10;
               txtID.TabIndex = 11;
               updateButton.TabIndex = 12;
               CancelUpdateButton.TabIndex = 13;
     
           }
       }
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
        OnItemDataBound="RadGrid1_ItemDataBound">
        <MasterTableView>
            <Columns>
                <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
                </telerik:GridBoundColumn>
                <telerik:GridEditCommandColumn>
                </telerik:GridEditCommandColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>


    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Malkiat
    Malkiat avatar
    6 posts
    Member since:
    Jul 2013

    Posted 29 Aug 2013 Link to this post

    Thanks   (Jayesh Goyani) its working
  5. Narsareddy
    Narsareddy avatar
    5 posts
    Member since:
    Jul 2013

    Posted 04 Sep 2013 Link to this post

    Hi jayesh,

    Currently i am using telerik rad grid view.
    How to set tab index of telerik rad grid in records but i am facing some problems not added tab index rad grid view items only
    hyperlink is working.
    as i have attached screen shot that's my need so please revert me soon i am waiting of your reply...
  6. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 04 Sep 2013 Link to this post

    Hello,

    We are generally use tabindex in Button,hyperlink,TextBox,RadioButton,ChakckBox..etc. Because this type of controls is want any type of action from user.

    You want to Tabindex in span tag/text in your page. 

    Let me know still you want this type of functionality.

    Note :-  Let me know if i am not understand your question.

    Thanks,
    Jayesh Goyani
  7. Narsareddy
    Narsareddy avatar
    5 posts
    Member since:
    Jul 2013

    Posted 04 Sep 2013 Link to this post



    For ADA compliance , we need to be able to browse through all the cells in the grid so that screen reader can read the data in each cell.

    We are using bound fields and template fields

    Issue is that the tab does not work for bound fields, it works only for the link button fields.

    How can the tabbing be enabled for bound field as the same is required for ADA compliance.

    How to add Tab index grid items  ex:ayush kare and careteam member.
    but ayus@m.com it is working
  8. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 05 Sep 2013 Link to this post

    Hello,

    Please try with the below code snippet.

    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
            OnItemDataBound="RadGrid1_ItemDataBound">
            <MasterTableView DataKeyNames="ID">
                <Columns>
                    <telerik:GridTemplateColumn>
                        <ItemTemplate>
                            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">Click here to see file</asp:HyperLink>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn>
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        dynamic data1 = new[] {
               new { ID = 1, Name ="Name_1"},
               new { ID = 2, Name = "Name_2"},
               new { ID = 3, Name = "Name_3"},
               new { ID = 4, Name = "Name_4"},
               new { ID = 5, Name = "Name_5"}
           };
     
        RadGrid1.DataSource = data1;
    }
     
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = e.Item as GridDataItem;
            HyperLink HyperLink1 = item.FindControl("HyperLink1") as HyperLink;
            Label Label1 = item.FindControl("Label1") as Label;
     
            HyperLink1.TabIndex = (short)((item.ItemIndex * 10) + 1);
            item["ID"].TabIndex = (short)((item.ItemIndex * 10) + 2);
            Label1.TabIndex = (short)((item.ItemIndex * 10) + 3);
        }
    }


    Thanks,
    Jayesh Goyani
  9. Srikant
    Srikant avatar
    1 posts
    Member since:
    Jan 2015

    Posted 16 Jan 2015 Link to this post

    Hi,
    I am having 2 rad grid, which we have create dynamically in server side, now custome want when he will select a row in first Grid then it should be sink with second grid and same index row will select. do have any solution to any body , please post ur code.

    srikant 
  10. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 20 Jan 2015 in reply to Srikant Link to this post

    Hello Srikant,

    Have you resolved this issue?

    Thanks,
    Jayesh Goyani
  11. Eyup
    Admin
    Eyup avatar
    3014 posts

    Posted 21 Jan 2015 Link to this post

    Hello,

    This can be achieved either on client-side:
    http://www.telerik.com/help/aspnet-ajax/grid-onrowselected.html

    Or on server-side:
    http://www.telerik.com/help/aspnet-ajax/grid-postback-on-client-row-click.html

    Hope this helps.

    Regards,
    Eyup
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017