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

Thanks Boyan, it woked.