RadContextMenu inside RadGrid does not show up when placing RadGrid inside Panel/div with visible false

Question

Below is the code I am using to show RadContextMenu when right click on RadGrid rows:

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

I followed below link for above implementation: http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/context-menu/defaultcs.aspx

Everything is working fine except when I put RadGrid inside Panel/div and make it visible=false in HTML code and try to make it visible=true on Button click event, RadContextMenu does not show up.

RadContextMenu only shows up when Panel/div are visible.

But its requirement that I have to show the RadGrid only on Button click along with RadcontextMenu.

Please let me know how to hide and show the RadGrid on button click without any issue in data binding as well as in showing RadcontextMenu.

Please somebody reply.

Thanks in advance

try to not use server side just use javascript display: none and display: block because Telerik very sensitive in backend visible.... — Nic, Sep 22 '15 at 06:53

Nic · Accepted Answer · 2015-09-22T08:36:52.907

0

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();
    }
}

ID name wrong

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

ID to "radGridClickedRowIndex"

Copy paste code will never work. Especially in Telerik.

edited Sep 22 '15 at 08:36

answered Sep 22 '15 at 06:58

Nic

1,014
7
15

Thank you for the reply. I want to hide div until I click on button. If I put property display:none in div HTML tag, then how to show this div after button is clicked ? Please reply – timz_123 Sep 22 '15 at 07:02
You can do it in 2 ways..... 1 use a hidden textbox to indicate is close or open.. 2nd you can use Jquery cssclass remove and add to do that – Nic Sep 22 '15 at 07:04
Updated the answer at JSFiddle – Nic Sep 22 '15 at 07:24
I think this will not work with RadGrid. I have to show RadGrid along with data on button click. When I click on button at that time RadGrid data gets updated and shown after I click on button. So when page load I dont want RadGrid to show up. Please let me know if my understanding towards your code is wrong ? – timz_123 Sep 22 '15 at 07:35
First Screw all your javascript you are just copy from the TELERIK SAMPLE WEBSITE WITHOUT EVEN CHANGING IT. Then just put this as the updated answer above – Nic Sep 22 '15 at 08:25
Thank you for the help. Did the above mentioned change suggested by you along with keeping `RadGrid` in div with `visible=false` and inside button `OnClick` event from code behind I am making the div `visible=true`. Issue resolved. Will remember to change the telerik sample codes from next time. Thanks a lot. – timz_123 Sep 22 '15 at 08:46

RadContextMenu inside RadGrid does not show up when placing RadGrid inside Panel/div with visible false

1 Answers1