I am trying to make a website using Fullcalendar scheduler plugin and want to be able to use the items from my Model to fill in the "Resources".
the resources-function looks like this:
resources: [
{ id: 'room01', title: 'Room 1' },
{ id: 'room02', title: 'Room 2' },
],
But I want to be able to do something like this:
resources: [
#foreach (var item in model)
{
{ id: item.id, title: item.firstname };
}
],
However its not working and I cant really understand why.
I tried using parenthesis to make it look the same like this:
"{ id: '" + item.id + ", title: '"+ item.firstname + " }"
but its not working.
I am very new to coding and never used advanced commands like this before.
Please advice how I could solve this.
Related
I have this model from my oData service:
{
"entity": [
{
"valueA": "ABC",
"valueB": "DEF",
"childL1": [
{
"valueC": "GHI",
"valueD": "JKL"
},
{
"valueC": "MNO",
"valueD": "PQR"
}
]
},
{
"valueA": "ABC",
"valueB": "DEF",
"childL1": [
{
"valueC": "GHI",
"valueD": "JKL"
},
{
"valueC": "MNO",
"valueD": "PQR"
}
]
}
]
}
Notice that for each 'child' in my 'entity' set, there's also an array of possible 'childL1'.
I have table in UI5 and I bound the data in the controller by:
this.myTable.bindAggregation('items', {path: /entity, template: this.oTemplate});
This works but the table displays:
Child1
Child2
However, what I want to do is:
/0/ChildL1/0
/0/ChildL1/0
/1/ChildL1/0
/1/ChildL1/0
So, to do that, I can do:
this.myTable.bindAggregation('items', {path: /entity/childL1, template: this.oTemplate});
The result would be as expected. However, I need to also display valueA in my table. Since my binding is at child1, I won't be able to get /entity/n/valueA.
What possible solution can I do for this? Is there a way to backtrack provided that childL1 has a 'key'? Or can I get entity then display childL1 in the table?
Since you haven't mentioned table control like which control you are using - sap.ui.table.Table or sap.m.Table. In case of "sap.ui.table.Table" you can bind the individual column like below
oTable.addColumn(new sap.ui.table.Column({
label : new sap.m.Label({
text : " "
}),
template : new sap.m.Text({
maxLines : 1
}).bindProperty("text", "valueA"),
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.m.Label({
text : " "
}),
template : new sap.m.Text({
maxLines : 1
}).bindProperty("text", "childL1/valueC"),
}));
Like this you can add any no. of columns with different path but their parent path should alsways be same and then at last you can bind your main path to table rows like this-
oTable.bindAggregation("rows", {
path : "/entity"
});
and in case of sap.m.Table you can do it like this-
new sap.m.Table({ items:{
path:"/entity",
template: new sap.m.ColumnListItem({
cells:[
new sap.m.Text({
text:"{valueA}"
}),
new sap.m.Text({
text: "{childL1/valueC}"
})
]
})
}
})
I'm using select2 (v 4.0.3) with Bootstrap 3 and I have to display several hundreds of alternatives per optgroup. Now I wish to collapse/expand the optgroups on click to make it a bit more manageable. I couldn't find any info on this so I thought I'd post a question.
I found an approach to this problem but I couldn't get it to work (it seems a bit outdated issue #730). The basic problem with that approach now is that in the current version of select2 elements aren't created until they are needed. Also, the class names seem to have changed a bit, as have apparently the names of events in the move to the latest version.
So far I've managed to get the collapse/expand functionality to work for the optgroups, but issues arise when the user provides text input (check the fiddle).
$(function () {
var data = [
{
text: "Group 1",
children: [
{ id: 'A1', text: 'a1'},
{ id: 'B2', text: 'b2'},
{ id: 'C3', text: 'c3'}]
},
{
text: "Group 2",
children: [
{ id: 'A2', text: 'a2'},
{ id: 'B3', text: 'b3'},
{ id: 'C1', text: 'c1'}
]
}];
$('#mySelect')
.select2({data: data, placeholder : 'Select one' });
// Toggle group on click
$('.select2')
.on('click', function(){
$('.select2-results__option').on('click', function(){
$(this).find('.select2-results__options--nested').toggle();
});
});
});
When the text input is used select2 runs the search and the events I've registered are dropped. My plan was to capture text input and check if the input field is empty or not, based on which I can decide to recreate the optgroup listeners or show all optgroups. Any help in this direction would be appreciated.
Hypothetical example to illustrate a problem I am having using angular-UI select2. Let's say I have a screen where I want to edit a "game" model. A game, among other things has players. I want to be able to set the players via a select2 drop down menu. Here's some example code:
app.js
$scope.getGamePromise().then(function(results) {
$scope.game = results;
console.log(game.players); //prints [{name:'Joe',age: 15},{name:'Sally',age:16}]
});
$scope.players = [
{
name: 'Joe',
age: 15
},
{
name: 'Fred',
age: 14
},
{
name: 'Sally',
age: 16
},
{
name: 'Lucy',
age: 13
}
]
view.html
<select ngModel="game.players" ui-select2 multiple>
<option ng-repeat="player in players" value="player">{{ player.name }}</option>
</select>
When I want to save this 'game' object, I send the game object up to the server. The server is expecting game.players to be an array of objects. However, what is being sent up is a string. I am moderately familiar with angular, and completely new to select2. How can I get my select2 to set game.players as an array of objects instead of strings?
I guess you find another solution or you don't have the problem anymore. Anyway I post it here:
Use
<input>
instead of
<select>
Example:
<input type="hidden" ui-select2="playersCfg" ng-model="players"/>
And following configuration:
$scope.playersCfg = {
multiple: true,
allowClear: true,
data: { results: Player.query(), text: 'name' },
formatResult: function(item) {
return "<div class='select2-user-result'>" + item.name + "</div>";
},
formatSelection: function(item) {
return item.name;
}
};
Player.query()
is a resource which returns a list of player containing a name (name) and an identifier (id)
Hope it would help somebody!
Is it possible somehow to group results in a Select2 component when it's not using <select> tag, but <input type="hidden">, and results are provided as "data" option in configuration object?
var select2Options = {
data: {
results: myArrayOfResults
}
};
Yes, the results objects support a children attribute...
so for example:
var select2Options = {
data: {
results: [
{text: "My shiny group", children: [
{id: 1, text: "My shiny item"},
{id: 2, text: "My shiny item2"}
]}
]
}
};
For ajax data loading with group and data work for me using,
$arrFinal = array(array("name"=>"My shiny group 1",
"children"=>array(array("id"=>1,"name"=>"My shiny item 11"),array("id"=>2,"name"=>"My shiny item 12"))
),array("name"=>"My shiny group 2",
"children"=>array(array("id"=>1,"name"=>"My shiny item 21"),array("id"=>2,"name"=>"My shiny item 22"))
)
);
die(json_encode(array("result" => $arrFinal)));
if formatResult: ratioFormatResult then,
function ratioFormatResult(row) {
// Here, you will get both group ("My shiny group 1") as well as data("My shiny item11") as row .
}
To make group selectable use id field along with name in group.
I am developing an ios app using phonegap in which I am using foursquare venue search api for listing all the near by venues.
This is the code I have used to list the name of all the near by venues.
$.getJSON('https://api.foursquare.com/v2/venues/search?ll='+pos+'&radius=10000&client_id=2POUFAUU4ZBJ2MTDOY3S2YHR2NIT52FYW0LUTPHBMNTJFJNQ&client_secret=YFDZI1YWV3ZI5S5SPM2DZJEQIEBPIDJ5XFZBWTIKIQZVQNYM&v=20120101&limit=60',
function(data) {
console.log(pos);
$.each(data.response.venues, function(i,venues){
content = '<li id="list-item"> <p><a href="#reviewPage" onClick="reviewPageAction(this)">' + venues.name + '</li>';
/*$(content).appendTo("#names");*/
$(content).appendTo("#mer");
});
});
And now my problem is , I want to display the category name with name of each venue. I have tried the following code
venues.categories.name
but it didn't work.
Is it possible to fetch the category name of each venue.?? Please help me!!
The Venues endpoint will return all the categories assigned to a venue. There can be multiple categories assigned to a venue, one of the categories will have a field "primary" that is set to true to indicate that it is the primary category.
Look for something like this in the result set:
categories: [
{
id: "4bf58dd8d48988d143941735",
name: "Breakfast Spot",
pluralName: "Breakfast Spots",
shortName: "Breakfast",
icon: {
prefix: "https://foursquare.com/img/categories_v2/food/breakfast_",
suffix: ".png"
},
primary: true
},
{
id: "4bf58dd8d48988d16a941735",
name: "Bakery",
pluralName: "Bakeries",
shortName: "Bakery",
icon: {
prefix: "https://foursquare.com/img/categories_v2/food/bakery_",
suffix: ".png"
},
}
}
]