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

Radgrid filter not allowing to enter text after tab click

14 Answers 149 Views

Ajax

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

14 Answers, 1 is accepted

answered on 05 Mar 2014, 08:14 AM

Example.zip

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!

answered on 11 Mar 2014, 10:08 AM

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.

answered on 28 May 2014, 08:01 AM

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

Accepted

answered on 29 May 2014, 08:02 AM

Example.zip

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.

answered on 04 Jun 2014, 08:11 AM

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.

answered on 04 Jul 2014, 08:19 AM

Example.zip

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.

answered on 20 Aug 2014, 11:18 AM

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;

}

answered on 22 Aug 2014, 08:52 AM

Example.zip

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.

answered on 27 Aug 2014, 07:52 AM

Example.zip

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Radgrid filter not allowing to enter text after tab click

14 Answers, 1 is accepted