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
});
Related
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.
I'm working on an application and now I'm messing with the Materialize autocomplete plugin.
Now I would like to parse an array of twig objects (let's say Customers), and to create an array in JS like this one :
var customersAutocomplete = [
{
key: 1,
Title: "John Doe",
label: 'John'},
{
key: 2,
title: "Ulrich",
label: 'John'},
{
key: 3,
label: 'James'}
];
Autocompletion is from a global JS files and looks like this :
$.fn.autocomplete = function (options) {
// Defaults
var defaults = {
data: {customersAutocomplete},
limit: Infinity,
onAutocomplete: null,
minLength: 1
};
Adding to #RaymondA's comment, you can use Twig to do that directly in your template if your customers object has the right structure already :
<!-- views/your.view.html.twig -->
<script>
customersAutocomplete = {{ customers|json_encode() }};
</script>
And then use customersAutocomplete in your js file :
$.fn.autocomplete = function (options) {
// Defaults
var defaults = {
data: customersAutocomplete,
limit: Infinity,
onAutocomplete: null,
minLength: 1
};
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 want to assign ng-grid columns name dynamically after value returned from database, but issue is that it get initialized before data return from ajax, and i am not able to recall gridOption so it showing balnk, so please help me that how can we construct a column name by ajax return value.
$scope.gridOptions =
{
data: 'data.Values',
columnDefs:
[
{ field: "ID", displayName: "Record Id" },
{ field: "Value", displayName: $scope.ColumnName, cellFilter: cellfilterType },
],
};
where $scope.ColumnName coming from below line...
RecordService.getRecords().then(function (data) {
$scope.ColumnName= data.something;
}
Thanks
Thanks Max for your help, I have done this with of help columnDef as below:
Step 1:
$scope.colDef = [];
Step 2:
RecordService.getRecords().then(function (data){
$scope.colDef=["ColumnName":data.something]
}
Step 3:
$scope.gridOptions = {
data: 'data.UdiValues',
columnDefs:'colDef',
filterOptions: $scope.filterOptions
};
Try to set first "default" value and after change it with promise
$scope.gridOptions =
{
data: 'data.Values',
columnDefs:
[
{
field: "ID",
displayName: "Record Id"
},
{ field: "Value",
displayName: "default",
cellFilter: cellfilterType
},
]
};
And now:
RecordService.getRecords().then(function (data) {
$scope.gridOptions.columnDefs[1].displayName = data.something;
}
The Service RecordService returns promise therefore we create promise factory like:
.factory('RecordService', ['$resource','$q', function($resource, $q) {
var data = { something: "from service" } ;
var factory = {
getRecords: function (selectedSubject) {
var deferred = $q.defer();
deferred.resolve(data);
return deferred.promise;
}
}
return factory;
}]);
Demo Fiddle
Something like this
Return json, play around, use GET mapping to strings etc?
i have done something like this :-
self.gridOptions.columnDefs = columnDefs(colDef,displayNames);
columnDef is :-
var columnDefs = function(data,cd){
var colDef= [];
var mi = null;
var colByOrder = sortedByOrder(data);
for(var i=0 ; i < colByOrder.length ; i++){
colDef.push({
width: width,
field: String(colByOrder[i][1].position),
menuItems: menuItems(this),
displayName: cd[colByOrder[i][1].position],
enableSorting: false,
type: 'string',
});
}
return colDef;
};
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