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

SelectedIndexChanged event of RadGrid

26 Answers 4306 Views

General Discussions

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

26 Answers, 1 is accepted

answered on 13 Oct 2008, 01:41 AM

Hello Hrushikesh,

You can handle the SelectedIndexChanged event by setting an event handler in the RadGrid's OnSelectedIndexChanged event. For this event to fire, the Select command must fire on a row in the RadGrid. Here is a simple example of a RadGrid which fires and handles this event to write out a list of selected items to above the grid on the page.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ 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"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title>RadGrid.SelectedIndexChanged Example</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server" /> 
        
                    <asp:Literal ID="Literal1" runat="server" /> 
        
                    <telerik:RadGrid ID="RadGrid1" runat="server" 
        
                        AutoGenerateColumns="False" 
        
                        DataSourceID="SqlDataSource1" 
        
                        GridLines="None"  
        
                        OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged" > 
        
                        <MasterTableView DataKeyNames="ProductID" DataSourceID="SqlDataSource1"> 
        
                            <Columns> 
        
                                <telerik:GridButtonColumn Text="Select" CommandName="Select" /> 
        
                                <telerik:GridBoundColumn DataField="ProductID" /> 
        
                                <telerik:GridBoundColumn DataField="ProductName" UniqueName="ProductName" /> 
        
                                <telerik:GridBoundColumn DataField="UnitPrice" /> 
        
                                <telerik:GridBoundColumn DataField="UnitsInStock" /> 
        
                            </Columns> 
        
                        </MasterTableView> 
        
                    </telerik:RadGrid> 
        
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
        
                        ConnectionString="<%$ ConnectionStrings:SqlConnectionString %>"  
        
                        SelectCommand="SELECT * FROM [Products]"> 
        
                    </asp:SqlDataSource> 
        
                </form> 
        
            </body> 
        
            </html>

    
            using System; 
        
            using Telerik.Web.UI; 
        
            public partial class _Default : System.Web.UI.Page 
        
            { 
        
                protected void RadGrid1_SelectedIndexChanged(object sender, EventArgs e) 
        
                { 
        
                    var dataItem = RadGrid1.SelectedItems[0] as GridDataItem; 
        
                    if (dataItem != null) 
        
                    { 
        
                        var name = dataItem["ProductName"].Text; 
        
                        Literal1.Text += String.Format("{0}<br/>", name); 
        
                    } 
        
                } 
        
            }

I hope this helps clear things up. If you continue to have questions, please let me know.

Sincerely,
Kevin Babcock

answered on 15 Jul 2010, 01:12 PM

Hello Ashish,

If you are using AJAX, you need to make sure the second RadGrid you are databinding is also updated on the AJAX postback initiated by the first RadGrid. If you are using RadAjaxManager, you need to have an AJAX setting where the first RadGrid updates the second (besides itself). If you employ RadAjaxPanel for asynchronous postbacks, both RadGrids should go into one and the same panel.

Greetings,
Veli
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

answered on 13 Jul 2011, 10:00 PM

This logic isn't working for me. When I click through the rows of the RadGrid, the event isn't fired, but when I navigate to another tab on the same page, it fires. Here's the code as I have it now -

<telerik:RadGrid ID="rgPaymentLedger"

runat="server"

AutoGenerateColumns="False"

AllowSorting="True"

ClientSettings-Selecting-AllowRowSelect="true"

AllowFilteringByColumn="True"

AllowPaging="True"

GridLines="None"

Width="870px"

AllowMultiRowSelection="True"

OnItemDataBound="rgPaymentLedger_ItemDataBound"

OnNeedDataSource="rgPaymentLedger_NeedDataSource"

OnDataBound="rgPaymentLedger_DataBound"

GroupingSettings-CaseSensitive="false"

OnSelectedIndexChanged="rgPaymentLedger_ItemChanged"

Skin="Windows7" Height="358px" >

protected void rgPaymentLedger_ItemChanged(object sender, EventArgs e)

{

var dataItem = rgPaymentLedger.SelectedItems[0] as GridDataItem;

if (dataItem != null)

{

var name = dataItem["BillID"].Text;

}

Am I missing something?

answered on 10 Feb 2012, 09:08 PM

Princy,

Thanks that did fix the issue I had with the grid mentioned in the post.

I'm now working on another project and trying to use this code as it is in the initial post. I am getting to the row click event I created, but the selected dataitems in the grid are empty -

Here's the markup

<telerik:RadGrid

ID="DocumentsForSupervisorReviewGrid"

Skin="Windows7"

runat="server"

Width="790px"

GridLines="None"

AutoGenerateColumns="False"

AllowSorting="True"

AllowFilteringByColumn="True"

AllowMultiRowEdit="false"

AllowPaging="True"

GroupingSettings-CaseSensitive="false"

PagerStyle-AlwaysVisible="true"

EnableLinqExpressions="False"

ClientSettings-EnablePostBackOnRowClick="true"

OnSelectedIndexChanged="DocumentsForSupervisorReviewGrid_ItemChanged">

<MasterTableView>

<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn HeaderText="Name"

DataField="FileName">

<HeaderStyle Wrap="False" Width="200px"></HeaderStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="RepositoryID"

FilterControlAltText="Filter column1 column" HeaderText="Repository ID"

UniqueName="column1">

<HeaderStyle Width="90px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="DocumentDate"

FilterControlAltText="Filter column column" HeaderText="Date"

UniqueName="column">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Status"

DataField="DocumentStatus">

<HeaderStyle Wrap="False"></HeaderStyle>

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

<PagerStyle AlwaysVisible="True" />

</MasterTableView>

<GroupingSettings CaseSensitive="False" />

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="True" EnableDragToSelectRows="false"

UseClientSelectColumnOnly="True" />

<Resizing ClipCellContentOnResize="False" />

</ClientSettings>

<PagerStyle AlwaysVisible="True" />

<FilterMenu EnableImageSprites="False"></FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Windows7"></HeaderContextMenu>

</telerik:RadGrid>

and here is the code behind

protected void DocumentsForSupervisorReviewGrid_ItemChanged(object sender, EventArgs e)

{

var dataItem = DocumentsForSupervisorReviewGrid.SelectedItems[0] as GridDataItem;

if (dataItem != null)

{

}

answered on 07 Sep 2012, 06:32 AM

Hi i am Amit

I have try this code and such type of code on my project but always one error occur:-
"Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index" .
So how can solve this problem.
MY Code shown here:-
<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" GridLines="None" ShowStatusBar="True"
                         AllowPaging="True" onneeddatasource="RadGrid1_NeedDataSource" onselectedindexchanged="RadGrid1_SelectedIndexChanged">
                        <ClientSettings Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true">


                        </ClientSettings>
                        <MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="false" DataKeyNames="empid" ClientDataKeyNames="empid,empname">
                            <Columns>
                                 <telerik:GridBoundColumn DataField="empid" HeaderText="Emp ID" UniqueName="empid">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="empname" HeaderText="Emp Name" UniqueName="empname">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="empdob" HeaderText="Emp Dob" UniqueName="empdob">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="city" HeaderText="City" UniqueName="city">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="empjoindate" HeaderText="Emp JDate" UniqueName="empjoindate">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="empsalary" HeaderText="Emp Sal" UniqueName="empsalary">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="compdesig" HeaderText="Emp designation" UniqueName="comdpesig">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="passno" HeaderText="Passpotr" UniqueName="passno">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="pfamount" HeaderText="Emp PF Amount" UniqueName="pfamount">
                                    </telerik:GridBoundColumn>


                            </Columns>
                        </MasterTableView>
                    </telerik:RadGrid>
---------------------------------------------------------------
protected void RadGrid1_SelectedIndexChanged(object sender, EventArgs e)
   {
   GridDataItem item = (GridDataItem)RadGrid1.SelectedItems[0];
        if (item != null)
        {

TableCell cell = (TableCell)item["empid"];
            string str= cell.Text;
        }
}

answered on 12 Sep 2012, 07:58 AM

RadGridSelectIndexChanged.zip

Hello Amit,

I prepared a small sample and attached it to this forum post. In the sample you will see two RadGrids with the code that you provided and two ways to access the data in selected row which are suggested in this forum. Give it a try and let me know how it differs from your real setup.

All the best,
Kostadin
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 31 Jan 2013, 07:10 AM

Hi,
i am using telerik rad grid with RadAjaxManager and i have a requirement on which on selection of a row i have to display information of that selected record in a html table just below that grid.i am doing this with OnSelectedIndexChanged.
My problem is that on row select RadAjaxManager is preventing postback and so OnSelectedIndexChanged event is fired but i am not able to display selected record's information.

below is my aspx code:

<telerik:RadAjaxManager ID="tlkRadAjaxMgr" runat="server" DefaultLoadingPanelID="tlkDefaultLoadingPanel">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="rg_ViewTickets">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="rg_ViewTickets" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="tlkRadAjaxLoadingPanel" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadGrid ID="rg_ViewTickets" runat="server" PageSize="12" AllowPaging="true" ShowGroupPanel="true" ShowStatusBar="true"
AllowSorting="true" AutoGenerateColumns="false" Width="100%" OnSelectedIndexChanged="rgViewTickets_SelectedIndexChanged"
OnItemCommand="rgViewTickets_ItemCommand" OnNeedDataSource="rgViewTickets_NeedDataSource" ToolTip="Click here to view details">
<MasterTableView Width="100%">
<Columns>
<telerik:GridDateTimeColumn HeaderText="Created On" DataFormatString="{0:MM/dd/yyyy}"
SortExpression="CreatedOn" DataField="CreatedOn" FilterListOptions="VaryByDataType">
</telerik:GridDateTimeColumn>
<telerik:GridTemplateColumn HeaderText="Notes" ItemStyle-HorizontalAlign="Center"
HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:ImageButton ID="imgAnnotation" runat="server" AlternateText="Note Icon" ImageUrl='<%#((bool) Eval("isContainAnnotions"))?"~/Image/View.png" : "~/Image/note.png" %>'
CommandName="ViewAnnotations" ToolTip='<%#((bool)Eval("isContainAnnotions"))?"View notes" : "Create notes" %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
<ClientSettings EnablePostBackOnRowClick="true">
<Selecting AllowRowSelect="true" />
</ClientSettings>
</telerik:RadGrid>

Please help me on this......

answered on 05 Feb 2013, 08:13 AM

SelectedIndexChanged.zip

Hi Shweta,

Note that you have to update the control which you change as well in order to display the information. Check out the attached sample project where is demonstrated how you can achieve that.

Regards,
Kostadin
the Telerik team

answered on 07 Feb 2013, 09:47 AM

Hi Kostadin,

Thanks for that code.. i have used that in my app.

On the same app i have another problem please help me on this...

on button click i am updating a record in database and after successful update i want the grid also to be updated without postback.
i have tried with Rebind() and DataBind() but both r not working for me.
also i want to specify that i am using advance data binding (NeedDataSource).

<telerik:RadAjaxManager ID="tlkRadAjaxMgr" runat="server" DefaultLoadingPanelID="tlkRadAjaxLoadingPanels">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="rg_ViewTickets">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="rg_ViewTickets" />
<telerik:AjaxUpdatedControl ControlID="btnUpdate" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>

answered on 11 Feb 2013, 08:11 AM

Hello Shweta,

Thank you for getting back to us.

Note that you should never call DataBind() when using advanced data-binding through NeedDataSource. Instead DataBind() you have to call Rebind(). Additionally you have to set the button to update the grid. Check out the following code snippet.

<telerik:AjaxSetting AjaxControlID="Button1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rg_ViewTickets" />

</UpdatedControls>

</telerik:AjaxSetting>

All the best,
Kostadin
the Telerik team

answered on 12 Feb 2013, 11:36 AM

Hi All..
I am using RadAjaxManager and RadAjaxLoadingPanel with RadGrid. On grid column i have asp linkbutton and on that link button click i am calling one javascript function..
everything is working fine but on that link button click i am not able to show loading panel and also post back occurs :(
below is my code :

ajax setting is :
<telerik:AjaxSetting AjaxControlID="lnkbtnDownload">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="rg_Attachments" LoadingPanelID="tlkRadAjaxLoadingPnl" />
</UpdatedControls>
</telerik:AjaxSetting>
On Grid i have asp link button on GridTemplateColumn like:

<telerik:GridTemplateColumn HeaderText="Download">
<ItemTemplate>
<asp:LinkButton ID="lnkDownload" runat="server" Text="Download" OnClientClick="return downloadpdf(id);"
ForeColor="Blue"></asp:LinkButton>
</ItemTemplate>
</telerik:GridTemplateColumn>

and this is my javascript function:
<script language="javascript" type="text/javascript">
function downloadpdf(id) {
var annid = id.replace("lnkDownload", "annId");
window.location = "DownloadAttachment.ashx?id=" + document.getElementById(annid).value;
return false;
}
</script>

Please help........

answered on 29 Nov 2014, 06:31 PM

That won't work if you can select more than one row. It tells you all the rows selected, but not the one you just selected. I've been using the last selected item in the collection, but I'm not sure if that's always accurate.

The real problem is that the EventArg is a generic one, which tells me that you guys never really finished this event handler. What is needed is a "SelectedIndexChangedEventArgs" object that would track (amongst other things), the previous and newly selected indexes. That can't be that hard to do. In fact, would you folks there at Telerik mind showing how to create and wire up a custom version of "SelectedIndexChangedEventArgs" . I'm sure many users would be appreciative.

Tommy Heath