radcontextmenu with radListView in mega drop down ajax not working properly

[Fandy Backers]

Hi,

Well, i have a problem with the radcontextmenu. Inside an ItemTemplate i use a RadListView to list some contracts i can choose from.
This radcontextmenu i add on an imageclick. It shows up when i click on a image. The folowing i added to the webusercontrol.

function showMenuC(e) {
             var contextMenu1 = $find("<%= RadContextC1.ClientID %>");
             contextMenu1.showAt(20, 135);

             $telerik.cancelRawEvent(e);
}

 

<asp:ImageButton ID="imgContractBtn1" Visible="true" OnClientClick="showMenuC(event);" ImageUrl="/images/someimage.png" runat="server" />

<Telerik:RadContextMenu id="RadContextC1" runat="server" EnableViewState="false"

    EnableRoundedCorners="true" EnableShadows="true" OnClientItemOpened="itemOpened" >

 

    <Items>

        <telerik:RadMenuItem CssClass="Contracts" text="ContractSelectie">

            <ItemTemplate>

                <div id="CatWrapper" class="Wrapper">

                     

                    <telerik:RadListView ID="RLVContractSelectie1" runat="server"

                        AllowPaging="false"

                        EnableAjaxSkinRendering="true" RegisterWithScriptManager="true" EnableViewState="false"

                        OnItemDataBound="RLVContracts_ItemDataBound"

                        GroupItemCount="1"

                        AllowMultiItemSelection="false" onneeddatasource="RLVContracts_NeedDataSource">

                        <ItemTemplate>

                            <fieldset class="myClass">

                                <div id="div-image">

                                    <asp:ImageButton ID="Image1" runat="server" SkinID="imgNoPicture" CssClass="imageStyle" />

                                </div>

                                <div id="textbox">

                                    some text

                                </div>

                                <div id="div-masker">

                                    <asp:ImageButton ID="imgMasker" CommandName="Select" CommandArgument='<%#DataBinder.Eval(Container.DataItem, "intContractPID")%>' runat="server" SkinID="imgMasker" CssClass="imageStyleMasker" />

                                </div>

                            </fieldset>

                        </ItemTemplate>

                    </telerik:RadListView>

                </div>

            </ItemTemplate>

        </telerik:RadMenuItem>

    </Items>

</Telerik:RadContextMenu>

Ok, I explain now what problem i got now, and what i allready tried to get it work properly.

First thing, i have everything placed in a radAjaxPanel. When i click my image (imgContractBtn1), it shows the contextmenu! It has the radListView filled with some contracts with images and some text on it. Then when i click the imgButton (imgMasker), it fires the onitemcommand of the RadListView and it postback. So my selected item is selected and everything works great, except ajax. It loads my screen with everything what should work. Everything works great, except for the ajax thing.

so, when i try putting on a radajaxpanel inside the radmenu itemtemplate of the radcontextmenu, Ajax works fine, but the contextmenu stays open with all the items of the radListView. It close when i click the white space in the radcontextmenu! so, the functionality of the radmenuitem works.

My final question is, how can i make this work properly?

i didn't found such scenary yet on the forum, so can someone help me? ofcoarse i allready tried a lot of things like instead of the normal image button i used a radbutton, no effect.

ofcoarse there is another solution for this, is that i add a lot of controls to the ajaxmanager, but then again, the contextmenu didn't close when i clicked my imgMasker (imagebutton)


Best regards,

Fandy Backers



 

[Kate]

Hello Fandy,

I tried to reproduce the issue that you encounter but from the code that you pasted here I can not see how exactly you are using the RadAjaxPanel and therefore I am not able to get the behavior that you do. You also mention that you put the code above in a webusercontrol control. Do you also use a master/content page? If your scenario is one of the mentioned I would recommend that you use the RadAjaxManaged as described in this help article. Please give it a try and if it does not help I would suggest that you open a support ticket and send us a simplified runnable project only with the minimum code that is required so that we can help you in your particular scenario. 

Kind regards,
Kate
the Telerik team

[Fandy Backers]

Hi Kate,

It's not that simple as you say. My project is allready an advanced project!
But i shall explain as much as possible how my project is set up.

I use indeed masterpages, and themes. Well i have a page, there is a button which fires an javascript, which opens a radwindow with the url i need. This url holds the page (aspx) and on that page, depends what variables it loads, loads a webusercontrol.

Everything what i do on this control, postsback! (so, it already works like that!) now, i should enable ajax where it doesn't work yet.

instead of the radajaxmanagerproxy i can manually load all controls into the ajaxmanager on the masterpage, so that is nog the problem.
but before i have to add ALL the controls on it, this should not be like this, right?!

well, i will try to make a short project with the issue i have..

oh, another thing, i already know how the ajaxrequest works, i already found that solution myself and posted it also.. 

[Kate]

Hello Fandy,

Thank you for the project that you sent in the support ticket.

Here I am posting the answer as well since someone else might need it in case of a similar issue. The approach that I suggested is to place the RadAjaxPanel in the ItemTemplate and of the RadMenuItem. Then you need to use the ClientEvents-OnResponseEnd event of the RadAjaxPanel you can explicitly close the ContextMenu. Here is how you can achieve that:

function CloseMenu() {
            var contextMenu1 = $find("<%= RadContextC1.ClientID %>");
            contextMenu1.hide();
        }

markup:

<telerik:RadContextMenu ID="RadContextC1" runat="server" EnableViewState="false"
                       Skin="Simple" EnableRoundedCorners="true" EnableShadows="true" _OnClientItemClicking="OnClientItemClicking"
                       OnClientItemOpened="itemOpened">
                       <Items>

                           <telerik:RadMenuItem CssClass="Contracts" Text="ContractSelectie">
                               <ItemTemplate>
                                   <telerik:RadAjaxPanel ID="rap1" ClientEvents-OnResponseEnd="CloseMenu" runat="server">
                                       <div id="CatWrapper" class="Wrapper">
                                           <telerik:RadListView ID="RLVContractSelectie1" runat="server" DataSourceID="XmlDataSource1"
                                               AllowPaging="false" EnableAjaxSkinRendering="true" RegisterWithScriptManager="true"
                                               EnableViewState="false" GroupItemCount="1" OnItemCommand="RLVContract1_ItemCommand"
                                               AllowMultiItemSelection="false">
                                               <ItemTemplate>
                                                   <fieldset class="myClass">
                                                       <div id="div-image">
                                                           <asp:ImageButton ID="Image1" ImageUrl="~/zkalogo.png" CommandName="Select" CommandArgument='<%#Eval("Value") %>'
                                                               runat="server" />
                                                       </div>
                                                   </fieldset>
                                               </ItemTemplate>
                                           </telerik:RadListView>
                                       </div>
                                   </telerik:RadAjaxPanel>
                               </ItemTemplate>
                           </telerik:RadMenuItem>

                       </Items>
                   </telerik:RadContextMenu>

Kind regards,
Kate
the Telerik team