Please see the following example fiddle :
Although I can select the option from the dropdown, typing doesnt autocomplete.
I would expect that when you type B or A you should get the recommendation for banana, apple.
Only when of my items in the list is not an existing item it should ask me to add it...
var data = [ "banana", "apple", "orange" ];
var items = data.map(function(x) { return { item: x }; });
$('#input-tags').selectize({
delimiter: ',',
persist: false,
maxItems: 1,
create:true,
options: items,
labelField: "item",
valueField: "item"
});
Any ideas?
Note the same scenario seems to be working with predefined values :
Fiddle
You need to add a
searchField: "item"
to the selectize declaration
here's the fixed fiddle: http://jsfiddle.net/wh6Nx/
to add items you need a
create: function(input) {
return {
value: input,
text: input
}
}
fiddle with both: http://jsfiddle.net/2ZrEu/
Related
I have a BootstrapTable select box. I know you can use a function to populate the values in the select box. I'd like that function to change which array it provides based on the value of a second column (called Text_example).
So in my example, if Text_example for that row is 1, the select box should have the following data: [{1:1}]. if Text_example for that row is 2, the select box should have the following data: [{2:2}]
I think my problem is that I don't know how to pass just the row's data to the function get_values as my method seems not to be working.
Full Fiddle: http://jsfiddle.net/goxe6ehg/
var data = [{"Text_example": 1},{"Text_example": 2}];
function get_values(data) {
if (data['Text_Example'] === 1) {
return [{1:1}];
}
else {
return [{2: 2}]
}
}
$('#table').bootstrapTable({
columns: [
{
field: 'Select_example',
title: 'Select_example',
editable: {
type: 'select',
source: get_values($('#table').bootstrapTable('getData'))
}
},
{
field: 'Text_example',
title: 'Text_example'
}
],
data: data
});
EDIT: I over-simplified my example. Rather than having a static field for text_example I need it to be a select box, where the value for select_example changes based on what the user has selected in text_example.
Updated JSFiddle: http://jsfiddle.net/4wwv18Lq/4/
You can use the oninit handler on the bootstraptable library.And add the editables by iterating through the data object.
var data = [{"Text_example": 1},{"Text_example": 2}];
$('#table').on('editable-init.bs.table', function(e){
var $els = $('#table').find('.editable');
$els.each(function(index,value){
$(this).editable('option', 'source', data[index])
});
});
$('#table').bootstrapTable({
columns: [
{
field: 'Select_example',
title: 'Select_example',
editable: {
type: 'select'
}
},
{
field: 'Text_example',
title: 'Text_example'
}
],
data: data
});
JSfiddle link
http://jsfiddle.net/km10z2xe/
I am trying to implement the "RowSelectors" feature on the iggrid, but it will not change to a the next row.
On further inspection, i have got the selected row method and each row shows the same id. I am returning my data via ajax, if i use static json in a variable and use that as a datasource, it works as expected so not sure what the issue is..
$("#selector").igGrid("selectedRow");
I can only acheive a row change when holding control and clicking..
Object {element: n.fn.init(1), index: 0, id: 3407751001}
then next row is
Object {element: n.fn.init(1), index: 1, id: 3407751001}
Settings..
features: [
{
name: "Sorting",
columnSettings: [
{
columnIndex: 4,
allowSorting: true,
firstSortDirection: "ascending",
currentSortDirection: "descending"
}
]
},
{
name: 'RowSelectors',
enableCheckBoxes: true,
checkBoxStateChanging: function (ui, args) {
return false;
},
multipleSelection: true,
rowSelectorClicked: function (evt, ui) {
// Handle event
},
},
{
name: 'Selection'
}
]
The issue is already resolved, but I'm adding the answer so it doesn't stay unanswered.
The primaryKey column the igGrid uses needs to be a column with unique identifiers for each record.
I have some rows I hide like that:
$("#"+rowid).hide();
My problem is that when the user clicks to sort a colmun, the hidden rows reappeared. There is a way to avoid this?
EDIT
I will try to explain a little bit more what I did with code example.
I start to create my grid with this params (and without datas).
var params = {
datatype: "local",
data: [],
caption: "Grid",
colNames:[ "Column A", "Column B" ],
colModel:[
{ name:"colA", key: true },
{ name:"colB" }
]
};
For some reasons, I reload next the grid with datas, like this:
$("#myGrid").jqGrid("clearGridData")
.jqGrid("setGridParam", { data: myDatas })
.trigger("reloadGrid");
And I have checkboxes with listeners, like this one:
$("#checkbox1").on("change", onCheckbox1Changed);
function onCheckbox1Changed() {
var rowid = ...;
var datas = $("#myGrid").jqGrid("getRowData");
for(var key in datas) {
if(datas[keys].colB === "" && $("#checkbox1").val() === true) {
$("#"+rowid).show();
} else if(datas[keys].colB === "" && $("#checkbox1").val() === false) {
$("#"+rowid).hide();
}
}
}
This code works like I want. Rows are hidden/shown depending on checkboxes. The problem is when I clik on a column to sort it, the hidden columns reappeared.
EDIT 2
I could force the grid to hide the rows after a sort. But I didn't find where I can find an event like "afterSort". There is "onSortCol" but it is called before the sort.
A solution will be to force that using "loadComplete". Like this:
var params = {
// ...
loadComplete: onLoadComplete
}
function onLoadComplete() {
onCheckbox1Changed();
}
I tried it and it works. But I am not very "fan" with this solution.
I find hiding some rows after displaying the page of data not the best choice. The main disadvantage is the number of rows which will be displayed. You can safe use $("#"+rowid).hide(); method inside of loadComplete only if you need to display one page of the data. Even in the case one can see some incorrect information. For example, one can use viewrecords: true option, which place the text like "View 1 - 10 of 12" on right part of the pager.
I personally would recommend you to filter the data. You need to add search: true option to the grid and specify postData.filters, which excludes some rows from displaying:
search: true,
postData: {
filters: {
groupOp: "AND",
rules: [
{ field: "colA", op: "ne", data: "rowid1" },
{ field: "colA", op: "ne", data: "rowid2" }
]
}
}
If you would upgrade from old jqGrid 4.6 to the current version (4.13.6) of free jqGrid, then you can use "ni" (NOT IN) operation:
search: true,
postData: {
filters: {
groupOp: "AND",
rules: [
{ op: "ni", field: "id", data: "rowid1,rowid2" }
]
}
}
In both cases jqGrid will first filter the local data based on the filter rules and then it will display the current page of data. As the result you will have the perfect results.
Sorting of such grid will not not change the filter.
Don't hide columns after the creation of the table, hide them directly when you create the grid using the option hidden, like this:
colNames: ['Id', ...],
colModel: [
{ key: true, hidden: true, name: 'Id', index: 'Id' },
....
]
If you want to hide columns on particular events after the creation of the grid, look at this article.
Hope it was you were looking for.
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
With the following html:
<input type='hidden' id='cantseeme'>
I'm having no trouble creating a Select2 control dynamically, and adding my options:
// simplified example
var select2_ary = [];
select2_ary.push({
id : "one",
text : "one"
});
select2_ary.push({
id : "two",
text : "two"
});
$("#cantseeme").select2({
placeholder : "Pick a number",
data : select2_ary
});
However, I can't seem to figure out how to add optgroups this way. I found this discussion on github, and this article on a blog, but the former doesn't seem to discuss dynamic optgroup additions and I simply can't make any sense of the latter.
Anyone have any ideas?
I found the answer buried inside the github discussion you linked to, the object structure for optgroups is as follows:
{
id : 1,
text : 'optgroup',
children: [{
id : 2,
text: 'child1'
},
{
id : 3,
text : 'nested optgroup',
children: [...]
}]
}
Demo fiddle
Yes, koala_dev's answer above is correct. However, if you do not want option group headers to be selectable tags, then remove the "id" field from headers that you pass into select2. Children[ ] items still need an "id" field to be selectable. For example:
// `Header One` Is Selectable
[{
id : 0,
text : "Header One",
children : [{
id : 0,
text : "Item One"
}, {
...
}]
}]
// `Header One` Is Not Selectable
[{
text : "Header One",
children : [{
id : 0,
text : "Item One"
}, {
...
}]
}]