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

OnSelectedIndexChanged fires when OnSelectedIndexChanged clicked

2 Answers 129 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Big
Top achievements
Rank 1
Big asked on 16 May 2012, 03:10 PM
sorry, the title is incorrect  

OnSelectedIndexChanged fires when 

GridHyperLinkColumn is clicked! 




I have a RadGrid that uses the OnSelectedIndexChanged (which fires off some other events that changes things on the screen)

The first column in this RadGrid is a GridHyperLinkColumn which uses DataNavigateUrlFormatStringWhen a user clicks the GridHyperLinkColumn  we want the OnSelectedIndexChanged  

<telerik:RadGrid runat="server" Height="150"  ID="grdData" EnableEmbeddedSkins="false" OnSelectedIndexChanged="grdData_SelectedIndexChange" OnPreRender="grdData_PreRender"
Skin="AS_Grid_Skin_V10" AutoGenerateColumns="False" AllowPaging="False" AllowSorting="True" Width="100%" OnItemDataBound="grdData_ItemDataBound">
 
                            <ClientSettings EnablePostBackOnRowClick="true">
                                <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="false" />
                                <Selecting AllowRowSelect="true" />
                            </ClientSettings>
 
                            <MasterTableView DataKeyNames="ID">
                                <Columns>
                                    <telerik:GridHyperLinkColumn  HeaderText="<%$ Resources:GlobalTerms, lblName%>"                        DataTextField="Name"
                                                                  HeaderStyle-Wid
th="25%"
                                                                  DataNavigateUrlFields="Id" DataNavigateUrlFormatString="javascript:openScenarioDashboard('{0}');"
                                                                  UniqueName="Name" SortExpression="Name"/>
                       

So in the end, the user clicks the GridHyperLinkColumn link and we want to simulate the 

 protected void grdData_SelectedIndexChange(object sender, EventArgs e)
 {

//runs some code here when the Row is clicked, not the link.  We want both
}


any ideas?


2 Answers, 1 is accepted

Sort by
0
Big
Top achievements
Rank 1
answered on 16 May 2012, 04:47 PM
any ideas on this ?

When we use the OnSelectedIndexChanged property of the RadGrid the user can click the row and it fires the "grdData_SelectedIndexChange" which does some updates.

Within that same grdData Grid, the first column is a GridHyperLinkColumn which uses DataNavigateUrlFormatString to call some javascript to open up a page.

When the user clicks the GridyperLinkColumn link, we would like the OnSelectedIndexChanged to fire just as if the user clicked the row.


Sorry for repeating, but maybe its clearer now.


Any ideas?


0
Richard
Top achievements
Rank 1
answered on 18 May 2012, 09:14 PM
Big:

You can use the following approach to attach an "onclick" event to the Hyperlink in your GridHyperLinkColumn which can then be used to fire a client-side JavaScript function that selects the row in which that Hyperlink is embedded. This should, then, kick off the RadGrid SelectionChangedEvent.

The redirect using the DataNavigateUrlFormatString still occurs.

Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <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>
    <script type="text/javascript">
        function selectThisRow(index) {
            alert(index);
            var mt = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
            var row = mt.get_dataItems()[index];
            row.set_selected(true);
        }
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
        <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" AllowPaging="True" ShowFooter="True"
            runat="server" AutoGenerateColumns="False" AllowSorting="True"
            PageSize="3" GridLines="None"
            CellPadding="0" AllowMultiRowSelection="True" CellSpacing="0"
            onitemdatabound="RadGrid1_ItemDataBound"
            onselectedindexchanged="RadGrid1_SelectedIndexChanged">
            <mastertableview showfooter="True">
                <Columns>
                    <telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn" FooterText="CheckBoxSelect footer" />
                    <telerik:GridBoundColumn FooterText="BoundColumn footer" UniqueName="CompanyName"
                        SortExpression="CompanyName" HeaderText="Company Name" DataField="CompanyName">
                    </telerik:GridBoundColumn>
                     <telerik:GridHyperLinkColumn FooterText="HyperLinkColumn footer" DataTextFormatString="Search Google for '{0}'"
                        DataNavigateUrlFields="CompanyName" UniqueName="CompanyLink" DataNavigateUrlFormatString="http://www.google.com/search?hl=en&;q={0}&btnG=Google+Search"
                        HeaderText="HyperLink<br/>Column" DataTextField="CompanyName">
                    </telerik:GridHyperLinkColumn>
                </Columns>
            </mastertableview>
            <clientsettings>
                <Selecting AllowRowSelect="true" />
            </clientsettings>
        </telerik:RadGrid>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1"
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Customers]"
        runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>

Default.aspx.cs:
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
using System.Data;
using System.Configuration;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
 
public partial class Default : System.Web.UI.Page
{
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem dataItem = e.Item as GridDataItem;
 
            HyperLink companyName = dataItem["CompanyLink"].Controls[0] as HyperLink;
 
            companyName.Attributes.Add("onclick", "selectThisRow('" + dataItem.ItemIndex + "');");
 
        }
    }
 
    protected void RadGrid1_SelectedIndexChanged(object sender, EventArgs e)
    {
        // run the code that you need here
    }
}

Hope this helps!



Tags
Grid
Asked by
Big
Top achievements
Rank 1
Answers by
Big
Top achievements
Rank 1
Richard
Top achievements
Rank 1
Share this question
or