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

Selecting Detail Item Template

3 Answers 53 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 1
Gary asked on 30 Sep 2016, 09:29 AM

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

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 04 Oct 2016, 02:33 PM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Gary
Top achievements
Rank 1
answered on 04 Oct 2016, 02:37 PM

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

0
Viktor Tachev
Telerik team
answered on 07 Oct 2016, 10:50 AM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Grid
Asked by
Gary
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Gary
Top achievements
Rank 1
Share this question
or