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"
}, {
...
}]
}]
Related
We are using Tabulator (4.8.3) and have a SELECT based header filter on one column. It all works great except we are trying to add some formatting to some of the select options. They display in the select dropdown with the formatting as expected. However once a selection is made, the selected text displays with the raw html (not formatted).
A JS fiddle here shows what we mean. Make a selection and see the formatting displayed in the selection text (e.g. the bold tags and non-breaking spaces).
We looked for a headerFilterFormatter or something along those lines in Tabulator but could not find anything. We also saw this post:
How do I create a multi-select header filter in tabulator?, but it seems like overkill to write all this just to sanitize option texts display.
We don't care id the selected text is formatted or not, we just don't want the html displaying in the value. We could possibly sanitize it externally every time a selection is made, but that does not seem like a great idea because it will tightly couple everything.
Does anyone know if there is a quick, easy way to address this in Tabulator?
var table = new Tabulator("#table", {
layout: "fitDataFill",
columns: [{
title: "ID",
field: "id"
},
{
title: "Topic",
field: "topic",
width: 120,
headerFilterPlaceholder: "-- Select --",
headerFilter:"select",
headerFilterParams: {values: paramLookup}
},
],
});
var tableData = [{
id: 1001,
topic: "1.0",
},
{
id: 1002,
topic: "1.1",
},
{
id: 1003,
topic: "2.0",
},
{
id: 1004,
topic: "3.0",
},
];
function paramLookup(cell){
return {
"1.0":"<b>1.0</b>",
"1.1":" 1.1",
"2.0":"<b>2.0</b>",
"3.0":"<b>3.0</b>",
};
}
table.setData(tableData);
The problem you are facing is you are trying to style the labels for the select list values in the values array. The select editor uses an input element to show the selected value, therefor when you are selecting a value it is showing the label as text.
The correct approach is to include the actual value in the label and then use the listItemFormatter to format the list as wanted, that way you store a plain text value against the label and display it as html:
{
title: "Topic",
field: "topic",
width: 120,
headerFilterPlaceholder: "-- Select --",
headerFilter:"select",
headerFilterParams: {
values: [1.0, 1.1, 1.2],
listItemFormatter:function(value, title){
return "<b>" + title + "</b>";
},
}
},
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);
I'm trying to achieve a filter check box option with dynamic data by category and sub category.
How I want is,
[] Category
[] Sub Category
[] Sub Category
[] Category
[] Sub Category
[] Sub Category
[] Sub Category
... and so on
Assume [] as check box above.
Here's the sample json data :
[
{
"category": {
"name": "AAA - 1"
},
"parentcategory": {
"name": "AAA"
},
"title" : "XXXXX",
},
{
"category": {
"name": "AAA - 2"
},
"parentcategory": {
"name": "AAA"
},
"title" : "YYYY",
}
]
Based upon the above data, what i'm really trying to want is,
Sidebar :
[] AAA
[] AAA - 1
[] AAA - 2
Main Content :
Initially show title. After something is checked, show title which are related to that category/sub category.
Note : Pl don't think that I'm asking without any effort. I've seen some examples like in JSBin, but i couldn't find something like i wanted to achieve. Btw I'm new to Angular.
If i understand correctly you want something like that:
http://jsfiddle.net/ms403Ly8/67/
Firstly i found first parent item from your json array. Then found this parent's children and add into it.
angular.forEach($scope.itemList, function(itm) {
var filteredItem = $filter('filter')($scope.itemList, { parentcategory: itm.parentcategory.name});
if($filter('filter')($scope.parentItems, { name: itm.parentcategory.name}).length == 0){
$scope.parentItems.push({name: itm.parentcategory.name, children:filteredItem});
}
});
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/
I am using the SimpleCart Javascript Library.
I want to add an id to each product and when the user proceeds to checkout,
these id's would be sent as well.
Instead of these columns, for example:
Name Price
book 5$
I want to have a Product Id column include as well:
Id Name Price
3 book 5$
I've tried inserting the id into the options, but I had no luck doing so.
Can someone show me a detailed example doing so?
This can be set up like this:
In your simplecart set up under "cartColumns" add
{ attr: "id" , label: "ID" }
Like this:
cartColumns: [
{ attr: "image", label: "Item", view: "image"},
//Name of the item
{ attr: "name" , label: "Name" },
{ attr: "id" , label: "ID" },
//etc………
Then you can use either:
<span class="item_id">ID:1</span>
or like this:
simpleCart.add({ name: "Shirt" , price: 4, id: 1 });
and it should show up in your columns.
Based on the documentation examples for item.get and item.set you should be able to set your own columns.
var myItem = simpleCart.add({ productId: "A12", name: "Awesome T-Shirt" ,
price: 10 , size: "Small" });
myItem.get( "productId" ); // A12
myItem.set( "productId" , "C54" );
myItem.get( "productId" ); // C54
Also, each item has a built-in ID: simpleCart.Item.id()
var myItem = simpleCart.add({ name: "Shirt" , price: 4 });
myItem.id(); // "SCS-1"
You could also create a custom view for your own ID.
CREATING YOUR OWN VIEW
You can create custom views for the cart by
setting the view to a function instead of a string. The function
should take two arguments, the item for that row, and the column
details you specify.
{ view: function( item , column ){
// return some html
} ,
label: "My Custom Column"
}