Need row index when button clicked in Hierarchical grid

2 posts, 1 answers
  1. Charles
    Charles avatar
    3 posts
    Member since:
    Apr 2011

    Posted 06 Dec 2017 Link to this post

    I need to find the row index of a radButton clicked inside a Hierarchical grid.  When the user clicks the radButton, the row of which the button is located will get selected so that a context menu can then be built depending on the row selected.

    Heres my function

    function BuildDetailRowContextMenu(sender, args) {
    var grid = $find("<%=rgDetail.ClientID%>").get_masterTableView();

    var gridSelectedItems = grid.get_selectedItems();
    var rowIndex = sender.get_element().parentNode.parentNode.rowIndex;
    var sectionRowIndex = sender.get_element().parentNode.parentNode.sectionRowIndex;

    var test = args.get_itemIndexHierarchical();

    grid.selectItem(grid.get_dataItems()[1].get_element(), true);

    var selectedRow = grid.get_selectedItems()[0];
    var QuoteDetailID = grid.getCellByColumnUniqueName(selectedRow, "QuoteDetailID").innerHTML;
    var Suggested = grid.getCellByColumnUniqueName(selectedRow, "Suggested").getElementsByTagName("input")[0].checked;
    var menu = $find("<%=menuDetail.ClientID%>");
    if (Suggested)
    menu.findItemByValue("Suggest").set_text("Un-Suggest");
    else
    menu.findItemByValue("Suggest").set_text("Suggest");
    if (grid.getCellByColumnUniqueName(selectedRow, "ChangeQuantity").innerHTML == "true") {
    menu.findItemByValue("Quantity").show();
    if (Suggested)
    menu.findItemByValue("SuggestedQuantity").hide();
    else
    menu.findItemByValue("SuggestedQuantity").show();
    }
    else {
    menu.findItemByValue("Quantity").hide();
    menu.findItemByValue("SuggestedQuantity").hide();
    }
    if (grid.getCellByColumnUniqueName(selectedRow, "ChangePrice").innerHTML == "true") {
    menu.findItemByValue("Price").show();
    menu.findItemByValue("PriceType").show();
    }
    else {
    menu.findItemByValue("Price").hide();
    menu.findItemByValue("PriceType").hide();
    }

     

     

    Here is the markup:

    <ic:SmartGrid ID="rgDetail" runat="server" Skin="Windows7" CellSpacing="0" GridLines="none" ShowHeader="True"
                                                    AutoGenerateColumns="false" ItemStyle-VerticalAlign="Top" AlternatingItemStyle-VerticalAlign="Top">
                                                    <MasterTableView CommandItemDisplay="None" HierarchyLoadMode="ServerBind" DataKeyNames="QuoteDetailID" Name="Detail">
                                                        <GroupByExpressions>
                                                            <telerik:GridGroupByExpression>
                                                                <SelectFields>
                                                                    <telerik:GridGroupByField FieldName="ModelName" />
                                                                </SelectFields>
                                                                <GroupByFields>
                                                                    <telerik:GridGroupByField FieldName="ModelSortOrder"></telerik:GridGroupByField>
                                                                </GroupByFields>
                                                            </telerik:GridGroupByExpression>
                                                        </GroupByExpressions>
                                                        <Columns>
                                                            <telerik:GridTemplateColumn ItemStyle-Width="18">
                                                                        <ItemTemplate>
                                                                            <telerik:RadButton EnableSplitButton="true" ID="SplitButton" AutoPostBack="false"
                                                                                runat="server" Text="" OnClientClicked="BuildDetailRowContextMenu"  >
                                                                            <Image ImageUrl="~/images/icons/cog.png" IsBackgroundImage="true"/>
                                                                            </telerik:RadButton>
                                                                        </ItemTemplate>
                                                                    </telerik:GridTemplateColumn>
                                                           
                                                               
                                                          
                                                        </Columns>
                                                        <DetailTables>
                                                            <telerik:GridTableView runat="server" Name="Components" AllowFilteringByColumn="False" Caption="Components" DataKeyNames="ParentID">
                                                                <Columns>
                                                                    <telerik:GridTemplateColumn ItemStyle-Width="18">
                                                                        <ItemTemplate>
                                                                            <telerik:RadButton EnableSplitButton="true" ID="SplitButton" AutoPostBack="false"
                                                                                runat="server" Text="" Image-ImageUrl="~/images/icons/cog.png" Image-IsBackgroundImage="true"     OnClientClicked="BuildDetailRowContextMenu"  >
                                                                            </telerik:RadButton>
                                                                        </ItemTemplate>
                                                                    </telerik:GridTemplateColumn>
                                                                    <%--<telerik:GridTemplateColumn ItemStyle-Width="18">
                                                                <ItemTemplate>
                                                                    <telerik:RadButton EnableSplitButton="true" ID="SplitButton" AutoPostBack="false"
                                                                        runat="server" Text="" Image-ImageUrl="~/images/icons/cog.png" OnClientClicked="BuildDetailRowContextMenu" >
                                                                    </telerik:RadButton>
                                                                </ItemTemplate>
                                                            </telerik:GridTemplateColumn>--%>
                                                                   
                                                                </Columns>
                                                            </telerik:GridTableView>
                                                        </DetailTables>
                                                    </MasterTableView>
                                                    <ClientSettings Selecting-AllowRowSelect="true" ClientEvents-OnRowContextMenu="DetailRowContextMenu"/>
                                                </ic:SmartGrid>

     

     

     

    Any help would be greatly appreciated!!!

     

  2. Answer
    Attila Antal
    Admin
    Attila Antal avatar
    384 posts

    Posted 12 Dec 2017 Link to this post

    Hi Charles,

    One approach to get the row index (and more) for the row in which the button is residing, by attaching OnClick event together with the desired information.

    Consider the following Markup for RadGrid (ensure that the tables have names, to easily distinguish them)
    <telerik:RadGrid ... OnItemDataBound="rgDetail_ItemDataBound">
        <MasterTableView ... DataKeyNames="ID" Name="MasterTable">
            <Columns>
                <telerik:GridTemplateColumn ...>
                    <ItemTemplate>
                        <telerik:RadButton ... ID="SplitButton" AutoPostBack="false"></telerik:RadButton>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
            <DetailTables>
                <telerik:GridTableView Name="DetailTable" DataKeyNames="ID">
                    <Columns>
                        <telerik:GridTemplateColumn ...>
                            <ItemTemplate>
                                <telerik:RadButton ... ID="RadButton1" AutoPostBack="false"></telerik:RadButton>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </telerik:GridTableView>
            </DetailTables>
        </MasterTableView>
    </telerik:RadGrid>

    In the Code behind, attach the OnClick event to all the buttons and passing the Table Name, row index and the DataKey value of the data field ID.
    protected void rgDetail_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem Item = (GridDataItem)e.Item;
     
            if (Item.FindControl("RadButton1") != null)
            {
                RadButton btn = (Item.FindControl("RadButton1") as RadButton);
                btn.Attributes.Add("OnClick", "btnClick('" + Item.OwnerTableView.Name + "', '" + Item.ItemIndex + "', '" + Item.GetDataKeyValue("ID") + "');");
            }
        }
    }

    Finally, the JavaScript code to handle the client side part:
    function btnClick(tableName, rowIndex, dataKey) {
        console.log("Table: " + tableName + ", RowIndex: " + rowIndex + ", Datakey (ID): " + dataKey);
    }

    Attached you can find a basic sample demonstrating this scenario.

    Please give it a try and see if that works for you.

    Kind Regards,
    Attila Antal
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top