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