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

OnSelectedIndexChanged fires when OnSelectedIndexChanged clicked

2 Answers 183 Views

Grid

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

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

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?

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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!