Dynamically added context menu items show transparentbackground

3 posts, 1 answers
  1. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 26 Jan 2015 Link to this post

    Hi,

    I am dynamically adding menu items and submenu items to RadContextMenu. I have a Radgrid, on right click it shows contextmenu. Items in context menu are dynamically added based on row clicked.

    This context menu renders fine most of the time but one in a while item width do not cover 100% and shows transparent background. How can I fix this issue?

    JavaScript code to add context menu items:
    ............................................................................
    function GetInformationFromServerAndCreateTicketBayContextMenuItems(sender, eventArgs) {
                var cmTechFilterID = $telerik.$("[id$='cmTechFilter']").attr("id"); //Gets the ID, this is external JS safe...you can use the = .ClientID asp method though
                var menu = $find(cmTechFilterID);
               // menu.trackChanges();
                menu.get_items().clear();
               // menu.commitChanges();


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

                //this prevents from displaying browser context menu
                var evt = eventArgs.get_domEvent();
             
               evt.cancelBubble = true;
               var index = eventArgs.get_itemIndexHierarchical();
               document.getElementById("radGridClickedRowIndexCM").value = index;
               sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

              

               var rgTicketsGridID = $telerik.$("[id$='rgTicketsGrid']").attr("id"); //Gets the ID, this is external JS safe...you can use the = .ClientID asp method though
               var grid = $find(rgTicketsGridID);

               var dataItem1 = grid.get_masterTableView().get_dataItems()[index];
               var currentTicketID = dataItem1.getDataKeyValue("ID");
               var apptID1 = dataItem1.getDataKeyValue("ApptID");
               var Status = dataItem1.getDataKeyValue("Status");

               var baseUrl = 'WorkforceServices/RequestHandler.ashx?q=getticketbaycontextmenuitems&TicketID=' + currentTicketID + "&ApptID=" + apptID1;
               var serviceOptions = {};
               serviceOptions.url = baseUrl;
               serviceOptions.data = null;
               serviceOptions.type = 'GET';
               serviceOptions.processData = false;
               serviceOptions.contentType = "application/json";
               serviceOptions.dataType = 'json';
               serviceOptions.success = function (result) {

                   menu.trackChanges();
                   menu.get_items().clear();

                   var ticketBayContextMenuItems = result.TicketBayContextMenus;
                           var ticketStatuses = result.TicketStatuses;
                           var bumpStatuses = result.BumpStatuses ;

                           if (ticketBayContextMenuItems.length > 0) {
                               for (var index = 0; index < ticketBayContextMenuItems.length; index++) {
                                   var description = ticketBayContextMenuItems[index].Value;
                                   var value = ticketBayContextMenuItems[index].Key;
                                   if (description == "_BreakLine_") {
                                       var menuItem = new Telerik.Web.UI.RadMenuItem();
                                       menuItem.set_isSeparator(true);
                                       menu.get_items().add(menuItem);
                                   }
                                   else {
                                       var contextMenuItem = new Telerik.Web.UI.RadMenuItem();
                                       contextMenuItem.set_text(description);
                                       contextMenuItem.set_value(value);

                                      
                                       menu.get_items().add(contextMenuItem);

                                       if (apptID1 < 1) {
                                           if (description == "Show In M4")
                                               contextMenuItem.set_visible(false);
                                           else if (description == "Exclude from Appointment Optimization")
                                               contextMenuItem.set_visible(false);
                                           else if (description == "Show Route")
                                               contextMenuItem.set_visible(false);
                                           else if (description == "Directions")
                                               contextMenuItem.set_visible(false);
                                           else if (description == "Find Tech")
                                               contextMenuItem.set_visible(false);
                                       }


                                       if (value == "ChangeTicketState") {
                                           if (ticketStatuses.length == 0) {
                                               contextMenuItem.set_visible(false);
                                           }
                                           else {
                                               for (var indexRCItem = 0; indexRCItem < ticketStatuses.length; indexRCItem++) {
                                                   var destinationStateID = ticketStatuses[indexRCItem].DestinationState;
                                                   var transitionName = ticketStatuses[indexRCItem].TransitionName
                                                   var destinationStateID = ticketStatuses[indexRCItem].DestinationState;
                                                   var nextTransitionItem =  new Telerik.Web.UI.RadMenuItem();
                                                   nextTransitionItem.set_text(transitionName);
                                                   nextTransitionItem.set_value(destinationStateID);
                                                   $(nextTransitionItem).css("width", "100%");
                                                   contextMenuItem.get_items().add(nextTransitionItem);

                                               } //end of for loop  
                                           }//end of if
                                       }
                                       else if (value == "BumpStatus") {
                                           if (result.BumpStatuses.length == 0) {
                                               contextMenuItem.set_visible(false);
                                           }
                                           else {
                                               for (var indexBS = 0; indexBS < bumpStatuses.length; indexBS++) {
                                                   var code = bumpStatuses[indexBS].Code;
                                                   var description = bumpStatuses[indexBS].Description;
                                                   var bsMenuItem = new Telerik.Web.UI.RadMenuItem();
                                                   bsMenuItem.set_text(description);
                                                   bsMenuItem.set_value(code);
                                                   $(bsMenuItem).css("width", "100%");
                                                   contextMenuItem.get_items().add(bsMenuItem);
                                               }//end of for loop
                                           }//end of else
                                       }//end of if (value == "BumpStatus")


                                   }//end of else not break line
                               } //end of for loop

                           }// end of if (ticketBayContextMenuItems.length > 0)

                         
                    $(contextMenuItem).css("width", "100%");
                    menu.commitChanges();
                    $(contextMenuItem).css("width", "100%");
                   menu.show(evt);
                   evt.cancelBubble = true;
                   evt.returnValue = false;

                   if (evt.stopPropagation) {
                           evt.stopPropagation();
                           evt.preventDefault();
                   }

               };


               serviceOptions.error = function (xhr) {
                       alert('Error:' + xhr.statusText);
                      menu.trackChanges();
                      menu.get_items().clear();
                       menu.commitChanges();

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

                       if (evt.stopPropagation) {
                           evt.stopPropagation();
                           evt.preventDefault();
                       }
               };


               var workforceServiceProxy = new WorkforceServiceProxy(serviceOptions);
               workforceServiceProxy.callService();

    }






    Here is my html tag for grid and contextmenu
    ..................................................................................

     <telerik:RadGrid ID="rgTicketsGrid" runat="server"  AllowPaging="true"
                             
                            .................................................................. >
                                <MasterTableView AllowFilteringByColumn="False" .................................>
                                </MasterTableView>
                              
                              
                                <ClientSettings AllowDragToGroup="True" AllowRowsDragDrop="True" EnableRowHoverStyle="True">
                                            <ClientEvents OnRowContextMenu="GetInformationFromServerAndCreateTicketBayContextMenuItems"   />
                                </ClientSettings >
                 
                          
                      
                                ...................................................................................................................
                            </telerik:RadGrid>

                            <telerik:RadContextMenu ID="cmTechFilter" runat="server" EnableRoundedCorners="true"
                                EnableShadows="true" EnableViewState="true" OnClientItemClicked="TicketBay_ContextMenuClicked"  >   
          
                            </telerik:RadContextMenu>
    Thanks,
    Prava
  2. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 29 Jan 2015 Link to this post

    Hello,

    We are not aware of such problem with the RadContextMenu. I tested a sample page using the Grid Context Menu demo code but I was not able to replicate such issue.

    One thing that I noticed is that you set explicitly css width to "100%" for some items. Please remove all logic for adding additional styles and test it again.

    In order to investigate this current behavior we would need a sample runnable page/code that replicates the issue.

    Also you can try calling the RadContextMenu client-side object repaint() method and see if this will fix the issue.

    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 02 Feb 2015 Link to this post

    Thanks Boyan, it woked.
Back to Top