Getting Client Side Grid Column Values

[Jeff Grol]

This doesn't seem like it should be that difficult but I can't figure out how to do it.   I have a grid with an ImageButton template column.   When the ImageButton is clicked, I want to access the grid and retrieve certain column key values from that row on the client side.  The row is not selected, so the grid.get_masterTableView().get_selectedItems()[0] does not work.    How can I do this?

Thanks,
Jeff G.

[Princy]

Hello Jeff,

In order to achieve this, access the ImageButton from code behind and attach 'onClientClick' event to the ImageButton by passing the ItemIndex to the event handler. In the event handler you can access the corresponding row and DataKeyValue by using this ItemIndex. Check out the sample code below.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" OnItemCreated="RadGrid1_ItemCreated" . . . . . . .
    <MasterTableView DataKeyNames="CategoryID" ClientDataKeyNames="CategoryID". . . . . .
        <Columns>
            . . . . . . . .
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <asp:ImageButton ID="ImageButton1" runat="server" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            ImageButton imgButton = (ImageButton)item.FindControl("ImageButton1");
            imgButton.OnClientClick = "imgButtonClick('" + item.ItemIndex + "');";
        }
    }

Java Script:

<script type="text/javascript">
  function imgButtonClick(index)
      {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems()[index];
        var keyValue = row.getDataKeyValue("CategoryID");
      }
</script>

Thanks,
Princy.