[Solved] ClientEvents-OnRowSelected event doesn't fire in rad Grid

[Charles Faramarzirad]

Hello;

I’ve tried to implement something similar on your demo sitefor radxmlhttp employee lookup as a webpart on sharepoint.

My problem is that once I run the "sort" or the "paging"  function(this is ajaxified, just like it is on the site), then the ClientEvents-OnRowSelected Doesn’t fire anymore. However as long as I dont use those functions, the event fires perfectly and calls the javascript method. This works perfectly if I deploythis as a web application, but as a webpart in sharepoint I’m having thisissue.  Are there any known cases of thishappening? 

Here is the code

<%@ Control Language="C#" AutoEventWireup="true" Codebehind="lookup2.ascx.cs" Inherits="namespace1.lookup2, namespace1, Version=1.0.0.0, Culture=neutral, PublicKeyToken=55fefdf725d04c54" %>
<%@ Register Assembly="Telerik.Web.UI, Version=2009.3.1314.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">


    <script type="text/javascript">
            function rowSelected(sender, args)
            {

                var key = args.getDataKeyValue("Loginname");
                var panel = $find("<%=RadXmlHttpPanel1.ClientID %>");
                panel.set_value(key);
            }
    </script>
</telerik:RadScriptBlock>
<style type="text/css">
        .divContainer
        {
            background: url('_layouts\images\snps\main_back.png') no-repeat;
            width: 100%;
            height: 400px;
            position: relative;
        }
        .divGrid, .divXmlHttpPanel
        {
            position: absolute;
            top: 86px;
        }
        .divXmlHttpPanel
        {
            top: 132px;
            left: 390px;
        }
        .rgInfoPart
        {
            display: none !important;
        }
        .title
        {
            font-size: 12px;
            color: #606060;
        }
        .info
        {
            color: black;
            font-size: 12px;
        }
        .BODY {
            FONT-SIZE: 62.5%;

                FONT-FAMILY: "segoe ui",arial,sans-serif}
    </style>
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Hay" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting  AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl  ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel  ID="RadAjaxLoadingPanel1" runat="server" Skin="Hay">
        </telerik:RadAjaxLoadingPanel>
<table>
    <tr>
        <td>
            Search by first name:
        </td>
        <td>
            <telerik:RadTextBox ID="RadTextBox1" runat="server">
            </telerik:RadTextBox>
        </td>
        <td>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="Button" />
        </td>
    </tr>
    <tr>
        <td>
            Search by last name:
        </td>
        <td>
            <telerik:RadTextBox ID="RadTextBox2" runat="server">
            </telerik:RadTextBox>
        </td>
        <td>
            <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
        </td>
    </tr>
    <tr>
        <td>
            Search by login name:
        </td>
        <td>
            <telerik:RadTextBox ID="RadTextBox3" runat="server">
            </telerik:RadTextBox>
        </td>
        <td>
            <asp:Button ID="Button3" runat="server" Text="Button" OnClick="Button3_Click" />
        </td>
    </tr>
</table>
<div class="divContainer">
    <div class="divGrid">
                <telerik:RadGrid ID="RadGrid1" Skin="Hay" OnNeedDataSource="RadGrid1_NeedDataSource"
                    Width="370px" AllowPaging="true"  PageSize="10" AllowSorting="True" runat="server"
                    AutoGenerateColumns="false" GridLines="None">
                    <MasterTableView ClientDataKeyNames="Loginname" Width="100%" Summary="RadGrid table">
                        <Columns>
                            <telerik:GridBoundColumn DataField="Loginname" Visible="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="FirstName" DataField="FirstName" UniqueName="FirstName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="LastName" DataField="LastName" UniqueName="LastName">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <PagerStyle Mode="NumericPages" />
                    <ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" ClientEvents-OnRowSelected="rowSelected">
                    </ClientSettings>
                </telerik:RadGrid>
    </div>
    <div class="divXmlHttpPanel">
        <telerik:RadXmlHttpPanel  ID="RadXmlHttpPanel1" runat="server" OnServiceRequest="XmlHttpPanel_ServiceRequest"
            RenderMode="Block">
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div style="float: left; border: 1px solid #999999; margin-right: 15px; width: 180px;
                        height: 220px; background-position: center; background-repeat: no-repeat; background-image: url('<%# Eval("Loginname", "http://lookup/CCMCIP/moc/photograb2.cgi?userid={0}") %>');">
                    </div>
                    <div style="float: left;">
                        <br />
                        <br />
                        <br />
                        <div style="text-align: center;">
                            <asp:Label CssClass="info" ID="Name" runat="server" Style="font-size: x-large;">
                                    <%# Eval("FirstName")%>&nbsp;<%# Eval("LastName")%></asp:Label><br />
                            <asp:Label CssClass="info" ID="Label1" runat="server"><%# Eval("PersonnelTitle")%></asp:Label>
                        </div>
                        <br />
                        <br />
                        <div style="float: left; text-align: right;">
                            <span class="title">Login Name:</span>
                            <br />
                            <br />
                            <span class="title">Phone:</span>
                            <br />
                            <br />
                            <span class="title">Mobile:</span>
                            <br />
                            <br />
                            <span class="title">Email:</span>
                            <br />
                            <br />
                        </div>
                        <div style="float: left; margin-left: 5px;">
                            <asp:Label CssClass="info" ID="cName" runat="server">&nbsp;<%# Eval("Loginname")%></asp:Label>
                            <br />
                            <br />
                            <asp:Label CssClass="info" ID="Label2" runat="server">&nbsp;<%# Eval("Phone")%></asp:Label>
                            <br />
                            <br />
                            <asp:Label CssClass="info" ID="Label3" runat="server">&nbsp;<%# Eval("Mobile")%></asp:Label>
                            <br />
                            <br />
                            <asp:Label CssClass="info" ID="Label4" runat="server">&nbsp;<%# Eval("Email")%></asp:Label>
                            <br />
                            <br />
                            <a href="<%# Eval("LoginName", "http://lookup/lookup/ph-org.cgi?query=email={0}") %>"
                                target="_blank">More Detail...</a>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </telerik:RadXmlHttpPanel>
    </div>
</div>

Thanks

Charles

[Libertas Technologies]

Try including the RadScriptBlock that contains the javascript for the row event in the RadAjaxManager. Include it as a control that gets updated by the RadGrid control

[Charles Faramarzirad]

Hi there;
Thanks for your feed back.

i did implement it as you asked:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

    <script type="text/javascript">
            function rowSelected(sender, args)
            {

                var key = args.getDataKeyValue("Loginname");
                var panel = $find("<%=RadXmlHttpPanel1.ClientID %>");
                panel.set_value(key);
            }
    </script>

</telerik:RadScriptBlock>
<style type="text/css">
        .divContainer
        {
            background: url('_layouts\images\snps\main_back.png') no-repeat;
            width: 100%;
            height: 400px;
            position: relative;
        }
        .divGrid, .divXmlHttpPanel
        {
            position: absolute;
            top: 86px;
        }
        .divXmlHttpPanel
        {
            top: 132px;
            left: 390px;
        }
        .rgInfoPart
        {
            display: none !important;
        }
        .title
        {
            font-size: 12px;
            color: #606060;
        }
        .info
        {
            color: black;
            font-size: 12px;
        }
        .BODY {
            FONT-SIZE: 62.5%;

                FONT-FAMILY: "segoe ui",arial,sans-serif}
    </style>
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Hay" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="RadScriptBlock1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

However, it didn't work,  i'm still running into the issue

[Maria Ilieva]

Hello Charles,

I suggest you to review the following help topic which elaborates on executing javascript after Ajax request.
Let me know if this helps.

Kind regards,
Maria Ilieva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Charles Faramarzirad]

Hi Folks;
THanks for the feedback.  I will try to take a look at that implementation.  I did however, manage to get it to work on my own.
I basically followed the documentation on radxmlhttp on the telerik site, and came up with the answer.

by placing the xmlhttppanel inside  a radajax panel i was able to eliminate the issue.
here is the code

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px">
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

        <script type="text/javascript">
            function rowSelected(sender, args)
            {
                var key = args.getDataKeyValue("Loginname");
                var panel = $find("<%=RadXmlHttpPanel2.ClientID %>");
                panel.set_value(key);
            }
        </script>

        <script type="text/javascript" language="JavaScript">



 // Handle the Begin event
 function beginRequest(sender, eventArgs)
 {
     // Get the controls
     var ImageButton1 = $get('<%=Button1.ClientID %>');
     var ImageButton2 = $get('<%=Button2.ClientID %>');
     var ImageButton3 = $get('<%=Button3.ClientID %>');
     var usernameSearch = $find('<%=RadTextBox3.ClientID %>');
     var firstnamesearch = $find('<%=RadTextBox1.ClientID %>');
     var lastnamesearch = $find('<%=RadTextBox2.ClientID %>');
      // Disable the controls
     ImageButton1.disabled = true;
     ImageButton2.disabled = true;
     ImageButton3.disabled = true;
     usernameSearch.disable();
     firstnamesearch.disable();
     lastnamesearch.disable();

 }


 function endRequest(sender, eventArgs)
 {

   // Get the controls
     var ImageButton1 = $get('<%=Button1.ClientID %>');
     var ImageButton2 = $get('<%=Button2.ClientID %>');
     var ImageButton3 = $get('<%=Button3.ClientID %>');
     var usernameSearch = $find('<%=RadTextBox3.ClientID %>');
     var firstnamesearch = $find('<%=RadTextBox1.ClientID %>');
     var lastnamesearch = $find('<%=RadTextBox2.ClientID %>');

     // enable the controls
     ImageButton1.disabled = false;
     ImageButton2.disabled = false;
     ImageButton3.disabled = false;
     usernameSearch.enable();
     firstnamesearch.enable();
     lastnamesearch.enable();

 }


        </script>

    </telerik:RadScriptBlock>
    <telerik:RadXmlHttpPanel ID="RadXmlHttpPanel2" runat="server" EnableClientScriptEvaluation="true"
        OnServiceRequest="XmlHttpPanel_ServiceRequest">
        <table>
            <tr>
                <td>
                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            Enter first name:
                                        </td>
                                        <td>
                                            <telerik:RadTextBox ID="RadTextBox1" runat="server">
                                            </telerik:RadTextBox>
                                        </td>
                                        <td>
                                            <asp:ImageButton ImageUrl="/_layouts/images/snps/buttons/gobutton.gif" ID="Button1"
                                                runat="server" Height="15px" ImageAlign="Middle" OnClick="Button1_Click1" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            Enter last name:
                                        </td>
                                        <td>
                                            <telerik:RadTextBox ID="RadTextBox2" runat="server">
                                            </telerik:RadTextBox>
                                        </td>
                                        <td>
                                            <asp:ImageButton ImageUrl="/_layouts/images/snps/buttons/gobutton.gif" ID="Button2"
                                                runat="server" Height="15px" ImageAlign="Middle" OnClick="Button2_Click" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            Enter username:
                                        </td>
                                        <td>
                                            <telerik:RadTextBox ID="RadTextBox3" runat="server">
                                            </telerik:RadTextBox>
                                        </td>
                                        <td>
                                            <asp:ImageButton ImageUrl="/_layouts/images/snps/buttons/gobutton.gif" ID="Button3"
                                                runat="server" Height="15px" ImageAlign="Middle" OnClick="Button3_Click" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="left">
                    <div class="divContainer">
                        <table cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td class="divGrid">
                                    <telerik:RadGrid ID="RadGrid1" Skin="Hay" OnNeedDataSource="RadGrid1_NeedDataSource"
                                        AllowSorting="True" PageSize="10" AllowPaging="True" runat="server" AutoGenerateColumns="false"
                                        GridLines="None">
                                        <MasterTableView ClientDataKeyNames="Loginname" Width="100%" Summary="RadGrid table">
                                            <Columns>
                                                <%-- <telerik:GridImageColumn HeaderText="picture" DataImageUrlFields="Loginname" DataImageUrlFormatString="http://lookup/CCMCIP/moc/photograb2.cgi?userid={0}">
                                                </telerik:GridImageColumn>--%>
                                                <telerik:GridBoundColumn DataField="Loginname" Visible="false">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn HeaderText="FirstName" DataField="FirstName" UniqueName="FirstName">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn HeaderText="LastName" DataField="LastName" UniqueName="LastName">
                                                </telerik:GridBoundColumn>
                                            </Columns>
                                        </MasterTableView>
                                        <PagerStyle Mode="NumericPages" PageButtonCount="5" />
                                        <ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" ClientEvents-OnRowSelected="rowSelected">
                                        </ClientSettings>
                                    </telerik:RadGrid>
                                </td>
                                <td valign="top">
                                    <asp:Repeater ID="Repeater1" runat="server">
                                        <ItemTemplate>
                                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                <tr>
                                                    <td style="padding-left: 5px" align="left" valign="top">
                                                        <table>
                                                            <tr>
                                                                <td colspan="2" align="center">
                                                                    <asp:Label CssClass="info" ID="Name" runat="server" Style="font-size: x-large;">
                                    <%# Eval("FirstName")%>&nbsp;<%# Eval("LastName")%></asp:Label><br />
                                                                    <img alt="" src='<%# Eval("Loginname", "http://lookup/CCMCIP/moc/photograb2.cgi?userid={0}") %>' />
                                                                    <br />
                                                                    <asp:Label CssClass="info" ID="Label1" runat="server"><%# Eval("PersonnelTitle")%></asp:Label>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td style="white-space: nowrap; text-align: right">
                                                                    <span class="title">Login Name:</span></td>
                                                                <td>
                                                                    <asp:Label CssClass="info" ID="cName" runat="server">&nbsp;<%# Eval("Loginname")%></asp:Label>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td style="white-space: nowrap; text-align: right">
                                                                    <span class="title">Phone:</span>
                                                                </td>
                                                                <td>
                                                                    <asp:Label CssClass="info" ID="Label2" runat="server">&nbsp;<%# Eval("Phone")%></asp:Label>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td style="white-space: nowrap; text-align: right">
                                                                    <span class="title">Mobile:</span>
                                                                </td>
                                                                <td>
                                                                    <asp:Label CssClass="info" ID="Label3" runat="server">&nbsp;<%# Eval("Mobile")%></asp:Label>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td style="white-space: nowrap; text-align: right">
                                                                    <span class="title">Email:</span>
                                                                </td>
                                                                <td>
                                                                    <asp:Label CssClass="info" ID="Label4" runat="server">&nbsp;<%# Eval("Email")%></asp:Label>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="2" align="center">
                                                                    <a href="<%# Eval("LoginName", "http://lookup/lookup/ph-org.cgi?query=email={0}") %>"
                                                                        target="_blank">More Detail...</a>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </telerik:RadXmlHttpPanel>
</telerik:RadAjaxPanel>