Am facing issue with the multiselect dropdown, Can someone help me out.While configuring the API through Dropdown, Filter API need to be filter for the all 5 input multiselects based on the initial Dropdown After the filter should get the next avaliable data should be reflect in the Next Dropdown selector.
{
"input_data": [],
"filter_data": {
"customers": [
"Asda"
],
"sub_categories": [
"CAT CARE & TREATS"
],
"brands": [
"DREAMIES"
],
"promo_groups": [
"Dreamies 200g"
],
"years": [
"2021"
],
"quarters": [
"Q2"
]
},
"level": "feature_type"
}
Related
I need help because I'm losing my mind haha ...
I have the main array products with this (it's just a sample) :
[
{
"from": "country",
"maker": "name of maker",
"id": "1969",
"image": "image.jpg",
"label": "355",
"name": "name of product",
"price": "12.90",
"subscriber_price": "8.90",
"url_path": "url",
"occasion": null,
"colour": "31",
"origin": "397",
},
{
"from": "country",
"maker": "name of maker",
"id": "2043",
"image": "image.jpg",
"label": "362",
"name": "name of product",
"price": "24.90",
"subscriber_price": "24.90",
"url_path": "url",
"occasion": "51,376,155,39",
"colour": "31",
"origin": "395"
}
]
I'm working this the Picker Component. So, what I'm doing is :
I have a Picker to select products with their "colour".. then I have another one to filter the selected products (only with colour:31 for example) with their "origin" and finally I want to filter them through their "label" ...
The fact is I have 3 Pickers, 3 functions to select them and it's working but the problem is I'm erasing with a setState my render of "displayProducts". So, when I have selected the 3 options, I can't go back..
For example, I choose "colour:31" with "origin:397" and "label:355" .. I can't go back and tell : finally I want "origin:395" because it doesn't exist anymore, etc... and one "colour" can have different "label, origin, ..."
I'm doing something like this but it's only available for ONE option and not multiple options and without keeping a solution to find again my filtered products :
onChangeGetOrigin(originValue) {
this.setState(() => ({
activeOrigin: originValue,
displayProducts: this.state.displayProducts.filter(product => product.origin == originValue)
}));
}
Do anyone can understand what I'm saying ? :-D
You can maintain two arrays. One contains the complete list of products and the other one is a derived array after applying the filters. You can use the derived list for display and original array for selection.
I have a problem by which I'm unable to make Vue-Multiselect display what I want properly.
Current Behaviour:
Here is my code:
<multiselect
v-model="displayCategories"
:selected="displayCategories"
:options="optionsForSubCat"
:searchable="false"
:allow-empty="true"
deselect-label="Can't remove this value"
label="subCategories"
track-by="subCategories"
>
</multiselect>
This is my json object to display the Type of Sub-Category:
"displayCategories": {
"categoryId": "3080854a-13d9-4e38-ab96-358aa6405a2c",
"categoryName": "Furniture",
"subCategories": [
{
"subCategoryName": "Sofa",
"subCategoryId": "21eb061d-9c67-4c55-ac48-e33e684a307c",
"createdAt": "2017-07-24T13:07:18.000Z",
"updatedAt": "2017-07-24T13:08:28.000Z",
"fk_categoryId": "3080854a-13d9-4e38-ab96-358aa6405a2c"
},
{
"subCategoryName": "Bed",
"subCategoryId": "2af11eee-5fce-4d97-b483-00a02de123ca",
"createdAt": "2017-07-24T13:06:04.000Z",
"updatedAt": "2017-07-24T13:08:28.000Z",
"fk_categoryId": "3080854a-13d9-4e38-ab96-358aa6405a2c"
}
]
}
Even if i changed the label and track-by to "subCategoryName", it does not even show the dropdown at all.
The expected behaviour would be Multiselect would show "Sofa", "Bed" in the dropdown.
How do i go about achieving the expected behaviour?
Thank you for your help!
I have a dhtmlx gantt chart in my page, normally it would have work perfectly but now when I have a JSON file with nested array all my output would be unrecognized instead. I'm trying to populate the official name.
Can Anyone help me with this? Thank you very much.
JSON
{
"data": [
{
"assign_to": {
"id": 3,
"employee_id": "28141",
"official_name": "Hal Jordan",
},
"task": {
"id": 1,
"name": "Modeling",
"description": "3d modeling work"
},
"start_date": "2017-06-15",
"end_date": "2017-06-19"
},
{
"assign_to": {
"id": 3,
"employee_id": "28144",
"official_name": "Kyle Rayner",
},
"task": {
"id": 8,
"name": "Composting",
"description": null
},
"start_date": "2017-06-01",
"end_date": "2017-06-08"
}
]
}
Javascript
gantt.config.columns = [
{name: "assign_to.official_name", label: "Assign To", align: "left", width: 70},
];
function initializeGantt() {
gantt.init("my_scheduler");
gantt.load("/dashboard/ganttchart_list/5/?format=json");
}
initializeGantt();
HTML
<div id="my_scheduler" style='width:1405px; height:245px;'></div>
dhtmlx gantt doesn't support nested structure, so you'll need to preprocess your items before loading them to gantt.
Since you know which format you have and which format is expected by gantt (https://docs.dhtmlx.com/gantt/desktop__supported_data_formats.html#json ) it shouldn't be a problem.
The most important thing
Make sure data items have 'id' property
when you define column name like this:
{name: "assign_to.official_name", label: "Assign To", align: "left", width: 70},
column name can't be mapped to a property of a nested object, so you'll either have to flatten structure during loading, very roughly, it can be done in following way:
http://snippet.dhtmlx.com/129d2e043
Or define a column template which would take value from nested object:
http://snippet.dhtmlx.com/9e8e65e85
please check the console output for a result dataset
I am trying to make it where my links in doxygen on my tree-style navbar have multiple links on the same level as the main page. I was able to accomplish that by changing the order of links in the navtreedata.js . Now the problem is that by doing this I appear to have made it where it thinks everything on the first level of links is the index/mainpage as far as the navtree is concerned. It shows the index/mainpage with the blue highlight behind it as if it is the one I clicked. The page displays the right information but it looks weird. Even worse, I have some links I placed on the top level of links(same level as the main page)that have subpages. Whenever I click a subpage it folds up the foldout, which is really annoying. Anyone know how I can fix this? I am afraid I will need to modify the navtree.js or the html/css somewhere but I don't know much about javascript or HTML/CSS. I believe it is upset because my links no longer match up with the indexes they are given in the navtreeindex0.js.Also if anyone knows an easier way of accomplishing my goals without changing the navtreedata.js please let me know.
The javacript for my navetree since I was asked for code:
var NAVTREE =
[
[ "Main page", "index.html", [
[ "page 1", "page1.html", null ],
[ "page2", "page2.html", [
[ page3", "page3.html", null ],
[ "page4", "page4.html", null],
[ "page5", "page5.html", [
[ "page6", "page6.html", null ],
[ "page7", "page7.html", null ]
] ],
[ "page8", "page8.html", null ]
] ],
[ "page9", null, [
[ "page10", "page10.html", null ]
] ],
[ "page11", "page11.html", null ]
] ],
[ "SECOND LEVEL MENU ENTRY", "sample-file-secondary.html", [
[ "page 12", "page12.html", null ],
[ "page 13", "page13.html", null ]
] ],
[ "THIRD LEVEL MENU ENTRY", "sample-file-third.html"]
];
var NAVTREEINDEX =
[
".html"
];
var SYNCONMSG = 'click to disable panel synchronisation';
var SYNCOFFMSG = 'click to enable panel synchronisation';
I'm giving following data input to select2
data = [{
"id": "all",
"text": "All",
"children": [{
"id": "item1",
"text": "item1"
}, {
"id": "item2",
"text": "item2"
}]
}];
and I'm initialising select2 as:
$(parent).select2({"data":data});
Now to select the value "item1", I did
$(parent).select2("val",["item1"]);
However instead of value "item1" value "all" is getting selected. How to select value item1?
To set the selected value using select2 you should use:
$(parent).val("item1").trigger("change");
From the release notes:
You should directly call .val on the underlying element instead. If you needed the second parameter (triggerChange), you should also
call .trigger("change") on the element.
$("select").val("1"); // instead of $("select").select2("val", "1");
JSFiddle where item1 is selected.
JS:
var data = [{
id: 'all',
text: 'All',
children: [{
id: 'item1',
text: 'item1'
}, {
id: 'item2',
text: 'item2'
}]
}];
$('.js-example-data-array').select2({data:data});
$('.js-example-data-array').select2('val',['item1']);
HTML:
<select class="js-example-data-array">
</select>
I tried to make this demo to show you that it works. The demo, uses the select tag as a selector for an empty and existing select element. Indeed, I don't know what are you meaning by parent:
<select>
</select>
<script>
data = [{
"id": "all",
"text": "All",
"children": [{
"id": "item1",
"text": "item1"
}, {
"id": "item2",
"text": "item2"
}]
}];
$('select').select2({
"data": data
});
$('select').select2("val", ["item2"]);
</script>
I'm not sure if you mean that the value "All" gets selected at start or if you want to select "item1" by code and it doesn't work. I find it strange that "All" gets selected as value since it should be treated as a category, even by adding
$(".select2-text").select2("val",["item1"]);
it won't select "All" for me. If i add
$(".select2-text").select2("val",["item2"]);
It will select "item2" for me (which means the method to select the item works, though it's not the best way, as stated in Lelio Faieta's Answer)
if i add
$(".select2-text").select2("val",["all"]);
it won't select "All" for me, it will just show me a blank select. So I think there must be an issue with your code because in a clean page there seems to be no way to select "All"
Can you show us the whole code, including the html of your page (at least the part relevant to the select). I have tried this (see plunker here: http://plnkr.co/edit/m6pFUt?p=preview )
<script>
$(document).ready(function() {
data = [{
"id": "all",
"text": "All",
"children": [{
"id": "item1",
"text": "item1"
}, {
"id": "item2",
"text": "item2"
}]
}];
$(".select2-text").select2({
"data": data
});
});
</script>
<select class="select2-text"></select>
And it starts with item1 selected, while "All" is treated as a category. So maybe it's just because something is wrong in your code/HTML.
What version of Select2 are you using? i'm using 2-4.0.0