I noticed that when I use valueAllowUnset: true with the Select2 plugin, the default value is not visible in the select box. However, when I click on the select, the correct value is highlighted.
http://jsfiddle.net/LgXcb/
Try removing ', select2: {}' from the above fiddle to see how it should work.
Any ideas on what's causing this issue? Does it have to do with the select2 custom binding function I'm using for Knockout?
It seems that I always end up finding a solution right after setting up a bounty, even if I wait months before starting that bounty.
The problem was with the code inside the update function of my custom binding. After the observable value of the select changes, I also need to manually update select2, like so:
update: function(element, valueAccessor, allBindingsAccessor) {
var value = ko.utils.unwrapObservable(allBindingsAccessor().value || allBindingsAccessor().selectedOptions);
if (value) $(element).select2('val', value);
}
Working code: http://jsfiddle.net/LgXcb/5/
Interestingly, your setTimeout call is causing issues. Why? I'm not sure yet, but if you remove that and make a direct call to getSemesters() at the end of the function, it will select the initial value selected.
fiddle
I will keep looking at it and update you if I find the exact cause of this.
Update
It is amazing what you can find when you look at the github for the select2 plugin.
Related
My question is related to Angular and Typescript. My problem is quite tricky. I've created a dropdown menu with 3 items. But I'm not creating it using select tag of HTML. I'm using my company's toolkit. Which is just a wrapper around primeng components with our font and our color scheme. They call it PLK toolkit. Their code have a bug. It is not clearing the previously selected item. Here is their sample dropdown code (i feel it is ok to share the code because it is few lines of plain html only and that too written by me):
Note: In below code, plk-dropdown is like select tag, while plk-option is like option tag. There's nothing special about it.
<plk-dropdown [(ngModel)]="fruit" name="fruit">
<plk-option [value]="'apple'">Apple</plk-option>
<plk-option [value]="'pear'">Pear</plk-option>
<plk-option [value]="'melon'">Melon</plk-option>
</plk-dropdown>
So, when I click it first time it is good.But after first click it keeps on selecting the other options along with previous. I looked into their code:
dropdown.js
DropDownComponent.prototype.writeValue = function (value) {
if (this.options) {
this.selectOptionByValue(value);
}
};
and I fixed this bug by adding 1 line of code:
DropDownComponent.prototype.writeValue = function (value) {
if (this.options) {
this.clearSelectedOptions(); // THIS I ADDED
this.selectOptionByValue(value);
}
};
Now the compoenent is working but the problem is that I can't make changes to their js file. Firstly, I'm not supposed to do so. Secondly, if in future we update our repositories, that bug will come back.
Is there any way I can fix this with my typescript code. I cant implement jquery in between. I tried this:
How to clear all selected items in a SELECT input using jQuery?
Please help me. I'm blocked because of this. I really need help.
I use a null option so when the dropdown has no values unselected option is selected , I thing it 's related to primeng the set the first option as selected even the value don't match with ngModel property I have create a demo to show this but so far that how we solve abd this will give to the use an option to undo the selection in case this was not required.
<plk-dropdown [(ngModel)]="fruit" name="fruit">
<plk-option [value]="null">Unselected</plk-option>
<plk-option [value]="'apple'">Apple</plk-option>
<plk-option [value]="'pear'">Pear</plk-option>
<plk-option [value]="'melon'">Melon</plk-option>
</plk-dropdown>
demo 🚀
I have an interesting scenario happening right now and it's confusing me, this question is initially meant for those who are familiar with Angular UI Grid. However, you are welcome to answer.
I have a UI Grid that I call a drop down through a separate html page in the grid itself because the dropdown values dynamically change. Now I have ng-model of this drop as ng-model="row.entity.someValue" this would be the value of the $scope.someDate.someValue that is obtained from the grid with field: 'someValue'. The issue I'm having at hand is after selection I cannot fire a function call, I'm avoiding id="" calls because I want the code to be consistent and not use getElementById calls. I've tried ng-selected, ng-change even ng-class (knowing it wouldn't work) What I'm trying to do is fire a function with the selected value as a parameter and I cannot get the function to fire. What am I missing here?
Here is a same code of what I'm trying to achieve:
<div>
<select ng-model="row.entity.someValue" class="dropdownWidth" ng-selected="someFunction(selectedValue)" >
<option ng-repeat="selectedValue in grid.appScope.someArray" value={{selectedValue}}>{{selectedValue}}</option>
</select>
</div>
UPDATE Answer below
The answer was right there in front of me, which I keep forgetting. Every time a call to a grid cell is made outside of the controller you always apply grid.appScope in anything thing pertaining to the cell's value
in my case I was just calling ng-selected="someFunction(selectedValue)" when in fact I should've been calling ng-selected="grid.appScope.someFunction(row.entity.someValue)". Now it works perfectly, hopefully this scenario will be of some good use for anyone in the future!
I have a column with a celltemplate of checkbox. It can be selected/unselected, which works fine as correct events are fired everytime. However, when I select multiple checkboxes on the grid and start scrolling up and down, the checkboxes seem to be scrolling as well. That means that they are not fixed to the rows they are checked against, and get lined up against a wrong row.
This issue has already been reported here a couple of years ago. But the solution posted, does not solve the problem.
Here is a plunker link to demonstrate the issue. Anyone had any similar issue or a workaround to this?
You are not binding the checkboxvalue to your dataset. Thanks to your provided Plunker I can provide an updated Version that works.
The ng-model is bound to the gridscope and has a private scope for each row, so its fine to use somethnig generic
ng-model="foo" ng-change="row.entity.active = foo"
You can use active == 1 but I used true/false for convenience
ng-checked="row.entity.active" //since foo becomes true or false on click
If you want more complex checks, you can use their appScopeProvider.
So I have to collect a date and time from the user. I want to be able to set both from a single picker. I found this nice one by curious solutions here. Our site uses jQuery, jQuery mobile, and Knockout. When I use the datepicker to select the date my knockout binded variable is not updating, even though the value of the input box has changed. If I use jQuery to get the value it shows up just fine.
So my question: Can someone help me figure out how to get my knockout binding to update?
I've already tried setting the valueUpdate to input, and afterkeydown with no luck.
Here is a link to a fiddle I made that demonstrates the problem: http://jsfiddle.net/TrueEddie/eg6zM/
In the plugin, when the value of the element is set it needs to trigger the change event.
Something like:
_setValueOfElement: function(sElemValue)
{
var dtPickerObj = this;
var $oElem = $(dtPickerObj.dataObject.oInputElement);
if(dtPickerObj._compare($oElem.prop("tagName"), "INPUT"))
$oElem.val(sElemValue);
else
$oElem.html(sElemValue);
//ADDED THIS LINE
$oElem.change();
return sElemValue;
},
The plugin doesn't seem to have any eventing built-in, so doesn't look like there is a good way to react to the value being set otherwise.
I'm having a difficulty using the jQuery combobox widget as mentioned here:
I'm using jQuery to load the options for the select using ajax, which means that upon creation of the combobox, there are no options in it. When I get the values from the ajax call, I set the first option to be be selected. This works fine for the underlying select, but not for the input-field which jQuery combobox has added.
I've seen the solution here but this will not work if the options are added after _create is called(also, it is kinda outdated since the widget by default handles this).
As far as I can tell, there are no relationsship between the underlying combobox and the input-field that makes the one update the other. Or am i wrong here?
Regards,
Runar
ok..solved this myself adding the following code snippet in _create :
select.change(function() {
var selected = select.children( ":selected" );
input.val(selected.val() ? selected.text() : "");
});
Then invoked change on the combo after values had been populated.