Hi,
i m using WebDataMenu when binding some images to DataMenuItem when i click on DataMenuItem where Key="Add" it is firing below mentioned java script code but oItem.Key is giving undefined. how to get the oItem.Key value in the below javascript code ?
<ig:WebDataMenu ID="WDM" height="22px" itemspacing="0" itemwidthdefault="25px" tabindex="0" runat="server" OnItemClick="WDM_ItemClick" Width="100%"> <AutoPostBackFlags ItemClick="On" /> <GroupSettings Orientation="Horizontal" /> <ClientEvents ItemClick="WDMEditToolbarButtonClicked" /> <ItemSettings CssClass="ItemCssClass" SelectedCssClass="ItemSelectedCSS" HoverCssClass="ItemHoverCSS" /> <Items><ig:DataMenuItem ImageUrl=".new.gif" Key="Add"></ig:DataMenuItem> <ig:DataMenuItem ImageUrl="edit.gif" Key="Edit"></ig:DataMenuItem> <ig:DataMenuItem ImageUrl="copy.gif" Key="Copy"></ig:DataMenuItem> <ig:DataMenuItem ImageUrl="delete.gif" Key="Delete"></ig:DataMenuItem> </Items>
</ig:WebDataMenu>
JavaScript Code:-
function WDMEditToolbarButtonClicked(oToolBar, oItem, oEvent) { if(oItem.Key == "Add")
{ alert(oItem.Key); }
}
Hello Ravi,
Thank you for contacting Infragistics community.
What version of IG controls are you using, because the event parameters of ItemClick client-side event that you're defining are not available in the new WebDateMenu control's ItemClick event. The WebDataMenu's ItemClick event accepts only two parameters: sender and event arguments. I'm attaching a sample with similar scenario for your reference. If you have further questions, please let me know.
Regards,
Tsanna
Hi Tsanna,
I m using Infragistics v14.2 Version=14.2.20142.1028 .
Thanks for sample solution, using sample solution i am able to fix my issues.
thanks
Ravi
HI Tsanna,
if i want to set DisabledImage Property to a single MenuItem how can i set, what you said in the above comment will apply for all menuItems. below are doubts can you please suggest me how to go forward with below issues:-
1) In my current project using ultrawebtoolbar if a read-only users logged in we are displaying disabled-images, and in few cases few images will disabled images and few images will be normal images. how can i archive this using webdatamenu ?
2) I m displaying only images in webdatamenu i want to maintain some space between one image and another image how this can be archived using webdatamenu?
3) in ultratoolbar I am using the below code , could you please suggest me the equivalent code in webdatamenu for below code ?
btn.DefaultStyle.CopyFrom(UltraWebToolbar1.DefaultStyle); btn.DefaultStyle.Width = Unit.Pixel(iWidth);
Ultra toolbar code:-
TBarButton btn = (TBarButton)UltraWebToolbar1.Items.FromKey(Newkey); if (btn != null) {btn.Text = btnText;btn.DefaultStyle.CopyFrom(UltraWebToolbar1.DefaultStyle);btn.DefaultStyle.Width = Unit.Pixel(iWidth); }
webdatamenu code:-
DataMenuItem Item = WDM.Items.FindDataMenuItemByKey(key);
if (Item != null){Item.Text = btnText;Item.DefaultStyle.CopyFrom(UltraWebToolbar1.DefaultStyle); need equivalent for this line in webdatamenu ?Item.DefaultStyle.Width = Unit.Pixel(iWidth); need equivalent for this line in webdatamenu ? ?}
Thanks
I'm attaching a sample that demonstrates how you can set space between menu items and apply image on a disabled item using css.
Regarding your second question about code equivalent in WebDataMenu, please note that the DataMenuItem class in WebDataMenu does not provide Width property and if you want to apply custom stylization to the items, as I've already suggested in my previous post, you can do this using CssClass property of the ItemSettings. More information about the available properties and methods in WebDataMenu is described in our documentation: http://help.infragistics.com/doc/ASPNET/2014.2/CLR4.0/?page=Infragistics4.Web.v14.2~Infragistics.Web.UI.NavigationControls.WebDataMenu_members.html
Please refer to the attached sample for your reference.
If you need further assistance, feel free to contact me.
In the ultrawebtoolbar , in CLIENTSIDEEVENTS on click i m calling "ToolbarButtonClicked" and below is the javascript code :-
function ToolbarButtonClicked(oToolBar, oItem, oEvent) {
if(oItem.Key == "EmployeeSearch")
{
alert();
oItem.setEnabled(false); for this line what is the equivalent code in WEBDATAMENU ?
here in the above javascript code i m setting oItem.setEnabled(false); for this line what is the equivalent code for "setEnabled" in WEBDATAMENU ?
Could you please reply for my above comments. I tried with as below :-
function WDMItemClick(sender, eventArgs) {
var key = eventArgs.getItem().get_key();
if (key == "Edit") {
key.set_enabled(false); Error: Object doesn't support property or method 'set_enabled'
Error: Object doesn't support property or method 'set_enabled'
Please note that set_enabled() method is accessible through the respective item's object, which means that you can use it like following:
eventArgs.getItem().set_enabled(false)
thanks for the help , using your sample code i m able to set the disabled images in DataMenuItems.
Code for Reference to Others:
function wdm_init(sender, e) {var getItemscount = sender.getItems().get_length(); for (var i = 0; i < getItemscount; i++) { var MenuItemText = $find("WDM").getItems().getItem(i); if (!MenuItemText.get_enabled()) { if ($find("WDM").getItems().getItem(i).get_key() == "btnPreview") { MenuItemText.get_element().children[0].children[0].src = "../Images/preview_disabled.gif"; } else if ($find("WDM").getItems().getItem(i).get_key() == "btnUpdate") { MenuItemText.get_element(WDM.children[0].children[0].src = "../Images/submit_disabled.gif"; } else if ($find("WDM").getItems().getItem(i).get_key() == "btnCancel") { MenuItemText.get_element().children[0].children[0].src = "../Images/cancel_disabled.gif"; } } }
Thanks for the help, this issues has been resolved for now.
Regrads
Hi Ravi,
Can I help with something else?
In WebDataMenu CSOM there is no "DefaultImage" property available. The only way to access the respective item's image or set a new one on the client is through
get_element() method which returns the html element representation of this item on the client , for instance: eventArgs.getItem().get_element(). This will return <li> tag, however you need to access the <img> tag which the image source is set to: eventArgs.getItem().get_element().children[0].children[0].src. If you have any further questions, please let me know.
Can you reply for above post.