I need to change the menu text depending on user interaction on my web page. I am using kendo web menu. So far I tried it with:
var menu1 = $("#menu1").data("kendoMenu");
menu1.element[0].childNodes[0].innerHtml = "NEW TEXT";
It works nicely (with proper indexing), but after a few changes the menu is stired up (formatting, behaviour, etc.), which makes me think this is not the "official" way to do it. Any ideas?
Instead of playing with the HTML DOM you should use some of the methods provided by KendoUI menu for managing new options.
You should take a look into:
insertBefore: Inserts an item into a Menu before the specified referenceItem.
insertAfter: Inserts an item into a Menu after the specified referenceItem.
append: Appends an item to a Menu in the specified referenceItem's sub menu.
You should use one or the other depending on where to insert.
In the following example you have two function for inserting as first option in a menu:
menu.insertBefore(
[ { text: "NEW TEXT" } ],
"#where > li:first-child"
);
Where #where is the id of the li that contains the list of options (menu items).
If you want to insert as last option in a menu:
menu.insertAfter(
[ { text: "NEW TEXT" } ],
"#where > li:last-child"
);
You can see it in action here
Related
There is a dropdown list I want to click, it has four options when expanded. With my code, I can click and expand this dropdown list, but unable to click on the option (value = '100').
This is the HTML code for the elements I want to click before the dropdown list is expanded:
This is the HTML code for the elements I want to click after the dropdown list is expanded:
Below is my code:
//#FunctionName : Display100ResultsPerPage
//#Description : A function that chooses to display 100 results per page instead of 10
//#Parameters : PageObj: page that displays items
//#Returns : None
//#Version : v1.0
function Display100ResultsPerPage ( PageObj )
{
var localPageObj = PageObj;
var display100ItemsPerPageOptionCssSelector = "div[class='per-page-section'] select option[value='100']";
var displayNItemsPerPageDropdownListCssSelector = "div[class='per-page-section'] select";
localPageObj.QuerySelector(displayNItemsPerPageDropdownListCssSelector).Click();
aqUtils.Delay(500);
localPageObj.QuerySelector(display100ItemsPerPageOptionCssSelector).Click();
}
My code manages to:
Clicks and expands the dropdown list, but unable to click on the (100) option.
If I add an additional line in my code:
Log.Message(localPageObj.QuerySelector(display100ItemsPerPageOptionCssSelector).getAttribute('value'));
I got a logging message saying "100", which means my code can successfully locate this (100) option but why can not I click on it?
Many thanks
I have tried the following approach:
localPageObj.contentDocument.Script.jQuery("div[class='per-page-section'] select").find("option").css("z-index","999", "position", "relative");
option elements have changed into:
By index, I tried to click on the last option (value = '100'), but still not working.
Inspect the element by right clicking on it, if the inspector takes you to a different element I think you need to give dropdown list a "z-index" and remember that z-index works only when you specify position to relative or absolute. that should solve the problem, I believe.
I am using AngularJS with Angular Strap plugin for one of my projects. On the page I have a table. One of the columns contains some links.
After clicking on the link I pop-ups Angular Strap's dropdown (as contextual menu).
This menu contains two items:
details,
board.
Clicking on details item open-ups Angular Strap's aside (with some data to be shown) - this one is working well.
The problem is, the second item should redirects to a specific page (using dropdown's href attribute). My question is - how to use angular expression in this href attribute?
Part of my view's code - with dropdown:
<button type="button" class="btn btn-link"
ng-click="selectGroup(group)"
data-html="1"
data-animation="am-flip-x"
data-placement="bottom",
bs-dropdown="dropdown">
{{ group.name }}
</button>
Bs-dropdown's dropdown definitions from controller:
$scope.dropdown = [
{
text: "Details",
click: "showDetails()" // Opens up Angular Strap's aside.
},
{
text: "Board",
href: "/group/{{ $scope.group.number }}" // Not evaluated.
}
];
Clicking on "Board" dropdown's item is redirecting to something like: "127.0.0.1:8000/#/group/{{group.number}}" rather than (i.e.) "127.0.0.1:8000/#/group/2".
As a workaround I have created another method (i.e.) openBoard() as follows:
var openBoard = function() {
var groupNumber = $scope.group.number;
window.location.href="127.0.0.1:8000/#/" + groupNumber;
}
Calling this method in "Board" item's click is working, but causes some other problems and more - is not the way I want to go (semantically incorrect).
One more thing at the end. Whenever page loads (and controller has been initialized) value stored in $scope.group is undefined. I am setting a proper value whenever group link (from above mentioned table) is being clicked (and a moment before dropdown is displayed).
Anyone has any ideas how to use Angular expressions with Angular Strap's dropdown (in href)?
As $scope.group member doesn't available at starting while creating dropdown array, that will result href: "/group/{{ $scope.group.number }}" this to href: "/group/undefined". So I'd suggest you to initially load dropdown with one value,
$scope.dropdown = [
{
text: "Details",
click: "showDetails()" // Opens up Angular Strap's aside.
}
];
& whenever group values gets fetched, do assign the second dropdown option
$scope.dropdown.push({
text: "Board",
href: "/group/" + $scope.group.number
});
Hope this work around would help you, Thanks.
I think that you must change {{ $scope.group.number }} for this /group/group.number
I have two listbox, A & B:
when I double click on an item of A , the item will be added in List B. And i have done this. List B visually show the value, but when I go to the view source of the page, I dont see new <option>.
This is my List A options.
This is my List B options (before and after addition and it remains same whatever items added. this is my problem.):
It should have one <option>. like
<option value="VSNR">VSNR</option>
what is my code is :
$('#lstXLSCol').on('dblclick', function () {
var item = $('#lstXLSCol').find(":selected").text();
var newOption = { item: item };
$('option:selected', this).remove();
$.each(newOption, function (val, text) {
if (text != "")
$('#lstXLSSelectedCol').append(new Option(text, val));
});
});
EDIT 1 :
I have found it pressing F12 in IE. but the values are like below:
but, i wanted to insert the value same as text. What should be changed in my jquery code?
you can not see them. The source is just used to build the initial DOM that represents the document. Dynamically created elements are only inserted in the DOM.
But you can analyse such elements with a DOM viewer like Safari’s WebInspector or the Firefox extionsion Firebug. Firefox can also show source code that represents such dynamically created elements by selecting that element an choosing View Selection Source in the context menu.
See this
take out the space between params and :last
$('#lstXLSSelectedCol:last').html('<option value=\''+item+'\'>'+item+'</option><option>');
$('#lstXLSSelectedCol:last').live('change', function () {
var option_selected = $('option:selected', this).val();
$('#lstXLSSelectedCol:last').append($('<option>', {
value: option_selected
}).text(option_selected));
});
You won't see dynamically added elements in the source of your page.
Use your browser's console to inspect the DOM.
Normally it's enough to right click on the element and select "inspect" from the context menu, otherwise see this link for how to access your browser's console.
i am adding textfields dynamically as
var input = $('<input class="EditorFields" id="textfield"/>');
$(input).igEditor({
width: 140,
required:true
});
this is working fine.
But when i am trying to add listItems property then its not working.
$(input).igEditor({
width: 140,
required:true,
listItems : ["red","blue","yellow"]
});
i do not want to change the base element to select.
Please help.
First things first - the Ignite UI jQuery API docs state that the button option defaults to none - if you want to have a drop-down add this:
button : "dropdown",
Why this still won't work? Dynamically adding dynamic controls is tricky sometimes if you don't know them in great detail. Same for jQuery, it's a common thing people miss - jQuery creates items in a document fragment so you need to be careful how you append them to the DOM.
When you provide an INPUT element and request a complex editor, the control's additional items (buttons, drop-down, validation messages, etc.) are built around that input and the whole thing wrapped in a container SPAN. Because you refer to the input and it works the first time I assume you attach it directly. Basically when you create a complex editor and only afterwards attach to eh DOM using the same input reference you are leaving all the extra markup stuck in the document fragment.
I can think of about 3 ways to get this to work, you pick what suits best yopur needs:
1) Append item first so the Editor can properly initialize in the DOM afterwards:
var input = $('<input class="EditorFields" id="textfield"/>').appendTo("body");
2) Povide the container, instead the input if possible:
var input1 = $('<span class="EditorFields" id="textfield1"/>');
3) Select the parent when you know you have one and append it instead:
$(input2).igEditor({
width: 140,
required: true,
listItems: ["red2", "blue2", "yellow2"],
button: "dropdown"
}).parent().appendTo("body");
Here's a JSFiddle with all of those: http://jsfiddle.net/damyanpetev/ZRqb2/
I added a button to the ribbon toolbar button in my extension to the Tridion CMS. On click of the button a popup page will display with two drop downs. By changing the values in the first drop down control I should populate the values for second drop down control. In my case I am using ASP drop down list control. For the time being I will hard code the values to be populated to the second drop down in java script. For this requirement I am using the following code but I am not able to populate the value (Not Identifying the tag).
Java script code:
ABC.WCMS.RTFExtension.Popups.ButtonPopup.prototype._populate = function () {
var selectedValue = $('#functionalcomponent').value;//First dropdown selected value
var dropdownId = $("#Dd");//Second Dropdown Control
switch (selectedValue) {
case "Home Ware":
dropdownId.append($("<option> </option>").val("Select Sub-Category").html(""));
dropdownId.append($("<option> </option>").val("Air-Conditioners/Coolers").html("Air-Conditioners/Coolers"));
break;
case "Education":
dropdownId.append($("<option> </option>").val("Select Sub-Category").html(""));
dropdownId.append($("<option> </option>").val("Colleges").html("Colleges"));
break;
default:
dropdownId.append($("<option> </option>").val("Select Sub-Category").html(""));
dropdownId.append($("<option> </option>").val("No Value").html("No Value"));
}
return true;
}
ASPX Controls:
<%--Dropdown1--%>
<asp:DropDownList ID="functionalcomponent" runat="server"></asp:DropDownList>
<%--Dropdown2--%>
<asp:DropDownList ID="Dd" runat="server"></asp:DropDownList>
How can I populate the values for second drop down from external JavaScript file?
Rather than adding values on demand, you may use the approach below:
Add all the items beforehand to the DOM.
Hide the required items using jQuery logic.
You may refer the following post for a hint Hide options in a select list using jQuery
Please take a look at jQuery disable SELECT options based on Radio selected (Need support for all browsers) also
I recently worked on a GUI extension where we populated a drop down based on the value of another drop down. When I populate using javascript I have the following code:
$j(c.SystemDropDown).append("<option value=\"" + value + "\">" + value + "</option>");
As you can see my example appends the whole <option> tag, where as yours is specified using the .val(), perhaps you could try this way?
The version I have is working great :)