We Keep Coding

Inputpicker dispose filter after setting value

I am using "Jquery inputpicker plugin" which its references can be find here.
I use this plugin for dropdown menus. I initiate my drop down using below code:
$('#test').inputpicker({
data:[
{value:"1",text:"USD"},
{value:"2",text:"EUR"},
{value:"3",text:"CNY"}
],
fields:[
{name:'value',text:'Id'},
{name:'text',text:'Title'}
],
autoOpen: true,
headShow: false,
filterOpen: true,
fieldText : 'text',
fieldValue: 'value'
});
I can set selected item of my list by code:
$('#test').inputpicker('val', 1); // selecting "USD"
after setting the value of my field , when users try to open the drop down and look for another item, there is no item visible but "USD". For selecting another item, user should erase all characters manually, then other items will be displayed.
I am looking for a way to show all items after setting selected item.
I have created a sample of my code here:
https://jsfiddle.net/6eL9pfdw/

Hacky but it works:
Set the filterOpen: false, this will prevent filtering the data on the first open.
Bind to focus event and set the filterOpen = true. This will re-enable the filtering.
$(document).ready(function(){
$('#test').inputpicker("val" , "1");
});
$('#test').inputpicker({
data:[
{value:"1",text:"USD"},
{value:"2",text:"EUR"},
{value:"3",text:"CNY"}
],
fields:[
{name:'value',text:'Id'},
{name:'text',text:'Title'}
],
autoOpen: true,
headShow: false,
filterOpen: false,
fieldText : 'text',
fieldValue: 'value'
});
$('#inputpicker-1').on("focus", function() {
$('#test').inputpicker("set" , "filterOpen", true);
});

I think, you should deactivate the filter at the start of the code otherwise, it will display only what is provided according to the content of the textbox.
According to the document of InputPicker, setting filterOpen to false deactivates filter and all your data will be displayed.
More precisely, you only have to set it to false in your initial code
$(document).ready(function(){
$('#test').inputpicker("val" , "1");
});
$('#test').inputpicker({
data:[
{value:"1",text:"USD"},
{value:"2",text:"EUR"},
{value:"3",text:"CNY"}
],
fields:[
{name:'value',text:'Id'},
{name:'text',text:'Title'}
],
autoOpen: true,
headShow: false,
filterOpen: false,
fieldText : 'text',
fieldValue: 'value'
});

Kendo UI Grid. DropDown does not show the pre-selected value as default

First of all i'd like to apologize for my humble english.
I am currently experimenting with Kendo UI, more specifically the grid.
I have the colums "id", "event", "database", "address" and "eventtype" (simplified).
columns: [
{field: "id", hidden: true},
{field: "event", hidden: false, title: "Event"},
{field: "database", hidden: false, title: "Database", width: 100},
{field: "address", hidden: false, title: "Address", width: 100},
{field: "eventtype", hidden: false, title: "Event Type", editor: eventtypeDropDownEditor},
{command: ["destroy", "edit"], hidden: false, width: 200}],
All these are common text-inputs and buttons, except the eventtype. The Event Types are stored in a separate table (id and eventtype(string)).
The eventtypeDropDownEditor is as following
function eventtypeDropDownEditor(container, options) {
$('<input data-text-field="eventtype" data-value-field:"id" data-bind="value:' + options.field+ '"/>')
.appendTo(container)
.kendoDropDownList ({
autoBind: false,
dataTextField: "eventtype",
dataValueField:"id",
dataSource: {
transport: {
read: "https://some.url/default/ajax/geteventtype",
dataType: "json"
}
},
});
};
The called dataSource URL delivers a JSON like
[{"id":"0","eventtype":"placeholder0"},{"id":"1","eventtype":"placeholder1"},{"id":"2","eventtype":"placeholder2"},{"id":"6","eventtype":"placeholder3"}]
So far, so good. Editing, deleting, creating is working perfectly.
My only problem (for 6 hours now) is to display the corresponding Event Type in my column eventtype after enabling the edit.
In other words: if i click the "edit" button, the displayed text under eventtype "placeholder1" changes to a drop down. But instead of pre-selecting "placeholder1" the dropdown is empty. I have to manually click the dropdown and choose one of the options. Even if i only want to change the database for example, i always have to select an Event Type to have a valid value for my query.
While testing different solutions i stumbled upon the index option. Strangely enough, this one isnt working either. Nor does changing the data-bind value.
I guess its some sort of "greater" error preventing any kind of option to work as intended for that context. But i simply cant find a solution or "direction" to investigate any further.
I would really appreciate a solution or "hint" for that matter!
Greetings
Marcel

I guess the problem is the equal sign in data-bind="value=' + options.field+ '".
Try changing to data-bind="value:' + options.field+ '".

I found the solution.
Instead of calling the function eventtypeDropDownEditor in the fields definition, i had to define the editor directly in there.
{field: "eventtype", title: "Event Type",
editor: function(container) {
var input = $('<select id="eventtype" name="eventtype">');
input.appendTo(container);
input.kendoDropDownList({
dataTextField: "eventtype",
dataValueField: "eventtype",
dataSource: {
transport: {
read: "https://some.url/default/ajax/geteventtype",
dataType: "json"
}
}
}).appendTo(container);
}
},

Does aikau MultiSelectInput support more then one value?

Consider widget config:
{
id: "MyMultiSelect",
name: "alfresco/forms/controls/MultiSelectInput",
config: {
label: "My multi-select input",
name: "assoc_myGood",
width: "400px",
addedAndRemovedValues: true,
valueDelimiter: ",",
choiceCanWrap: true,
choiceMaxWidth: "100%",
optionsConfig: {
labelAttribute: "name",
queryAttribute: "name",
valueAttribute: "value",
publishTopic: "ALF_CRUD_GET_ALL",
publishPayload: {
url: "/slingshot/datalists/lists/node/workspace/SpacesStore/dc1b9c22-b955-4e5f-9b10-2343680a15f5",
resultsProperty: "response.datalists"
},
searchStartsWith: true
}
}
}
Values are retrived, but when it comes to select, it possible to select one value but after that all other values become disabled. E.g. only one value can be selected.
So does MultiSelectInput support select more then 1 value?

Yes, MultiSelectInput does support the selection of more than one value. See this live example on the Aikau Sandpit. I would suggest that the issue is that your optionsConfig is incorrect. Based on your other question I would say that each option is being assigned the same value which is why only one option can be selected.

select2 is not updated after disable of selected option

I'm trying to disable the selected option in select2 but it seems like the select2 is not refreshing.
My purpose is to disable each item in the select2 list after selecting it. I see the HTML that the option got the disabled attribute but the option is still enabled in the select2 element.
$("#select-filter").select2({
placeholder: "Select a category",
data:[{
id: "",
text: ""
},{
id: "project",
text: "project"
},{
id: "date",
text: "date"
},{
id: "user",
text: "user"
}]
}).on("change", function(e) {
$("#select-filter :selected").attr("disabled", "true");
});
See example : https://jsfiddle.net/bkqeqbay/1/

You can use the select event and the data like so:
...}).on("select2:select", function(e) {
console.dir(e.params.data);
e.params.data.disabled = true;
});
Updated fiddle: https://jsfiddle.net/bkqeqbay/4/
Note that if you must also disable the underlying select element option you can do:
var index = $(e.params.data.element).index();
$("#select-filter").find('option').eq(index).prop('disabled',true);

How to select an element in Webix richselect area?

I use Webix 2.5.14. There was a problem with a component Richselect.
In this form there is a richselect with options.
webix.ui({
view: "form",
id:"addAccessForm",
borderless: true,
elements: [
{
view: "richselect",
id:"rule",
label: 'Rule',
value:1,
options:[
{id:1,value:"R"},
{id:2,value:"W"},
{id:3,value:"RW"},
{id:4,value:"RW+"}
]
},
....
]
});
I click on the button and opens a form for editing, and I need to select an element in the richselect area, for example with id = 3.
How to do it? setValue () adds a new one (element), but doesn't select what i need.

You need to use
$$("rule").setValue(3); // 3 - id of record
It is a bit counterintuitive, but you need to use the "id" of record in the setValue command, not the value.

See my example:
webix.ui({
view: "form",
id:"addAccessForm",
borderless: true,
elements: [
{
view: "richselect",
id:"rule",
label: 'Rule',
value:1,
options:[
{id:1,value:"R"},
{id:2,value:"W"},
{id:3,value:"RW"},
{id:4,value:"RW+"}
]
},
{ view:"button", value: "Select Value", click:function(){
$$("rule").setValue(2);
}}
]
});
or if you prefer http://webix.com/snippet/5df7e1b1