Selecting Detail Item Template

4 posts, 0 answers
  1. Gary
    Gary avatar
    6 posts
    Member since:
    Oct 2012

    Posted 30 Sep Link to this post

    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

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 04 Oct Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gary
    Gary avatar
    6 posts
    Member since:
    Oct 2012

    Posted 04 Oct in reply to Viktor Tachev Link to this post

    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

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 07 Oct Link to this post

    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.
Back to Top