We Keep Coding

Enable Two-Way data binding on Angular 6 for input type checkbox inside *ngFor

Problem: Two-way data binding for checkbox in *ngFor directive
I have a template driven form in which I am using *ngFor to loop over few radio buttons. Based on one key, I show checkbox next to radio buttons in disabled state on page load. If user clicks on a radio button and if it has a corresponding checkbox, I enable its state. I can then click on checkbox.
However, I want to be able to disable previous checkbox and reset its value when user clicks on another radio button and thus pass the correct form values. (I show them as json in beloe code demo url)
Demo code example: https://stackblitz.com/edit/angular-ba8pfz
If you see the demo code, I should be able to reset the checkbox if I toggle between "Marvel Heroes" and "Dc Heroes"
Appreciate your time and suggestions.

You cannot simply set the checked attribute to false as that sets the content checked attribute to an empty string - which is the equivalent of true or checked. Hence the check mark goes away, but the Boolean state of the control is not changed. Have to change the Boolean state of the control. One simple way to do that is to generate a click or change event on the control.
Try this:
enableRecursive(event, recursiveChk: boolean) {
let clickEvent = new MouseEvent('click');
this.recursiveChk.map((elem) => {
if (elem.nativeElement.checked) {
elem.nativeElement.dispatchEvent(clickEvent);
}
elem.nativeElement.disabled = true;
if (`recursive_${event.target.id}` === elem.nativeElement.id) {
elem.nativeElement.disabled = false;
}
});
}

Vuejs - Change selected options in select from outside

How do I change selected options from the outside?
I have a multiple select and the user can click on the "All" button to select all the options.
Fiddle.
I've tried to use the jQuery function "prop", but it only works visually; it doesn't change the Vue data.
$('option', '#filter-accountexpl').prop('selected', true);

Stop using jQuery to do this.
You can select all of your options this way.
this.vaccountsexpl = Object.keys(this.accountsexpl)
You can select none of your options this way.
this.vaccountsexpl = []
You can select any list of your options this way.
this.vaccountsexpl = [129,132,133]
Here is your fiddle updated.
Vue is driven by data.

How to check if Kendo UI ComboBox is Dirty (i.e. value has been changed from default value)?

I have a simple Kendo ComboBox:
HTML:
<div>
<h5>Brand</h5>
<div id="combo1"></div>
</div>
JavaScript:
j$("#combo1").kendoComboBox({
dataTextField: "name",
dataValueField: "id",
value: "Original_Brand_Value",
dataSource: {
transport: {
read: {
url: "..."
}
}
}
});
Note that the ComboBox has a default initial value of "Original_Brand_Value". How do I check if the Kendo ComboBox is "dirty" i.e. currently has a value other than "Original_Brand_Value"? Seems like I should be able to do something like:
j$("#combo1").data("kendoComboBox").isChanged()
**OR**
j$("#combo1").data("kendoComboBox").dataSource.isChanged()
But I have searched far and wide and there seems to be no such method. There has to be some way to do this, this must be a common use case.

As you have concluded, the kendoComboBox widget itself does not track whether it has been changed state. The datasource does have a hasChanges() method but making a selection does not change the datasource, it just gets a different value from it. However the kendoComboBox does raise events that you can use, for example 'select' that is fired when the user makes a selection: http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#events-select
For example you could add this to your comboBox configuration:
select: function(e) {
var item = e.item; //jQuery object representing the selection
isDirty = true; //Set a flag or call a function as required. Perhaps check the item as well to make sure it isn't the default value.
}
Alternatively there is also a method called 'select' that can be used to get or set the selected item. You can use this to get the selected index (if it is not zero, then the comboBox has a non-default selection):
var selectedIndex = j$("#combo1").data("kendoComboBox").select();
This isn't the only way. If you were to use MVVM declarative syntax with the comboBox bound to a property on a kendo.Data.Model (which is observable), any changes will automatically set the dirty flag on that model: http://docs.telerik.com/kendo-ui/api/javascript/data/model#fields-dirty
MVVM is a very powerful design pattern to use with kendo but I think going into more detail is outside the scope of what you're asking.

You can use the value() method to check the current widget value and compare it to the initial value, but probably this approach is not appropriate, as it is too obvious.
http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#methods-value
Another possible option is to subscribe to the change event of the widget and raise a custom dirty flag in a JavaScript variable. You could even set an expando on the ComboBox widget object.
http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#events-change
On a side note, the ComboBox is an input widget that should hold and submit a form value. That's why it should be created from an input or select element, not from a div.

multiselectfilter not working after refresh multiselectBox

I used jquery.multiselect.js and jquery.multiselect.filter.js.
I used like following.
$('#ddlmy').multiselect({ noneSelectedText: $(this).attr('noneselectedvalue') }).multiselectfilter();
Note : noneselectedvalue is my custom property
Now my dropdownlist changed on selection of other dropdown and i refresh multiselect like following.
var updatedOption = $("#ddlmy").find('option');
$('#ddlmy').multiselect("refresh", updatedOption);
Its working good but after changing value, filter not working in multiselect box.

Can't programmatically select option using Select2

I have a Select2 working fine attached to a select list but when someone enters a new item and I rebind the select list and try to programmatically select the new item, it refuses to display.
There are a number of other posts re this but their solutions don't work for me.
Use .select2("val", value). Does nothing.
Use .select2("data", value). Does nothing. Not sure how this is supposed to be different.
Use the InitSelection option to set a value. This leads to the following error message: Uncaught Error: Option 'initSelection' is not allowed for Select2 when attached to a select element.
In the Ajax success function after adding the new option to the database, I have the following Javascript:
BindDishes(RestaurantID); //rebinds the select list successfully
$('#hidDishID').val = data.DishID; //populates a hidden field
var arr = '[{id: "' + data.DishID + '", text: "' + data.DishName + '"}]';
$("#dd").select2("data", arr);
So in this latest iteration I have tried to supply an array with the id and text from the select list item as per another suggested solution but still nothing occurs. What am I doing wrong? Is this impossible when using Select2 with a select list?
Edit: I have the following line in MVC that creates the Select list:
#Html.DropDownGroupListFor(m => m.DishID, Model.GroupedSelectList, "Select a dish", new { id="dd",style="width:470px;" })
which must be causing the problem by binding to DishID from the model which was originally blank when it came from the server. DropDownGroupListFor is just an HTML helper that allows for using OptionGroups in a Select but it must be the binding that is a problem. What is the best approach here, to bind in a different way or to somehow update the model's DishID, not sure of the best practice?

var $example = $(".js-example-programmatic").select2();
$example.val("CA").trigger("change");

You need to destroy your select2 before adding/modifying items. If you do, then your select2 will respond just like its bound first time
Select2 Dropdown Dynamically Add, Remove and Refresh Items from