将 RadGrid 放置在 Panel/div 内且可见 false 时，RadGrid 内的 RadContextMenu 不显示

Question

下面是我在右击RadGrid 行时用来显示RadContextMenu 的代码：

HTML：

    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock3">
            <script type="text/javascript" src="~/JavaScript/ClientEventScript.js"></script>
            <script type="text/javascript">
                ; (function ($, undefined) {
                    var menu;
                    var grid;
                    var demo = window.demo = {};

                    window.onload = function () {
                        grid = $telerik.findControl(document, "rgInvoice");
                        menu = $telerik.findControl(document, "RadMenu1");
                    }

                    demo.ShowColumnHeaderMenu = function (event, columnName) {

                        var columns = grid.get_masterTableView().get_columns();
                        for (var i = 0; i < columns.length; i++) {
                            if (columns[i].get_uniqueName() == columnName) {
                                columns[i].showHeaderMenu(event, 75, 20);
                            }
                        }
                    };

                    demo.RowContextMenu = function (sender, eventArgs) {
                        var evt = eventArgs.get_domEvent();
                        if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                            return;
                        }

                        var index = eventArgs.get_itemIndexHierarchical();
                        document.getElementById("radGridClickedRowIndex").value = index;

                        sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

                        menu.show(evt);
                        evt.cancelBubble = true;
                        evt.returnValue = false;

                        if (evt.stopPropagation) {
                            evt.stopPropagation();
                            evt.preventDefault();
                        }
                    };
                })($telerik.$);
            </script>
        </telerik:RadCodeBlock>

<div id="divGrid" runat="server" visible="false">
    <%--<asp:Panel ID="Panel1" runat="server" Visible="false">--%>

    <telerik:RadGrid ID="rgInvoice" runat="server" AllowSorting="True" AutoGenerateColumns="false"
                            EmptyDataText="No record available." OnNeedDataSource="rgInvoice_NeedDataSource" Visible="true"
                            AllowAutomaticInserts="False" AllowAutomaticUpdates="False" AllowAutomaticDeletes="true" 
                            EnableEmbeddedSkins="False" ImagesPath="~/App_Themes/MetroRed/Grid" Skin="MetroRed" GridLines="Both"
            EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true">

                            <mastertableview ShowHeadersWhenNoRecords="true" autogeneratecolumns="false" InsertItemDisplay="Top"
                            InsertItemPageIndexAction="ShowItemOnCurrentPage" ShowFooter="True" CommandItemDisplay="Top" EnableColumnsViewState="false">

                                <CommandItemSettings ShowAddNewRecordButton="false" />
                                <Columns>                   
                                   <telerik:GridBoundColumn HeaderText="SP Id" DataField="SPfoID" SortExpression="SPfoID">
                                   </telerik:GridBoundColumn>

                                   <telerik:GridBoundColumn HeaderText="Direct Cost" DataField="DCIDescription" SortExpression="DCIDescription">
                                   </telerik:GridBoundColumn>
                                   <telerik:GridBoundColumn HeaderText="Business Unit" DataField="BUName" SortExpression="BUName">
                                   </telerik:GridBoundColumn>
                                   <telerik:GridBoundColumn HeaderText="Status" DataField="Status" SortExpression="Status">
                                   </telerik:GridBoundColumn>

                                </Columns>
                                           <GroupByExpressions>
                                                <telerik:GridGroupByExpression>
                                                    <GroupByFields>
                                                        <telerik:GridGroupByField FieldName="BusinessUnit" SortOrder="Ascending" />
                                                    </GroupByFields>
                                                    <SelectFields>
                                                        <telerik:GridGroupByField FieldName="BusinessUnit" HeaderText="Business Unit" />
                                                    </SelectFields>
                                                </telerik:GridGroupByExpression>
                                            </GroupByExpressions>
                            </MasterTableView>
             <ClientSettings>
               <ClientEvents OnRowContextMenu="demo.RowContextMenu" />
               <Selecting AllowRowSelect="true" />
               <Scrolling AllowScroll="false"></Scrolling>
            </ClientSettings>
        </telerik:RadGrid>

    <input type="hidden" id="Hidden1" name="radGridClickedRowIndex" />

    <telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnItemClick="RadMenu1_ItemClick"
        EnableRoundedCorners="true" EnableShadows="true">
        <Items>
            <telerik:RadMenuItem Text="Add">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Edit">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Delete">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadContextMenu>

 <%--</asp:Panel>--%>
    </div>

C#：

protected void btnInvoice_Click(object sender, EventArgs e)
    {
        divGrid.Visible = true;
        //Panel1.Visible = true;
        btnInvoice.Enabled = false;
    }

    #region Invoice
    protected void rgInvoice_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        try
        {
            _dtInvoice = SDM.Invoice.GetInvoice(_SPID);
            rgInvoice.DataSource = _dtInvoice;
        }
        catch (Exception ex)
        {
        }
    }
    #endregion

    #region RadMenu
    protected void RadMenu1_ItemClick(object sender, RadMenuEventArgs e)
    {
        int radGridClickedRowIndex;

        radGridClickedRowIndex = Convert.ToInt32(Request.Form["radGridClickedRowIndex"]);

        switch (e.Item.Text)
        {
            case "Edit":
                rgInvoice.Items[radGridClickedRowIndex].Edit = true;
                rgInvoice.Rebind();
                break;
            case "Add":
                rgInvoice.MasterTableView.IsItemInserted = true;
                rgInvoice.Rebind();
                break;
            case "Delete":
                rgInvoice.MasterTableView.PerformDelete(rgInvoice.Items[radGridClickedRowIndex]);
                break;
        }
    }
    #endregion

我按照以下链接进行上述实施： http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/context-menu/defaultcs.aspx

一切正常，除非我将 RadGrid 放入 Panel/div 并在 HTML 代码中使其为 visible=false 并尝试在按钮单击事件中使其为 visible=true，RadContextMenu 不显示。

RadContextMenu 仅在 Panel/div 可见时出现。

但它要求我必须仅在按钮单击时显示RadGrid 以及RadcontextMenu。

请告诉我如何在单击按钮时隐藏和显示 RadGrid，而数据绑定和显示 RadcontextMenu 不会出现任何问题。

请有人回复。

提前致谢

Answer 1

function RowContextMenu(sender, args) {
    var menu = $find("<%=RadMenu1.ClientID %>");
    var evt = args.get_domEvent();

    if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
        return;
    }

    var index = args.get_itemIndexHierarchical();
    document.getElementById("radGridClickedRowIndex").value = index;

    sender.get_masterTableView().selectItem(sender.get_masterTableView().
    get_dataItems()[index].get_element(), true);
    menu.show(evt);
    evt.cancelBubble = true;
    evt.returnValue = false;
    if (evt.stopPropagation) {
        evt.stopPropagation();
        evt.preventDefault();
    }
}

身份证名错误

<input type="hidden" id="Hidden1" name="radGridClickedRowIndex" />

ID 到 "radGridClickedRowIndex"

复制粘贴代码永远不会起作用。尤其是在 Telerik。