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
    1810 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. 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