Radgrid filter not allowing to enter text after tab click

15 posts, 1 answers
  1. Padmasinh
    Padmasinh avatar
    21 posts
    Member since:
    Feb 2014

    Posted 28 Feb 2014 Link to this post

    In my grid there are more than two columns, i entered text in first column filter and then clicked tab key, the cursor going to next column filter but not allowing to write the text. In my grid columns the property AutoPostBackOnFilter is set to "True".

    If there is any possible solution please suggest

    Thanks,
    Padmasinh Babar
  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 05 Mar 2014 Link to this post

    Hello Padmasinh,

    I tried to reproduce the described issue but to no avail. I am sending you a simple example which demonstrates the scenario. Please check it out and let me know what differs in your case. Also on the following link I attached a small video which demonstrates how the example works on my side.

    Additionally could you please confirm that you do not have any scripts which block the text typing?

    Looking forward for your reply.

    Regards,
    Radoslav
    Telerik

    DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Padmasinh
    Padmasinh avatar
    21 posts
    Member since:
    Feb 2014

    Posted 07 Mar 2014 in reply to Radoslav Link to this post

    Thanks Radoslav for your reply

    But still this issue is generating in my side,Can anyone tell why this occurring.

    Thanks!
  5. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 11 Mar 2014 Link to this post

    Hello Padmasinh,

    Based on the provided information it is very hard to say what is causing the described issue. Could you please post you aspx page markup with the related code behind file? Or send us a small runnable example where the problem can be observed. You could open a formal support ticket from your Telerik account and attach a ZIP file there.
    Thus we will be able to gather more details about your scenario and provide you with more to-the-point answer.

    Looking forward for your reply.

    Regards,
    Radoslav
    Telerik

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

  6. Padmasinh
    Padmasinh avatar
    21 posts
    Member since:
    Feb 2014

    Posted 28 May 2014 in reply to Radoslav Link to this post

    hi Radoslav  thanks for your replay,

    As per your video i want enter text in id then press tab then curser shoud go to item then it should allowed typing.

    please check my aspx code as follow

     <Columns>
                                    <telerik:GridClientSelectColumn UniqueName="d" Groupable="false">
                                    </telerik:GridClientSelectColumn>
                                    <telerik:GridBoundColumn DataField="Id" FilterControlAltText="Filter column column"
                                        HeaderText="Id" UniqueName="Id" Visible="false">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridTemplateColumn HeaderText="Building Name" FilterControlWidth="300px"
                                        AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"
                                        DataField="szBuildingName" UniqueName="szBuildingName" FilterControlAltText="Filter column1 column">
                                        <ItemTemplate>
                                            <asp:Label ID="lbl_Id" Visible="false" runat="server" Text='<%#Eval("Id") %>'></asp:Label>
                                            <asp:LinkButton ID="LinkButton2" CommandName="EditBuilding" runat="server" Text='<%# HttpUtility.HtmlEncode(Eval("szBuildingName")) %>'></asp:LinkButton>
                                            <asp:Button ID="DownloadPDF" Style="display: none;" runat="server" Width="0px" CommandName="ExportToPdf" />
                                        </ItemTemplate>
                                        <HeaderStyle Width="250px" />
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridBoundColumn HeaderText="Sort Order" FilterControlAltText="Filter column1 column"
                                        HtmlEncode="true" DataField="szSortOrder" UniqueName="szSortOrder" FilterControlWidth="300px"
                                        AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"
                                        SortExpression="nSortOrder">
                                        <HeaderStyle Width="100px" />
                                    </telerik:GridBoundColumn>
                                </Columns>


    In this first i want to enter text in building column then press tab and enter text in sort order column
  7. Answer
    Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 29 May 2014 Link to this post

    Hi Padmasinh,

    To achieve the desired functionality you need manually to focus the second input because when the blur is fired for the first input the form is submitted and the focus is lost. I am sending you a simple example which shows how to focus manually the second input. Please check it out and let me know if it helps you. 

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

     
  8. Padmasinh
    Padmasinh avatar
    21 posts
    Member since:
    Feb 2014

    Posted 29 May 2014 in reply to Radoslav Link to this post

    Thanks Radoslav for your replay, your solution is very helpful to me
  9. Padmasinh
    Padmasinh avatar
    21 posts
    Member since:
    Feb 2014

    Posted 31 May 2014 in reply to Radoslav Link to this post

    Thanks for your solution, but this solution not working fine for some pages in internet explorer and same pages working fine in firefox.
    I have checked all code with debugger it executes fine, so please provide me any solution.
    Note : This solution always work fine in internet explorer if we click mouse anywhere in page instead of tab key.
  10. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 04 Jun 2014 Link to this post

    Hello Padmasinh,

    I tried to reproduce the described issue but to no avail. On the following link I attached a small video which demonstrates how the example works on my side. Could you please send us a small runnable example where the problem can be observed? You could open a formal support ticket from your Telerik account and attach a ZIP file there.
    Thus we will be able to gather more details about your scenario and provide you with more to-the-point answer.

    Looking forward for your reply.

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

     
  11. Padmasinh
    Padmasinh avatar
    21 posts
    Member since:
    Feb 2014

    Posted 02 Jul 2014 in reply to Radoslav Link to this post

    Hello Radoslav,

    I got one javascript on telerik forums due to which now pages are working fine in internet explorer. But i have one another issue related to this. We set the focus manually from first column to second the third, its working fine but i want to enter text in first column text box then click mouse in third column textbox, then as per our implementation focus going to second column instead of third column. I want focus should be at third column So please provide me any solution
  12. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 04 Jul 2014 Link to this post

    Hi Padmasinh,

    I am sending you modified version of the example which demonstrates how to achieve the desired functionality. Please check it out and let me know if it helps you.

    Looking forward for your reply.

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

     
  13. Padmasinh
    Padmasinh avatar
    21 posts
    Member since:
    Feb 2014

    Posted 20 Aug 2014 in reply to Radoslav Link to this post

    Hi Radoslav ,

    Thanks for your reply.
    I have check example send by you it works fine but i have customized the grid grouping and in this  customized  grid it not works fine.
    Please check with my code.
    If i write some text in 4'th  column and then click mouse in first column then doesn't work. In other words in forward direction it works fine but backward direction it not works fine. 


    Aspx Code :
    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadCodeBlock runat="server">
            <script type="text/javascript">
                function attachFocusEvent() {
                    $telerik.$(".rgFilterRow").find("input").focus(function (e, f) {
                        var cellIndex = e.target.parentNode.cellIndex;
     
                        var columnsUniqueName = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_columns()[cellIndex]._data.UniqueName;
                        $get("<%= HiddenField1.ClientID %>").value = columnsUniqueName;
     
                    });
                }
            </script>
            <script type="text/javascript">
     
                var donePostback = false;
                function Grid(sender, args) {
                    try {
                        var grd_view = document.getElementById('ctl00_MainContent_RadGrid1');
                        var grd_col = grd_view.children[0].children[0];    // grid colgroup
                        var grd_head = grd_view.children[0].children[1];   // grid header
                        var grd_rows = grd_view.children[0].children[2];   // grid body
     
                        // setting grouped column header names
                        if (grd_head.rows[0].cells[0].textContent == undefined) {
                            grd_head.rows[0].cells[3].innerText = "Group Building Name";
                        }
                        else {
                            grd_head.rows[0].cells[3].textContent = "Group Building Name";
     
                        }
                        grd_col.children[0].setAttribute("style", "width:0px ");
                        grd_col.children[1].setAttribute("style", "width:0px ");
                        grd_col.children[2].setAttribute("style", "width:0px ");
     
                        if (!donePostback) {
     
                            donePostback = true;
                            // setting width of grouped columns
                            grd_col.children[2].setAttribute("style", "width:0px ");
                            grd_col.children[3].setAttribute("style", "width:200px ");
                            grd_col.children[6].setAttribute("style", "width:100px ");
                            try {
                                var grid = $find("<%= RadGrid1.ClientID %>");
                                var columns = grid.get_masterTableView().get_columns();
                                for (var i = 0; i < columns.length; i++) {
                                    columns[i].set_resizable(true);
                                }
                            } catch (e) {
                            }
                        }
                        grd_col.children[7].setAttribute("style", "width:0px !important;");
     
                        for (var r = 0; r < grd_head.rows.length; r++) {
                            var row = grd_head.rows[r];
                            if (row.className == "rgFilterRow") {
     
                                // Filter Change (Change)
                                row.cells[3].innerHTML = row.cells[7].innerHTML;
                                row.cells[7].innerHTML = "";
                            }
                        }
                        for (var r = 0; r < grd_rows.rows.length; r++) {
     
                            var row = grd_rows.rows[r];
                            if (row.className == "rgGroupHeader") {
                                row.setAttribute("class", "rgRow RowStyle");
                                row.setAttribute("style", "color: Black; background-color: White;");
     
                                var cells_count = row.cells.length - 1;
     
                                row.cells[cells_count].removeAttribute("colspan");
     
                                var cell_length = grd_head.rows[0].cells.length;
     
                                for (var col = cells_count + 1; col < cell_length; col++) {
     
                                    row.insertCell(col);
                                }
                                if (row.cells[0].textContent == undefined) {
                                    var group_name = row.cells[cells_count].children[0].innerText.split(',&*KeyToDivide,')[0];
                                    var coloman_name = row.cells[cells_count].children[0].innerText.split(',&*KeyToDivide,')[1];
                                    var case_count = row.cells[cells_count].children[0].innerText.split(',&*KeyToDivide,')[2];
                                    row.cells[cells_count].innerText = "";
                                    var span_grp_name = document.createElement("span");
                                    span_grp_name.innerText = group_name;
                                    row.cells[cells_count - 1].appendChild(span_grp_name);
     
                                    try {
                                        if (coloman_name == "SortOrder") {
                                            grd_rows.rows[r].setAttribute("style", "display:none !important;");
                                        }
                                    } catch (e) {
     
                                    }
                                }
                                else {
                                    var group_name = row.cells[cells_count].children[0].textContent.split(',&*KeyToDivide,')[0];
                                    var coloman_name = row.cells[cells_count].children[0].textContent.split(',&*KeyToDivide,')[1];
                                    var case_count = row.cells[cells_count].children[0].textContent.split(',&*KeyToDivide,')[2];
                                    row.cells[cells_count].textContent = "";
                                    var span_grp_name = document.createElement("span");
                                    span_grp_name.textContent = group_name;
                                    row.cells[cells_count - 1].appendChild(span_grp_name);
                                    try {
                                        if (coloman_name == "SortOrder") {
                                            grd_rows.rows[r].setAttribute("style", "display:none !important;");
                                        }
                                    } catch (e) {
     
                                    }
                                }
                            }
                            var cell_noc = row.cells[2].cloneNode(true);
                            row.deleteCell(2);
                            row.insertCell(0);
                            row.replaceChild(cell_noc, row.cells[0]);
     
                            var cell_noc = row.cells[3].cloneNode(true);
                            row.deleteCell(3);
                            row.insertCell(1);
                            row.replaceChild(cell_noc, row.cells[1]);
     
                            for (var c = 0; c < row.cells.length - 1; c++) {
                                var col = row.cells[c];
                                col.removeAttribute("class");
                            }
                        }
                    }
                    catch (e) {
                    }
                }
     
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
            <asp:HiddenField runat="server" ID="HiddenField1" />
            <telerik:RadGrid runat="server" ID="RadGrid1" AllowSorting="true" AllowPaging="true"
                AutoGenerateColumns="false" AllowFilteringByColumn="true">
                <GroupingSettings CaseSensitive="false" GroupContinuedFormatString="" GroupContinuesFormatString=""
                    GroupSplitDisplayFormat="" GroupSplitFormat="{0}" />
                <ClientSettings AllowExpandCollapse="True" AllowDragToGroup="False" AllowColumnsReorder="False">
                    <Selecting AllowRowSelect="True" UseClientSelectColumnOnly="True" />
                    <Resizing AllowColumnResize="true" />
                    <ClientEvents OnGridCreated="Grid" />
                </ClientSettings>
                <MasterTableView>
                    <GroupHeaderTemplate>
                        <asp:Label runat="server" ID="Label10" Text='<%# ""+ (((GridGroupHeaderItem)Container).AggregatesValues["BuildingSortOrderName"]) + ",&*KeyToDivide,SortOrder,&*KeyToDivide,"+ (((GridGroupHeaderItem)Container).AggregatesValues["BuildingSortOrderName"]) %>'
                            Visible='<%# ((((GridGroupHeaderItem)Container).AggregatesValues["BuildingSortOrderName"]) != null)%>'>
                        </asp:Label>
                        <asp:Label runat="server" ID="Label5" Text='<%#Server.HtmlEncode(""+ (((GridGroupHeaderItem)Container).AggregatesValues["BuildingName"]) +""+ ",&*KeyToDivide,Building,&*KeyToDivide,"+ (((GridGroupHeaderItem)Container).AggregatesValues["BuildingNameCount"])) %>'
                            Visible='<%# ((((GridGroupHeaderItem)Container).AggregatesValues["BuildingNameCount"]) != null)%>'>
                        </asp:Label>
                        <asp:Label ID="lblGroups" Visible="false" Text="" runat="server"></asp:Label>
                    </GroupHeaderTemplate>
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldName="BuildingSortOrder" FieldAlias="BuildingSortOrderName" />
                                <telerik:GridGroupByField FieldName="BuildingSortOrder" FieldAlias="BuildingNameCount" />
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="BuildingSortOrder" SortOrder="None" />
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldName="szBuildingName" FieldAlias="BuildingNameCount"
                                    HeaderText="BuildingName" />
                                <telerik:GridGroupByField FieldName="szBuildingName" FieldAlias="BuildingName" HeaderText="BuildingName" />
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="szBuildingName" HeaderText="BuildingName" />
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <Columns>
                        <telerik:GridTemplateColumn AllowFiltering="false" UniqueName="1">
                            <ItemTemplate>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn AllowFiltering="false" UniqueName="2">
                            <ItemTemplate>
                            </ItemTemplate>
                            <HeaderStyle Width="200px" />
                        </telerik:GridTemplateColumn>
                        <telerik:GridClientSelectColumn UniqueName="d" Groupable="false">
                        </telerik:GridClientSelectColumn>
                        <telerik:GridBoundColumn DataField="Id" FilterControlAltText="Filter column column"
                            HeaderText="Id" UniqueName="Id" Visible="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="Building Name" FilterControlWidth="300px"
                            AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"
                            DataField="szBuildingName" UniqueName="szBuildingName" FilterControlAltText="Filter column1 column">
                            <ItemTemplate>
                                <asp:Label ID="lbl_Id" Visible="false" runat="server" Text='<%#Eval("Id") %>'></asp:Label>
                                <asp:LinkButton ID="LinkButton2" CommandName="EditBuilding" runat="server" Text='<%# HttpUtility.HtmlEncode(Eval("szBuildingName")) %>'></asp:LinkButton>
                                <asp:Button ID="DownloadPDF" Style="display: none;" runat="server" Width="0px" CommandName="ExportToPdf" />
                            </ItemTemplate>
                            <HeaderStyle Width="250px" />
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn HeaderText="Sort Order" FilterControlAltText="Filter column1 column"
                            HtmlEncode="true" DataField="szSortOrder" UniqueName="szSortOrder" FilterControlWidth="300px"
                            AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"
                            SortExpression="nSortOrder">
                            <HeaderStyle Width="100px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="Building Name" FilterControlAltText="Filter column1 column"
                            HtmlEncode="true" DataField="szBuildingName" UniqueName="szBuildingName1" FilterControlWidth="300px"
                            AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"
                            SortExpression="nSortOrder">
                            <HeaderStyle Width="100px" />
                        </telerik:GridBoundColumn>
                        
                    </Columns>
                </MasterTableView>
                <ClientSettings Selecting-AllowRowSelect="true">
                </ClientSettings>
            </telerik:RadGrid>
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel runat="server" Skin="Default" ID="RadAjaxLoadingPanel1">
        </telerik:RadAjaxLoadingPanel>
    </asp:Content>

    CS Code :
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using Telerik.Web.UI;
     
    public partial class _Default : System.Web.UI.Page
    {
        bool shouldFocusInput = false;
     
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
         
            RadGrid1.NeedDataSource += new Telerik.Web.UI.GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource);
            RadGrid1.ItemCommand += RadGrid1_ItemCommand;
            RadGrid1.PreRender += RadGrid1_PreRender;
        }
     
        void RadGrid1_PreRender(object sender, EventArgs e)
        {
            if (shouldFocusInput)
            {
                string columnUniqeuName = HiddenField1.Value;
                 
                var col = (RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0] as GridFilteringItem)[columnUniqeuName];
                TextBox tb = (col.Controls[0] as TextBox);
                tb.Focus();
            }
     
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "attachFocusEvent", "attachFocusEvent();", true);
        }
     
        void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
        {
            if (e.CommandName == RadGrid.FilterCommandName)
            {
                shouldFocusInput = true;
            }
        }
     
        void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            DataTable table = new DataTable();
            table.Columns.Add("Id");
            table.Columns.Add("szSortOrder");
            table.Columns.Add("szBuildingName");
            table.Columns.Add("BuildingSortOrder");
            for (int i = 1; i < 8; i++)
            {
                table.Rows.Add(i, "szSortOrder" + i.ToString(), "szBuildingName" + i.ToString(),i);
            }
            RadGrid1.DataSource = table;
        }  
    }
  14. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 22 Aug 2014 Link to this post

    Hello Padmasinh,

    The problem comes from the custom code into the function Grid(sender, args) { function. If this code is removed everything works as expected. However to achieve the desired functionality when you use this code you need to change the attachFocusEvent function as following:
    <script type="text/javascript">
                function attachFocusEvent() {
                    $telerik.$(".rgFilterRow").find("input").focus(function (e, f) {
                         
                        var cellIndex = e.target.parentNode.cellIndex - 2;
                        var columnsUniqueName = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_columns()[cellIndex]._data.UniqueName;
                        $get("<%= HiddenField1.ClientID %>").value = columnsUniqueName;
      
                    });
                }
            </script>
    Additionally I am sending you the modified version of the example.

    I hope this helps.

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

     
  15. Padmasinh
    Padmasinh avatar
    21 posts
    Member since:
    Feb 2014

    Posted 22 Aug 2014 in reply to Radoslav Link to this post

    Hi Radoslav ,

    Thanks for your reply.

    I have check example attached with your reply, but it not working fine.
    Also i found that if grid is not customized then also it is not working in Pure IE 8 browser.

    Thanks in advance!!!
  16. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 27 Aug 2014 Link to this post

    Hello Padmasinh,

    To achieve the desired functionality you can try changing the approach to not searching unique name by column index. Instead that you can add additional class to each textbox element and then on client side save this nave into the hidden field:
    void RadGrid1_PreRender(object sender, EventArgs e)
        {
            if (shouldFocusInput)
            {
                string columnUniqeuName = HiddenField1.Value;
                if (!string.IsNullOrEmpty(columnUniqeuName))
                {
                    var col = (RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0] as GridFilteringItem)[columnUniqeuName];
                    TextBox tb = (col.Controls[0] as TextBox);
                    tb.Focus();
                }
            }
     
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "attachFocusEvent", "attachFocusEvent();", true);
     
            GridFilteringItem item = RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem).First() as GridFilteringItem;
            foreach (var column in RadGrid1.MasterTableView.RenderColumns)
            {
                if (item[column.UniqueName].Controls.Count > 0)
                {
                    TextBox tb = item[column.UniqueName].Controls[0] as TextBox;
                    if (tb != null)
                    {
                        tb.CssClass += " " + column.UniqueName;
                    }
                }
            }
        }
    <script type="text/javascript">
                function attachFocusEvent() {
                    setTimeout(function() {
     
                        $telerik.$(".rgFilterRow").find("input").focus(function (e, f) {
                            var uniqueName = e.target.className.replace('rgFilterBox ','');               
                            $get("<%= HiddenField1.ClientID %>").value = uniqueName;
                        });
                    },1000);
                }
            </script>
    However please note that this code will not work with your custom implementation in the OnGridCreated event, because you move cell’s content with following code:
    for (var r = 0; r < grd_head.rows.length; r++) {
                            var row = grd_head.rows[r];
                            if (row.className == "rgFilterRow") {
      
                                // Filter Change (Change)
                                row.cells[3].innerHTML = row.cells[7].innerHTML;
                                row.cells[7].innerHTML = "";
                            }
                        }
    After that on the server side the code for focusing textbox will not work correct. However if I remove this custom code everything works as expected. On the following link I attached a small video which demonstrates that.  Also I am sending you the modified version of the example.

    I hope this helps.

    Regards,
    Radoslav
    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