focus textbox on ajaxified grid edittemplate

[Haddadi]

Hi,

I'am trying now to focus a particular textbox when the user click the edit button.

I found this very helpful thread on your support base, but it doesn't work (javascript approach) if my grid is ajaxified.

What is the solution ?

Thanks in advance.

[Haddadi]

Please?

[Shinu]

Hi,

Could you please send your aspx?

Shinu.

[Haddadi]

Hi, thank you for your support.

my Aspx:

<%@ Page Language="C#" MasterPageFile="~/Admin/admin.master" AutoEventWireup="true" CodeBehind="Profils.aspx.cs" Inherits="Web.Admin.WebForm3" Title="Page sans titre" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:Label ID="Label1" runat="server" CssClass="labelCentered" Height="25px"
    Text="Profils utilisateurs" Width="100%"></asp:Label>
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowAutomaticDeletes="True"
        AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowSorting="True"
        DataSourceID="DataSourceProfils" GridLines="None" Skin="Office2007"
        onitemcreated="RadGrid1_ItemCreated" EnableAJAX="true" Height="100%"
            style="text-align: left" onitemdeleted="RadGrid1_ItemDeleted">
            <FooterStyle BackColor="White" />
            <MasterTableView autogeneratecolumns="False" datasourceid="DataSourceProfils"
            DataKeyNames="idProfil" CommandItemDisplay="Top"
            ClientDataKeyNames="idProfil" nodetailrecordstext="Aucun enregistrement"
            nomasterrecordstext="Aucun enregistrement">
                <CommandItemSettings AddNewRecordText="Ajouter" RefreshText="Rafraichir" />
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                <ExpandCollapseColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridBoundColumn DataField="Idprofil" DataType="System.Int32"
            HeaderText="Id." SortExpression="Idprofil" UniqueName="Idprofil"
            AllowFiltering="False" AllowSorting="False" Groupable="False" ReadOnly="True"
            Reorderable="False" Resizable="False" ShowSortIcon="False">
                        <HeaderStyle Width="25px" />
                        <ItemStyle Width="50px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn DataField="Libprofil" HeaderText="Profil"
            SortExpression="Libprofil" UniqueName="Libprofil">
                        <EditItemTemplate>
                            <asp:TextBox ID="LibprofilTextBox" runat="server"
                    Text='<%# Bind("Libprofil") %>' Width="330px"></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="LibprofilLabel" runat="server" Text='<%# Eval("Libprofil") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete"
            ConfirmDialogType="RadWindow" ConfirmText="Supprimer ?"
            ConfirmTitle="Confirmation demandée" Text="Suppr." UniqueName="column1">
                        <ItemStyle Width="25px" />
                    </telerik:GridButtonColumn>
                    <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Edit"
            Text="Edit" UniqueName="Edit">
                        <ItemStyle Width="25px" />
                    </telerik:GridButtonColumn>
                </Columns>
                <EditFormSettings>
                    <EditColumn ButtonType="ImageButton" canceltext="Annuler" edittext="Editer"
            inserttext="Nouveau">
                    </EditColumn>
                </EditFormSettings>
                <CommandItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                <CommandItemTemplate>
                    <table align="right">
                    <tr>
                    <td width="30%">

                     <asp:ImageButton ID="btnAdd" ImageUrl="~/Resources/images/AddRecord.gif"
                      Text="Ajouter" CommandName="InitInsert" Runat="server"></asp:ImageButton>
                    </td>
                    <td width="40%">
                    </td>
                    <td width="30%">
                     <asp:ImageButton ID="btnRefresh" Text="Rafraichir" ImageUrl="~/Resources/images/Refresh.gif"
                      CommandName="Rebind" Runat="server"></asp:ImageButton>
                    </td>
                      </tr>
                     </table>
                </CommandItemTemplate>
            </MasterTableView>
        </telerik:RadGrid>
    <asp:ObjectDataSource ID="DataSourceProfils" runat="server"
        DeleteMethod="Delete" InsertMethod="Insert" SelectMethod="FetchAll"
        SortParameterName="sort" TypeName="DataDopavit.ProfilController"
        UpdateMethod="Update">
        <DeleteParameters>
            <asp:Parameter Name="Idprofil" Type="Object" />
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="Idprofil" Type="Int32" />
            <asp:Parameter Name="Libprofil" Type="String" />
        </UpdateParameters>
        <SelectParameters>
            <asp:Parameter Name="search" Type="String" />
            <asp:Parameter Name="sort" Type="String" />
            <asp:Parameter Name="startRowIndex" Type="Int32" />
            <asp:Parameter Name="maximumRows" Type="Int32" />
        </SelectParameters>
        <InsertParameters>
            <asp:Parameter Name="Libprofil" Type="String" />
        </InsertParameters>
    </asp:ObjectDataSource>
</asp:Content>

in fact, i ajaxify my grid in server side code like it:

protected void Page_Load(object sender, EventArgs e)
        {

 //Ajaxify the grid control

RadAjaxManager AjaxManager = (RadAjaxManager)this.Master.FindControl("RadAjaxManager1");
            AjaxManager.AjaxSettings.AddAjaxSetting(RadGrid1, RadGrid1,             (RadAjaxLoadingPanel)this.Master.FindControl("RadAjaxLoadingPanel1"));


            this.Title = "Profils utilisateur";



        }

and i try to focus my control like it

 protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
            {
                 GridEditableItem item = e.Item as GridEditableItem;
                 RadGrid1.Controls.Add(new LiteralControl(String.Format("<script type='text/javascript'>document.getElementById('{0}').focus();document.getElementById('{0}').select();</script>", ((item.FindControl("LibprofilTextBox")) as TextBox).ClientID)));
            }
        }

Its work well if i "unajaxifiy" my control (i comment the code in page_load), but when the grid is ajaxified, the jscript is not executed.

How can i make it work ?

thx.

[Shinu]

Hi,

Try removing the EnableAJAX property from the aspx and see whether it is working.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowAutomaticDeletes="True"
        AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowSorting="True"
        DataSourceID="DataSourceProfils" GridLines="None" Skin="Office2007"
        onitemcreated="RadGrid1_ItemCreated" EnableAJAX="False" Height="100%" >

Thanks
Shinu

[Haddadi]

Hi Shinu,

I' try this and i'm sorry but it's not better....

[Sean]

I'm having the same problem. Was there ever a resolution to this?  Thread is from 2008 with no response.

I have a problem when I click on a row to edit it the entire page scrolls down to a textbox in edit template that has focus. I'm not setting focus to the textbox the grid just does it. I then try to set focus to the first textbox using the method explained but it doesn't work if another textbox has a value in it. If the edit template is loaded with no values in any textbox the method works and focuses the first item. Not sure if my FocusControl method is doing it or it the grid is just setting it to the first item because no other element has any text in it.