Need row index when button clicked in Hierarchical grid

[Charles]

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!!!

 

[Attila Antal]

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