[Solved] Return cell.innerHTML (row value) when using card view

[Jason]

Hi,

I'm using a RadGrid in Card View as shown in your demo's Grid CardView Demo.  This works great and gives a nice look to my application.  But I'm struggling to return the clicked row's data key.  My normal approach would be to expose the unique cells innerhtml but with the itemtemplate I'm getting the full cardview html.

<telerik:RadGrid ID="InstancesGrid" runat="server"  GridLines="Horizontal"
    OnNeedDataSource="InstancesGrid_OnNeedDataSource" Height="50%">
    <MasterTableView AutoGenerateColumns="False" CellSpacing="-1" DataKeyNames="instance_id">
        <RowIndicatorColumn>
            <HeaderStyle Width="20px" />
        </RowIndicatorColumn>
        <ExpandCollapseColumn>
            <HeaderStyle Width="20px" />
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridBoundColumn DataField="application_id" DataType="System.Int32"
                HeaderText="application_id" SortExpression="application_id"
                UniqueName="application_id" Visible="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="instance_id" DataType="System.Int32"
                HeaderText="Instance ID" ReadOnly="True" SortExpression="instance_id"
                UniqueName="instance_id" Visible="true">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="instance_name" HeaderText="Instance Name"
                SortExpression="instance_name" UniqueName="instance_name">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="testing_environment_id"
                DataType="System.Int32" HeaderText="Testing Environment"
                SortExpression="testing_environment_id" UniqueName="testing_environment_id">
            </telerik:GridBoundColumn>
        </Columns>
        <ItemTemplate>
            <asp:Image ID="IconImage" runat="server" style="float: left;" width="50px" Height="54px" ImageUrl="Images/InstancesGrid/icon.gif" />
            <table>
                <tr>
                    <td><span>Name:</span></td>
                    <td><%#Eval("instance_name")%></td>
                </tr>
                <tr>
                    <td><span>Testing Environment:</span></td>
                    <td><%#Eval("testing_environment_id")%></td>
                </tr>
            </table>
        </ItemTemplate>
    </MasterTableView>
    <ClientSettings Selecting-AllowRowSelect="true" EnableRowHoverStyle="true" ClientEvents-OnRowClick="InstancesGrid_OnRowClick" />
</telerik:RadGrid>

        function InstancesGrid_OnRowClick(sender, args) {

            var index = args.get_itemIndexHierarchical();
            var MasterTable = sender.get_masterTableView();
            MasterTable.selectItem(MasterTable.get_dataItems()[index].get_element(), true);

            var selectedRows = MasterTable.get_selectedItems();

            var row = selectedRows[0];
            alert(row);
            var cell = MasterTable.getCellByColumnUniqueName(row, "instance_id");
            alert(cell);
            var instance_id = cell.innerHTML;
            alert(instance_id);

        }

The alert(instance_id) returns the full itemtemplate html :-

<IMG id=InstancesGrid_ctl--_ctl06_iconImage ....>

All I want is the data key (instance_id) for the record in the selected row.

Thanks
Jase

[Nikolay Rusev]

Hello Jason,

You can try setting MasterTableView.ClientDataKeyNames same as DataKeyNames and use RadGrid client API to extract DataItem key values on client:

$find("My_RadGrid_ClientID").get_masterTableView().get_dataItems()[someIndex].getDataKeyValue()

client api - getDataKeyValue()

All the best,
Nikolay
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.