Telerik RadGrid : Cant have Selected Item Index

Before i opend the issue here, i searched and couldnt find an issue like mine. The issue is, i am building a web application and using a telerik radgrid to view records. till here no problem for viewing and yet when i click a row or select a row i am tring to have row index or selected item index no but instead of that in selectedIndexChanged event of gridview an error occurs like "index was out of range". Here you can see the aspx part in the below and also c# code part.

    <telerik:RadGrid ID="groupList" runat="server" AllowFilteringByColumn="True" AllowPaging="True" CellSpacing="0" GridLines="None" Skin="Metro" 
        OnSelectedIndexChanged="groupList_SelectedIndexChanged" MasterTableView-ClientDataKeyNames="Id" MasterTableView-DataKeyNames="Id">
        <ClientSettings EnablePostBackOnRowClick="True">
            <Selecting AllowRowSelect="True"  />
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        </ClientSettings>
        <MasterTableView DataKeyNames="Id">
        <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

        <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
        <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>

        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
        <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>

            <Columns>
                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="SelectRow" FilterControlAltText="Filter uniqueName column"
                      UniqueName="uniqueName">
                </telerik:GridButtonColumn>
            </Columns>

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

        <FilterMenu EnableImageSprites="False"></FilterMenu>
    </telerik:RadGrid>

and this is the c# part

protected void groupList_SelectedIndexChanged(object sender, EventArgs e)
{
    var dataItem = groupList.SelectedItems[0] as GridDataItem;
    if (dataItem != null)
    {
        var name = dataItem["Id"].Text;
    } 
}

and for here i have the error. Please help me on this and thanks in advance.

Solution

You need to determine if you want to use the telerik built in "RowSelect" functionality, or have them push a command column button. It doesn't make sense to do both.

The RowSelect will allow them to select anywhere in the row to fire the "groupList_SelectedIndexChanged" event. If that is all you want, I would delete:

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="SelectRow" FilterControlAltText="Filter uniqueName column" UniqueName="uniqueName">
</telerik:GridButtonColumn>

and keep the other code you have in the markup. If it still doesn't work you can try changing the way you are accessing the selected data, for example:

protected void groupList_SelectedIndexChanged(object sender, EventArgs e)
{
    var dataItem = groupList.SelectedItems[0].OwnerTableView.DataKeyValues[groupList.SelectedItems[0].ItemIndex]["id"];
}

Either way, I would set a breakpoint on the event, and "watch" the data you are trying to access, make sure the "SelectedItems" is not null. Watching the values while debugging will open the door to happiness and peace.

As an FYI, I don't believe you need the "ClientDataKeyNames" unless you are getting the value from the client-side using the getDataKeyValue(colName) method. But that shouldn't cause you problems here...