I am new into SAPUI5 development, and i have problems with data binding in a table. In my other tables it works but this one is strange.
I am opening a value helper dialog, and want to display some data in the table.
My current code is:
//
oTable = this._oValueHelpDialog.getTable();
oTable.setModel(this.getModel());
oTable.setModel(oCol, "columns");
// bind aggregation
// items
// shrhelpSet
// spalten heißen key und value
var oTemplate = new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
text: "{key}"
}),
new sap.m.Text({
text: "{value}"
})]
});
oTable.bindAggregation("items", "/shrhelpSet", oTemplate);
My console says "Aggregation "items" does not exist in Element sap.ui.table.Table#__table0"
and when i am using a another binding method for example oTable.bindItems() or bindRows() it is saying that the method is undefinded or cannot be found.
i am suprised that i have this problem in the value helper, in my other tables i have no problems with data binding.
This worked for me and solved my problem
var aColumnData = [{
columnId: "Key"
}, {
columnId: "Value"
}];
var aData = [{
Key: "asdf",
Value: "hey"
}, {
Key: "abcd",
Value: "hey2"
}];
var oModel2 = new sap.ui.model.json.JSONModel();
oModel2.setData({
columns: aColumnData,
rows: aData
});
oTable.setModel(oModel2);
oTable.bindColumns("/columns", function(index, context) {
var sColumnId = context.getObject().columnId;
//alert(sColumnId);
return new sap.ui.table.Column({
id : sColumnId,
label: sColumnId,
template: sColumnId
});
});
oTable.bindRows("/rows");
The sap.m.Table has the aggregation "items", but in your case the table is a "sap.ui.table.Table" which uses the aggregation "rows". That is also the reason why the other methods don't work.
"ColumnListItem" won't work neither because the aggregation needs "sap.ui.table.Row".
For databinding, have a look at the example(s) for the grid table.
Related
Officially got my first internship yesterday and I already have several tasks today and I have this Kendo dropdown which I have to populate with data.
I have this kendo dropdown which looks like this:
$("#products").kendoDropDownList({
dataTextField: "ProductName",
dataValueField: "ProductID",
optionLabel: "Pick one",
// dataSource: data
});
and this queryTask to get the data from a service that looks like this:
var query = new Query();
var queryTask = new QueryTask("http://someService")
query.where = "1=1",
query.outFields = ["*"],
query.returnGeometry = false
queryTask.execute(query, function (results) {
});
My data looks like this:
results[
displayFieldName: "name"
fieldAliases: "aliases"
features: {c: null, attributes:{OBJECTID: 1, name: "name"} }
]
How should I get the objectId and the name into dataTextField & dataValueField into the Kendo component?
If you change your results into something more usable like:
var results = {
displayFieldName: "name",
fieldAliases: "aliases",
features: {
c: null, attributes: { OBJECTID: 1, name: "name" }
}
}
you can get it like:
$("#products").kendoDropDownList({
dataTextField: results.fieldAliases.features.attributes.name,
dataValueField: results.fieldAliases.features.attributes.OBJECTID
});
In my Webix datatable one column fetches the data from the DataColletion. The problem is in the column's filtering: seems like it works with the original data (that contains the ID) and ignores the value of the data collection. How can I change this behavior and filter datatable by the collection's value?
Data:
var mycollection = new webix.DataCollection({
data:[{
id: '12',
value: 'CollItem 1'
}]
});
var mydata = [{
id: 1,
name: 'Item 1',
troublesomeColumn: '12' // id of the CollItem 1
}];
Config:
columns:[{
id: 'troublesomeColumn',
collection: mycollection,
header:{
content:"textFilter"
}
}],
data:mydata
Code snippet. Thanks in advance.
Filters work with the dataset, not with the templates or values from the linked collections. Therefore, you need to create a custom filtering rule as described in the Webix Docs, i.e. define the needed pattern in the compareproperty of the filter:
{
content:"textFilter",
compare:function(value, filter, obj){
var colValue = mycollection.getItem(value).value;
toFilter = colValue.toString().toLowerCase();
filter = filter.toString().toLowerCase();
return toFilter.indexOf(filter) !== -1;
}
}
Updated snippet
If I have a list of (JavaScript) objects in the following form:
var results = [
{'name': 'mary', 'availability' : { 'monday': 'True', 'tuesday': 'False' ... } },
{'name': 'john', 'availability' : { 'monday': 'False', 'tuesday': 'False' ... } },
{'name': 'pete', 'availability' : { 'monday': 'True', 'tuesday': 'True' ... } }
]
how do I display this data in a Webix DataTable, having each of the days in availability as a column?
My configuration object for the DataTable looks like this:
var dtable = webix.ui({
....
view:"datatable",
id: "nameTable",
columns:[
{ id: "name", header:"Name"},
{ id: "availability.monday", header:'Mon'},
{ id: "availability.tuesday", header:'Tue'},
...
],
data:results,
...
});
I have also tried: id: "availability['mon']" which doesn't work or report any error. If I just do : id:"availability", in the browser I see that it shows [object Object] for each row.
I've also tried the autoconfig option but that doesn't render anything (no errors).
I have tried to find examples in the documentation but haven't found any so far. I'm sure this must be possible without having to restructure my incoming data!
There is no native support for complex properties in the Webix DataTable. You can use "template" property of column object to show any property of data object as value of a column, though.
columns:[
{ id: "col1", template:"#availability.monday#"},
I'm new to Backbone. I have an arbitrarily deep nested list where each node in the list could potentially have a child collection. Eg:
item 1
item a
item i
item ii
item b
item c
item 2
item 3
etc
I am wondering what is the simplest way to represent this data structure using Backbone.
If it matters, I do not have a preference between loading the entire structure initially, or loading each level as it is needed. Whatever is easiest.
I would prefer not to go the route of Backbone-Relational, as I have a feeling that is overkill for something like this.
Thanks (in advance) for your help.
Assuming your data structure looks something like this
[
{
title: "item 1",
nodes: [
{title: "item a",
nodes: [
{title: "item i"},
{title: "item ii"}
]
},
{title: "item b"
}
]
},
{
title: "item 2"
}
]
you could set up your hierarchy by overriding the parse method of your models:
var Node = Backbone.Model.extend({
parse: function(data) {
this.nodes = new Nodes(data.nodes, {parse: true});
return _.omit(data, 'nodes');
}
});
var Nodes = Backbone.Collection.extend({
model: Node
});
var c = new Nodes(data_structure, {parse: true});
// parse: true is only needed if you pass the data as an argument
Node.parse extracts the nodes property from the data hash to build a custom attribute on the object and then returns the rest to let Backbone handle the other attributes. You then access the collection with model.nodes. And a Fiddle to play with http://jsfiddle.net/C8HGY/
I would make a simple model, maybe with default attribute children set to new Collection (if needed). The main part is loading from JSON data to models.
var MyModel = Backbone.Model.extend({
});
var MyCollection = Backbone.Collection.extend({
model: MyModel,
load: function(data) {
for(var i in data) {
if (_.isString(data[i])) {
this.add(new MyModel({
title: data[i]
}));
} else {
var collection = new MyCollection();
collection.load(data[i]);
this.add(new MyModel({
title: i,
children: collection
}));
}
}
}
});
var collection = new MyCollection();
collection.load({
'item1': {
'item a': ['item i', 'item ii'],
0: 'item b',
1: 'item c'
},
0: 'item2',
1: 'item3'
});
console.log(collection);
Only that in this example items with "0" and "1" keys are going to the beggining of the collection, but you can see the idea.
Is there a way in Slick.Grid to render all data to an array so it can be exported?
I am able to get the data from my Slick.Grid instance "mygrid.getData().getItems()" but it is just the raw data not the formated data.
Is there a function I can use to iterate though the collection and return the formated data?
As of now I am having to implement my formatters twice.
Example:
UnixToDate: (row, cell, value, columnDef, dataContext) ->
moment.unix(value).format("MMM Do YY")
items: [
{id: 1, activity_at: 915148798 },
{id: 2, activity_at: 999148800 }
]
columns: [
{field: 'id', id: 'id', name: 'Id'},
{field: 'activity_at', id: 'activity_at', name: 'Activity', formatter: UnixToDate}
]
#data = new Slick.Data.DataView()
#grid = new Slick.Grid( $('#table'), #data, columns )
#data.setItems(items)
I am wondering if there is a way to return the data with the formatted values.
I thought #grid.getData().getItems() would do it but it returns the raw data array.
The data returned should look like:
data: [
{id: 1, activity_at: "Dec 31st 98" },
{id: 2, activity_at: "Aug 29th 01" }
]
I would like the end user to be able to filter and arrange the grid and then export the results in csv format, I have all this working except the formatting part.
Ok I wrote a method to do the export (written in coffeescript and using underscore.js). I also had to expose the getFormatter method in slick.grid.js
getFormattedData: (grid) ->
columns = grid.getColumns()
rows = grid.getData().getItems()
_(rows).map (row) ->
h = {}
i = 0
_(columns).each (column) ->
f = grid.getFormatter(row, column)
h[column.id] = f(row, i, row[column.id], column, row)
i += 1
h
add line to slick.grid.js in the // Public API section
"getFormatter": getFormatter,
When you set autoHeight: true the complete grid is rendered and the html could be exported.
http://mleibman.github.com/SlickGrid/examples/example11-autoheight.html
Answer to updated question:
The formatter is only called when a row is rendered/visible, so an array with the formatted data never exists. At the source: https://github.com/mleibman/SlickGrid/blob/master/slick.grid.js#L1291