[Solved] All the text in the grid gets highlike after postback

[Matthew Bishop]

OK, here is a bit of a weird one. I am building a mail system for a project and when I do a postback event after a double click on a row all the text in the RadGrid is highlighted.

I have a javascript function that simply clicks a image button that I have a post back event on.

function refreshMail(){document.getElementById("ImageButton1").click();}

function RowDblClick(sender, eventArgs){parent.openMailMessage(eventArgs.getDataKeyValue("Idnum"));refreshMail();}

I have a simple Image Button and RadGrid

<asp:ImageButton ID="ImageButton1" runat="server"
                                    ImageUrl="../graphics/refresh2.gif" onclick="ImageButton1_Click"
                                    ToolTip="Refresh mail box." />

<telerik:RadGrid ID="RadGrid1" runat="server" AllowCustomPaging="True"
                        AllowPaging="True" GridLines="None" Height="320px"
                        HorizontalAlign="Center" PageSize="50" ShowStatusBar="True" Skin="Vista"
                        Width="760px" AutoGenerateColumns="False" OnDeleteCommand="RadGrid1_DeleteCommand" OnItemCreated="RadGrid1_ItemCreated"
OnNeedDataSource="RadGrid1_NeedDataSource" ShowGroupPanel="True"
                        AllowSorting="True" EnableHeaderContextMenu="True">

                        <MasterTableView GridLines="None">
                        <Columns>
                        <telerik:GridButtonColumn HeaderText="Delete" ConfirmText="Delete this mail?"  ButtonType="ImageButton" CommandName="Delete" Text="Delete"
                        UniqueName="DeleteColumn" HeaderStyle-Width="45px">
<HeaderStyle Width="45px"></HeaderStyle>

                            <ItemStyle HorizontalAlign="Center" CssClass="delButton" />
                        </telerik:GridButtonColumn>
                        <telerik:GridBoundColumn DataField="From" HeaderText="From"/>
                        <telerik:GridBoundColumn DataField="Title" HeaderText="Title"/>
                        <telerik:GridBoundColumn DataField="Date_" HeaderText="Date" HeaderStyle-Width="120px">

<HeaderStyle Width="120px"></HeaderStyle>
                            </telerik:GridBoundColumn>
                        </Columns>
                            <PagerStyle Mode="NextPrevAndNumeric" />
                            <RowIndicatorColumn Visible="False">
                                <HeaderStyle Width="20px" />
                            </RowIndicatorColumn>
                            <ExpandCollapseColumn Visible="False">
                                <HeaderStyle Width="19px" />
                            </ExpandCollapseColumn>
                        </MasterTableView>
                        <ClientSettings AllowColumnHide="True" AllowColumnsReorder="True">
                            <Resizing AllowColumnResize="True" />
                            <Scrolling AllowScroll="True" ScrollHeight="280px" UseStaticHeaders="True" />
                            <Selecting AllowRowSelect="True"></Selecting>
                            <ClientEvents OnRowDblClick="RowDblClick" />
                        </ClientSettings>
                        <FilterMenu>
                            <CollapseAnimation Duration="200" Type="OutQuint" />
                        </FilterMenu>

                    </telerik:RadGrid>

The code behind

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {
            RadGrid1.Rebind();
        }

Does anyone have any ideas?  What is really weird is that I can call the refreshMail() method from the parent page and it doesnt highlight any text. I'm sure this is a simple one, but it's got me baffeled :/

Thanks in advance,
Matt

[Dimo]

Hello Matt,

The observed issue is a browser problem, which is exhibited when the innerHTML of an element is replaced, but some content of the element has been selected. AJAX requests do the same - the innerHTML of the update panel is replaced.

A possible workaround is to subscribe to the RadAjaxManager's OnResponseEnd event and focus some textbox on the page (you can blur it right after that). You can use an existing textbox or create a new one and move it out of the page's visible portion with CSS.

Here is a simple example:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 5;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="50" BackColor="Yellow" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
    DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <ClientEvents OnResponseEnd="MyResponseEnd" />
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<p>Double-click on a word inside a RadGrid data item and then click on Refresh:</p>

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView CommandItemDisplay="Top" />
</telerik:RadGrid>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">

function MyResponseEnd(sender, args)
{
    window.setTimeout(function(){$get("<%= TextBox1.ClientID %>").focus();$get("TextBox1").blur();}, 1);
}

</script>
</telerik:RadCodeBlock>

<asp:TextBox ID="TextBox1" runat="server" style="position:absolute;top:-2000px;left:-2000px" TabIndex="-1" />

</form>
</body>
</html>

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.

[Matthew Bishop]

Hi Dimo, thanks for the quick response and the solution. I have for some reason never run into that issue before.

Also having the focus/ blur code in the OnReponseEnd even showed a flicker as the text was highlighted before the event was fired, so I placed the clearing code on the RadGrids dblclick event and it works perfectly.

function RowDblClick(sender, eventArgs){parent.openMailMessage(eventArgs.getDataKeyValue("Idnum"));$get("<%= TextBox1.ClientID %>").focus();$get("TextBox1").blur();refreshMail();}

This may, or may not work for other people but I thought I should include it anyway.

Thanks a lot for your help :)

Matt

[brian]

This solution works very well.  Excellent.

(Please change title to highlight / selected for better searching)