How can I write a dijit autocomplete combo box that contains multiple columns, such as this...
john, doe, cod 13, street sample 1
steve, smith, cod 14, street sample 2
micheal, james, cod 14, street sample 3
This is my code:
var filteringSelect = new dijit.form.ComboBox({
id: "managerSelect",
name: "managers",
value: "",
store: managerStore,
searchAttr: "serial"
},
"managerSelect");
}
However it only shows a single column like this:
john
steve
micheal
If I understand correctly,you need to override "labelFunc" for combo box. E.g.
// define combo box
var filteringSelect = new dijit.form.ComboBox({
id: "managerSelect",
name: "managers",
value: "",
store: managerStore,
searchAttr: "serial",
labelFunc:"myLabelFunc"
},
"managerSelect");
}
// define labelFunc
function myLabelFunc(item, store){
var label=store.getValue(item, 'first')+","+store.getValue(item, 'last');
return label;
}
HTML page - Example
Related
Let's say I have an array of users:
usersData = [
{ id: 21, name: 'John Dean' },
{ id: 3, name: 'Mike Brine' },
{ id: 6, name: 'Tom Kalvi' }
]
names in userData are generated from another array with full user information: user.first_name + user.last_name
When I build Vue-Chart Bar, labels array store this data with indexes:
labels = { 0: "John Dean", 1: "Mike Brine", 2: "Tom Kalvi" }
And when I want to get original ID from Bar event onClick, I receive only index.
I need to load additional information for each user based on Bar click, but I need to have original ID.
What is the easiest way to get it?
Thank you in advance
Well if you have an index clicked just do like this:
usersData[clickedIndex].id
suppose i have a form group named as "birthForm"
this.birthForm = this.fb.group({
address: this.fb.group({
id: null,
state: null,
zip: null
})
});
Now i want the form group name of state i.e "address", how can i get the form group name
I have a morris.js graph. I have a table with 3 columns id with values such as 1,2,3 etc, usernames with values such as sophie, nick, Paul etc and timesloggedin with values such as 69, 58, 4 etc.
I created a chart that has the ids on x and the timesloggedin on y.
What I want is instead of displaying the id number on the bottom of the chart under the bars, to have their usernames. You can see the chart here:
http://kleanthisg.work/chartsnew2.php
CODE:
http://kleanthisg.work/CODE.TXT
table:
user list:
You need to provide the username and set it as xkey
Morris.Bar({
element : 'chart_line_1',
data:[{ id:'1', timesloggedin:65, username: 'Paul'},
{ id:'5', timesloggedin:10, username: 'John'},
{ id:'7', timesloggedin:4, username: 'Steve' }],
xkey:'username',
ykeys:['timesloggedin'],
labels:['timesloggedin'],
hideHover:'auto',
});
Is there a way to chain filters together where by filters applied in one column will pre-filter the available filters in other columns? Primarily I'm interested in this from a multi_select standpoint, but it could be universal to all filters types I guess.
For example:
Column 1's data contains:
Oklahoma
Missouri
Utah
Texas
Kansas
Column 2's data contains:
Obama
Romney
From the dataset I know that all Column 1 data that has 'Oklahoma' will always mean that Column 2 will equal 'Romney'. Thus, if I select 'Oklahoma' from a mutli_select, then the drop down for the multi_select for Column 2 should now only show 'Romney'.
Basically, can I pre-filter my filters based on other filters already put in place?
I think you are asking about the cumulative_filtering: true option of yadcf,
See the showcase page and here a code sample:
$(document).ready(function () {
'use strict';
var oTable;
oTable = $('#example').DataTable();
yadcf.init(oTable,
[
{
column_number : 0,
filter_type: "multi_select",
select_type: 'select2'
},
{
column_number: 3,
filter_type: "auto_complete",
text_data_delimiter: ","
},
{
column_number : 4,
filter_type: "multi_select",
select_type: 'select2',
column_data_type: "html",
html_data_type: "text",
filter_default_label: "Select tag"
}
],
{
cumulative_filtering: true
}
);
});
As you see the cumulative_filtering: true is an object property, an object that that is a third argument of the init function, when using the .yadcf([{...}]) api you should pass that object as a second arument to the .yadcf constractor, like this:
.yadcf([{...}], {cumulative_filtering: true})
I have two different JSON structures. One represent the individual users of the system and other represents groups made of these users. So, I created two memory stores with these (each has different idProperty - userId and groupId, respectively).
I have a filteringSelect dropdown and my requirement is to add both of these as the data store of the list, so that either a valid user or a valid group could be selected from the dropdown.
Two possible ways I could think of doing this :
1) by creating one common memory store of two JSONs - but idProperty is different so not sure how this is possible
2) by adding both the memory stores to the widget but again different idProperty so not sure.
I am very new to using Dojo so any help would be really appreaciated. Thanks in advance!
I think that, if you use a store to represent something (model data), it should be formed so that it can be used properly within a widget.
So in your case I would add both of them to a single store. If they have a different ID (for example when it's a result of a back-end service), then you could map both types of models into a single object structure. For example:
var groups = [{
groupId: 1,
groupName: "Group 1",
users: 10
}, {
groupId: 2,
groupName : "Group 2",
users: 13
}, {
groupId: 3,
groupName : "Group 3",
users: 2
}];
var users = [{
userId: 1,
firstName: "John",
lastName: "Doe"
}, {
userId: 2,
firstName: "Jane",
lastName: "Doe"
}, {
userId: 3,
firstName: "John",
lastName: "Smith"
}];
require(["dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/_base/array", "dojo/domReady!"], function(Memory, FilteringSelect, array) {
var filterData = array.map(groups, function(group) {
return {
id: "GROUP" + group.groupId,
groupId: group.groupId,
name: group.groupName,
type: "group"
};
});
Array.prototype.push.apply(filterData, array.map(users, function(user) {
return {
id: "USER" + user.userId,
userId: user.userId,
name: user.firstName + " " + user.lastName,
type: "user"
};
}));
});
In this example, we have two arrays groups and users, and to merge them I used the map() function of dojo/_base/array and then I concatenated both results.
They still contain their original ID and a type, so you will still be able to reference the original object.
From my previous experiences, I learned that your model data should not represent pure business data, but data that is easily used in the view/user interface.
By giving both arrays a similar object structure, you can easily use them in a dijit/form/FilteringSelect, which you can see here: http://jsfiddle.net/ut5hjbyb/