[Solved] RadGrid ContextMenu is not working when click on Image button

[Sandeep Trivedi]

Hi

I have a Radgrid with EnableHeaderContextMenu="true" in Radgrid _ItemDataBound event generate imagebutton on run time and add it on header column and also attach javascript in click event given as.

protected void  Radgrid _ItemDataBound(object sender, GridItemEventArgs e)
        {         
            if (e.Item is GridHeaderItem)
            {               
                ImageButton imgbtnContextMenu = new ImageButton();
                imgbtnContextMenu.ID = "imgbtnCMOpen";
                imgbtnContextMenu.ImageUrl = "~/Images/contentmenu.png";
                imgbtnContextMenu.ToolTip = "Click To Open Context Menu";
                imgbtnContextMenu.Attributes.Add("onclick", "ShowMenuOnSearchResultGrid('" + Radgrid.ClientID + "',event);");
                e.Item.Controls[0].Controls.Add(imgbtnContextMenu);
            }          
        }

The Javascript code is given below.

function ShowMenuOnSearchResultGrid(radGrid, event) {
    var RadGrid = $find(radGrid);
    if (window.event) {
        RadGrid.get_headerMenu().show(window.event);
        event.returnValue = false;
        event.cancel = true;
    }
    else {
        RadGrid.get_headerMenu().show(event);       
        event.preventDefault();
    }    
}
When i clicked directly on  imagebutton without clicking any where in header.It shows the context menu with all columns in unchecked state in columns menu and when i checked/unchecked the infant of columns name then radgrid is not refreshed .I want it show checked/unchecked columns in the basis on columns shows in rad grid and also when i click on contextmenu checkbox then it should be refresh the radgrid.

Pls provide me solution as soon as possible.

Thanks
Sandeep Trivedi

[Yavor]

Hello Sandeep,

Basically, for such a setup, it is best to use a standard menu, rather than trying to show the built-in one. You can take an approach similar to this one:

http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandmenu/defaultcs.aspx?product=grid

I hope this suggestion helps.

Regards,
Yavor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sandeep Trivedi]

Hi Yavor,

Thanks for replying.

In case of creating custom context  menu.I have to write more code for hiding and showing radgrid columns then what is user of radGrid ContextMenu. So i want to you give any javascript method or property for working fine in first time click.

Thanks
Sandeep Trivedi

[Veli]

Hello Sandeep,

If you still want to show the header context menu in RadGrid when clicking on an image inside the header cell, here is the event click event handler of your image:

function showMenu(sender, args)
{
    var columns = $find("RadGrid1").get_masterTableView().get_columns();
    for (var i = 0, length = columns.length; i < length; i++)
    {
        if (sender.parentNode == columns[i].get_element())
        {
            var column = columns[i];
            column._onContextMenu(args);
        }
    }
}

You can find a small web page demonstrating this approach. Note, however, that this scenario is not officially supported by RadGrid and we are not responsible for inconsistent behavior as a result of a this approach.

Greetings,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[cds_user]

I have a similar problem. Instead of right clicking on the Header row to show the content menu, I added a LinkButton that says "Hide/Show Columns". When I click the LinkButton  the Content Menu is displayed with all the columns unchecked. When I check a column name, to hide it, nothing happens. However if I right click on the header row and than click the LinkButton, the columns are checked. At this point I can Hide/Show a column via the Linkbutton. I need to use the LinkButton instead of right clicking on the header row to Hide/Show columns. Any help will be appreciated. (see attached screenshot).

[Veli]

Hello mgturner,

As far as I understand your scenario, you should be using the same approach I mentioned in the previous post. Only this case you are using a LinkButton instead of an Image. Is this approach not working for your case?

Sincerely yours,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[cds_user]

My situation is a little different because my LinkButton is not within the RadGrid and I am calling ShowMenuX.

 

<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <script type="text/javascript">
            var gridId;
            function gridCreated(sender, args)
            {
                gridId = sender.get_id();
            }

            function showMenu(sender, args)
            {

                var columns = $find(gridId).get_masterTableView().get_columns();
                for (var i = 0, length = columns.length; i < length; i++)
                {
                    if (sender.parentNode == columns[i].get_element())
                    {
                        var column = columns[i];
                        column._onContextMenu(args);
                    }
                }
            }

            function ShowMenuX()
            {
            var RadGrid = $find("<%=RadGrid1.ClientID %>");
            RadGrid.get_headerMenu().show(window.event);
            }

        </script>
         <asp:LinkButton runat="server" ID="Hide_Show_ID"  Text="Hide/Show Columns"   OnClientClick="ShowMenuX();"></asp:LinkButton>

        <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Vista" Width="800px"
            AutoGenerateColumns="true" EnableHeaderContextMenu="true">
            <ClientSettings>
                <ClientEvents OnGridCreated="gridCreated" />
            </ClientSettings>
        </telerik:RadGrid>
    </div>
    </form>
</body>

 

[cds_user]

I got it to Work by modifying my ShowMenuX javascript and adding the event

            function ShowMenuX(args)
            {
               var RadGrid = $find("<%=RadGrid1.ClientID %>");
               var gridId = RadGrid.get_id();
               var columns = $find(gridId).get_masterTableView().get_columns();
               for (var i = 0, length = columns.length; i < length; i++)
               {
                  var column = columns[i];
                  column._onContextMenu(args);
               }

               RadGrid.get_headerMenu().show(window.event);
            }

         <asp:LinkButton runat="server" ID="Hide_Show_ID"  Text="Hide/Show Columns"   OnClientClick="ShowMenuX(event);"></asp:LinkButton>

[cds_user]

Just FYI, you only need the for loop to execute 1 time instead columns.length because the script will take to long to run on more than columns. In my case I have 20 columns and it took forever, in fact I had to stop the script. Therefore I changed the for loop to 1.

for (var i = 0, length = columns.length; i < 1; i++)