I am using multi select dropdown(cuppa labs) from this link https://www.npmjs.com/package/angular2-multiselect-dropdown But I am unable to disable the dropdown.
initially if i set In settings disabled:true is working fine but I want disabled:false initially then i need to change disabled:true after the success response from the api.
documentDropdownSettings = {
text: "Required Document",
badgeShowLimit: 3,
enableSearchFilter: true,
maxHeight: 150,
classes: "myclass custom-class",
showCheckbox: true,
enableFilterSelectAll: false,
disabled:false
}
this.taskService.getTaskDetails(this.taskId, (success) => {
this.documentDropdownSettings.disabled=true
}, (error) => {
enter code here
})
I want to make the dropdown disabled dynamically.
I believe the issue is that the the settings object is immutable.
you need to change the object reference not its properties for the binding to take effect.
doing your change, and changing the reference will probably work.
something like :
this.taskService.getTaskDetails(this.taskId, (success) => {
this.dropdownSettings['disabled'] = true;
this.dropdownSettings = Object.assign({}, this.dropdownSettings);
}, (error) => {
enter code here
})
P.S their official approach seems to be a bit awkward, they recreate the object for each settings change in their documentation..
Related
I have a div and a following javascript:
let usersNotContributingIds = [ 19, 20, 21 ];
let usersNotContributingNames = [ "Flavius K.", "Pogchamp", "Lazy Gopnik" ];
let contributorToBeAddedId; // the value that will be used for further actions
$("#alpaca-search-contributing-users").alpaca({
data: null,
schema: {
type: "object",
enum: usersNotContributingIds,
},
options: {
name: "pls",
label: 'Contributor Fullname',
optionLabels: usersNotContributingNames,
helper: "Select user sou want to add as a contributor",
id: "select2-search",
focus: false,
events: {
change: function() {
console.log(this.getValue().value);
contributorToBeAddedId = this.getValue().value
},
focus: function() {
console.log(this.name);
},
blur: function() {
console.log(this.name + ": blur");
},
ready: function() {
console.log(this.name);
}
},
},
postRender: function(control) {
$('#select2-search').select2();
}
});
Obviously, I want to get the newly set value, or anyhow access the selected value and use it. For example with AJAX and a button.
The problem is, that when I have 3 or less options, Alpaca render the field not as a search, but as a radio-something and the this.getValue() is null.
Is there a way to force Alpaca to NOT USE THE RADIO BUTTONS? I dont want to use them, even if I had only 1 option. Documentation just promtly states, that if there are 3 or less options, it will generate radio buttons instead of select, but it says nothing about the fact, that it breaks everything and that I would not be able to retrieve the value the same way as with select field.
If I am doing something inefficiently or wrong, please tell me, I am new with Alpaca and I just want a neat select dropdown with search, that I can use to pick users from a list with any length. Also, I would like the "null" or "none" option to not be there.
To have your select component rendered you should use the option type and set it to "select".
The issue with the value is because you're using it wrong, to get the value in alpaca you only do this.getValue() and there's no need to add .value.
FYI: If you see the error "This field should have one of the values in Flavius K., Lazy Gopnik, Pogchamp. Current value is: 19" you should update your enum array to have strings instead of ints let usersNotContributingIds = [ "19", "20", "21" ];.
Here's a working fiddle for this.
I was task to add additional feature that can save its state after a user toggle the legend items when he logged out and the state should be the same when he logged in. Is it possible to do it in amchart?
AmCharts doesn't provide any built-in solutions to save/load chart state, so you need to write your own custom code. As #Abhijit mentioned, you can use localStorage to accomplish this. I already provided a sample solution in our support forum using the legend events but here it is again for you and anyone else who is looking:
AmCharts.makeChart("...", {
// ...
graphs: [{
// ...
//get hidden value from localStorage. needs to cast stored string "1" or "0" to a number, then casted to a boolean if a value exists
hidden:
localStorage.carsHidden !== undefined
? !!+localStorage.carsHidden
: false,
},
// repeat
],
legend: {
// ...
listeners: [
{
event: "showItem",
method: saveState
},
{
event: "hideItem",
method: saveState
}
]
}
});
function saveState(e) {
localStorage[e.dataItem.valueField + "Hidden"] =
e.type === "hideItem" ? 1 : 0;
}
Demo
I would like to change the "pen" icon of the ListItem of type DetailAndActive
I found already following solution for it: UI5 StandardListItem DetailAndActive change Icon
But this once dosn't work with binding items from a model.
I tried therefore to also create a custom list control.
sap.m.List.extend('my.List', {
metadata: {
properties: {},
aggregations: {
items: {
type: "my.StandardListItem",
multiple: true,
singularName: "item"
}
}
},
renderer: {}
});
The binding itself is working. But the detailIcon dosn't change.
See sample at http://jsbin.com/kijisanepa/edit?js,output
In your excample you overwrite the "setDetailIcon" Method which was generated from SAP-Framework.
setDetailIcon: function(icon) {
console.log(icon)
this.DetailIconURI = sap.ui.core.IconPool.getIconURI(icon);
},
so in the method you need to call
this.setProperty("detailIcon", icon);
This set the value of your property and trigger a rerender.
If you dont want to rerender your listItem, use
this.setProperty("detailIcon", icon, true);
The idea I'm trying to achieve is to embed the datatable into the form.
For now, the form acts as a container. So far there are no any issues, but the name property for the datatable if ignored. The datatable not belongs to the form elements. AFAICS the following configuration is pretty common:
{
view:"form",
elements:[
{ view:"text", name:"inp1", value:"Test input" },
{ view:"datatable", name:"formDT", autoConfig:true, data:grid_data }
]
}
http://webix.com/snippet/7b7a8f2e
But if in the dataForm.elements I see only inputs.
Ideally, I want to get and set the datatable selection through the form's setValues and getValues methods. Or do I need to write my own method to gather the data from the inputs and the datatable separately? Has anyone faced such task before? TIA.
Here a custom component draft inherit datatable but support getValue setValue in order to act as a form input :
webix.protoUI({
name: "datatableInput",
defaults: {
},
$init: function(config) {
},
// Define component value (used by form setValues)
setValue: function(value) {
console.log('setValue');
this.clearSelection();
if (value) this.select(value);
},
// Get component value (used by form getValues)
getValue: function() {
console.log('getValue');
var item = this.getSelectedItem();
if (item) return item.id;
}
}, webix.ui.datatable);
Updated snippet :
http://webix.com/snippet/f952f35e
I have the following code (sloppy, I know...first javascript app). I am trying to get a combobox to populate with a list of features that fall under a given release (as selected in the first combobox). Almost everything is now working correctly, except everytime I click the feature combobox for the first time, it loads ALL features and completely ignores the filter. Even if I change the release box first, the feature box still populates with all features only on first click. Subsequent times it shows the correctly filtered features.
Even stranger, I've tried writing the total records in the Feature Store to the console, so I can see when this happens. When the feature combobox is first created, it has the correct number of records in it. However, as soon as I click the feature combobox for the first time, it triggers the "load" listener of the combobox, and pulls in all the features, ignoring the filter completely.
I'm so boggled, I've tried so many things to debug this, and at this point have no other options. Does anyone have any ideas as to why it would load the correct data first, then reload it and ignore the filters on first click?
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var relComboBox = Ext.create("Rally.ui.combobox.ReleaseComboBox", {
fieldLabel: 'Choose a Release',
width: 300,
listeners: {
ready: function(combobox) {
this._releaseRef = combobox.getRecord().get("_ref");
this._loadFeatureInfo();
},
select: function(combobox) {
this._releaseRef = combobox.getRecord().get("_ref");
this._loadFeatureInfo();
},
scope: this
}
});
this.add(relComboBox);
},
_loadFeatureInfo: function() {
var featureStore = Ext.create("Rally.data.WsapiDataStore", {
model: "portfolioitem/Feature",
fetch: ["Name", "_ref"],
autoLoad: true,
filters: [
{
property: "Release",
operator: "=",
value: this._releaseRef
}
],
listeners: {
load: function(store) {
this._updateFeatureBox(store);
},
scope: this
}
});
},
_createFeatureBox: function(featureStore) {
this._featureComboBox = Ext.create("Rally.ui.combobox.ComboBox", {
fieldLabel: 'Choose a Feature to move',
store: featureStore,
listeners: {
select: function (combobox) {
this._featureRef = combobox.getRecord().get("_ref");
//calls method to get and display children of this feature in a grid
},
scope: this
}
});
this.add(this._featureComboBox);
},
_updateFeatureBox: function(featureStore) {
if (this._featureComboBox === undefined) {
this._createFeatureBox(featureStore);
} else {
this._featureComboBox.clearValue();
this._featureComboBox.bindStore(featureStore);
//calls method to get and display children of this feature in a grid
}
}
This is probably an issue caused by the featureStore loading twice: once when you created it, and the combobox also tells it to load again once the user opens the combobox to pick a Feature.
I encountered a very similar issue with a combobox on Stories, and I'd betcha dollars to donuts that Matt Greer's answer:
Strange Load behavior with Rally.ui.combobox.ComboBox
To my question, is the answer to yours too...