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

Language Tool bar not working in IE

1 Answer 75 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mayur
Top achievements
Rank 1
Mayur asked on 25 Aug 2014, 07:41 AM
Hi,
    I have created demo for radgrid filter. if I search in first textbox filter column and press enter then focus of control goes to second textbox filter column. I change the language English to Japanese and selecting input mode hiragana for typing text in filter it works in Firefox but not working in Internet Explorer. I have attached gif file for this problem.
    Please provide solution for it.

.aspx page code are as follows
<%@ 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" OnCellSelected="attachFocusEvent" />
</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="200px"
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="200px"
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="200px"
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>


and CS file 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;
bool shouldFocusInputBuildingGroup = false;
bool shouldFocusInputSortOrder = false;
bool shouldFocusInputBuilding = 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);
if (shouldFocusInputBuildingGroup)
{
var col = (RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0] as GridFilteringItem)["szBuildingName1"];
TextBox tb = (col.Controls[0] as TextBox);
tb.Focus();
}
else if (shouldFocusInputSortOrder)
{
var col = (RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0] as GridFilteringItem)["szSortOrder"];
TextBox tb = (col.Controls[0] as TextBox);
tb.Focus();
}
else if (shouldFocusInputBuilding && RadGrid1.MasterTableView.AllowFilteringByColumn)
{
var col = (RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0] as GridFilteringItem)["szBuildingName"];
TextBox tb = (col.Controls[0] as TextBox);
tb.Focus();
}
}

void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
if (e.CommandName == RadGrid.FilterCommandName)
{
if ((e.CommandArgument as Pair).Second.ToString() == "szBuildingName1")
{
shouldFocusInputBuilding = true;
}
else if ((e.CommandArgument as Pair).Second.ToString() == "szBuildingName")
{
shouldFocusInputSortOrder = true;
}
else if ((e.CommandArgument as Pair).Second.ToString() == "szSortOrder")
{
shouldFocusInputBuildingGroup = 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;
}

}


    

1 Answer, 1 is accepted

Sort by
0
Angel Petrov
Telerik team
answered on 28 Aug 2014, 06:12 AM
Hello Mayur,

I was able to reproduce the described behavior when following the steps from the video. However it does not seem related to the grid as I was able to observe it in simple scenarios where a RadControl is not present on the page(please refer to this video). This is most probably a problem in the operation system and in order to find its root cause I suggest posting this query in the MSDN forums.

Regards,
Angel Petrov
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.

 
Tags
General Discussions
Asked by
Mayur
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
Share this question
or