Selecting Detail Item Template

[Gary]

Hi,

I am trying to have a grid where the detail item template is clickable/selectable as one with the columns relating to it.

If you take the demo http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/rows/detailitemtemplate/defaultcs.aspx as an example, then I would like to click the row with the pictures and have the main row selected along with the detail item row. Effectively the row and detail item row should behave as one.

Can anyone please help?

Gary

[Viktor Tachev]

Hello Gary,

In order to select the item when the image is clicked first you need to ensure that selection for RadGrid is enabled. For this you should set the ClientSettings-Selecting-AllowRowSelect property to true.

Then, you should attach handler for the client-side click event of the Image. You can do this in the ItemDataBound handler for the grid and pass the item index as argument.

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = e.Item as GridDataItem;
        var image = dataItem.DetailTemplateItemDataCell.FindControl("CategoryImage") as Image;

        image.Attributes.Add("onclick", string.Format("onClickHandler({0})", dataItem.ItemIndexHierarchical));

    }
}

The actual JavaScript handler where you would select the item would look similar to the following:

function onClickHandler(itemIndex) {
    var grid = $find("<%= RadGrid1.ClientID %>");
    var masterTable = grid.get_masterTableView();
    masterTable.clearSelectedItems();
    masterTable.get_dataItems()[itemIndex].set_selected(true);

}

Regards,
Viktor Tachev
Telerik by Progress

[Gary]

Thank you but I would like to attach the click event to the detail item template row itself: not the image. Is this also possible using the approach you took?

Gary

[Viktor Tachev]

Hello Gary,

You can handle the GridCreated event and attach handler for the click event of the detail row. Then, you can get reference of the corresponding dataItem and set it as selected. The modified code would look similar to the following:

<DetailItemTemplate>
    <asp:Table ID="ProductsTable" runat="server" CssClass="ProductTable">
        <asp:TableRow Height="72px" CssClass="detailTemplateRow">
            <asp:TableCell>
                <asp:Image ID="CategoryImage" runat="server" AlternateText="CategoryImage" CssClass="CategoryImage" />
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
</DetailItemTemplate>

function gridCreated(sender, args) {

    $telerik.$(sender.get_element()).on("click", "tr.detailTemplateRow", function (e) {

        var grid = $find("<%= RadGrid1.ClientID %>");
        var masterTable = grid.get_masterTableView();

        var detailRow = $telerik.$(this.parentElement).closest("tr");
        var parentItem = detailRow.prev()[0];
        var itemIndex = parentItem.id.split("__")[1];

        masterTable.clearSelectedItems();
        masterTable.get_dataItems()[itemIndex].set_selected(true);
    });
}

Note that in this case the logic is implemented entirely on the client-side.


Regards,
Viktor Tachev
Telerik by Progress