I need to show multiple values (rank and vote) together separated by space as key:value in a webix datatable cell from the following structure :
id2: [{"rank":2, "vote":50}, {"rank":3, "vote":10}]
I want to show only the first element of this above array.
My snippet is here : https://webix.com/snippet/ca50874d
I am not able to figure out how to show these two values together in one cell.
Please help.
Thanks.
To show multiple values in the cell, or if you want to format the value according to you, you just need to use to template for that cell:
While specifying column configuration, you can specify the template for that particular column like below:
template:function(obj) {
}
This template will be called for each row, and obj contains the row object.
For your example you can specify the template like below:
template:function(obj) {
return obj.column1 +':' + obj.column2;
}
I further tried and could figure out the answer on my own. To show the first element of that array object, the 'map' attribute has to be used as below:
{ id:"id2", header:"Rank", width:80, map:"#id2[0].rank# : #id2[0].vote# "}
The working snippet for the same is here : https://webix.com/snippet/928bab77
Related
I have a data table that has a hidden column. I want to set the values of that column to a java script array. (Note: I want to get the values that belong to the current page only). If I use a search filter, I want the values of the current page of the search result.
I've tried like this.
$('#datatbl').DataTable().rows({filter: 'applied'}).every(function () {
var row = this.data();
arr.push(row[0]);
});
But,this code gives all values from all the pages. Please help....
Try adding page:'current' in selector.
$('#datatbl').DataTable().rows({filter: 'applied', page:'current'})
right now in order for the list to render properly I need to have this kind of data passed in:
row = {
id: value,
name: value,
height: value,
categories: [1,2,3,4]
}
how can I adapt the code so that a list works with this kind of data?
row = {
id: value,
name: value,
height: value,
categories: [{id: "1"},{id: "2"},{id: "3"},{id: "4"}]
}
when I try to do that it seems that it applies JSON.stringify to the objects so it is trying to find category with id [Object object]
I would to avoid a per case conversion of data as I do now..
it seems that I cannot do anything in my restClient since the stringify was already applied
I have the same issue when I fetch just one data row e.g in Edit or Create.. categories ReferenceArrayInput is not populated when categories contains objects
Have you tried using format?
https://marmelab.com/admin-on-rest/Inputs.html#transforming-input-value-tofrom-record
Might help transform your input value. Then you can use format() to change values back to the format your API expects.
If this does not work then you will have to probably create a custom component out of ReferenceArrayInput.
I have a table component in my Pentaho CDE dashboard and data source is sql. I want to make a table like this
enter image description here
I need to add a column as row names for this table and a row on the top of column header.
I found a method here:
Table Component SubColumns
to add header, but how can i add a column before other columns?
I think a clever way to do the extra column part would be by modifying the query result object after it's retrieved from the query, so that you add the columns and rows as needed. You can do this in the PostFetch callback function, which takes the query result object as first argument:
function yourTableComponentPostFetch(queryResult) {
// Let's say you have an array of row names
var rowNames = ['Title1', 'Title2', ... ];
// Add a "title" column for every row
queryResult.resultset.forEach(function (row, idx) {
// Push it at the beginning of the row array
row.unshift(rowNames[idx]);
});
// Change metadata description of columns to reflect this new structure
queryResult.metadata.unshift({
colName: 'Title',
colIndex: -1, // this makes sense when reindexing columns below ;)
colType: 'String'
});
// One last re-indexing of metadata column descriptions
queryResult.metadata.forEach(function (column, idx) {
// The title added column will be 0, and the rest will rearrange
column.colIndex++;
});
}
The only tricky part is the part about modifying the metadata since you are effectively changing the structure of the dataset, and making sure the queryResult object is updated in-place instead of just changing its reference (queryResult = myNewQueryResult would not work), but the code I proposed should do the trick.
I have created a jqGrid - Pivot table JSFiddle example: here.
In this It should not print the line if Component Type value is blank, I Used this empty column, to show all periods(months) in the year, which is mandatory.
Need help in removing that blank line. and also is it possible to remove the last sum column 2015 from grid, if so how?
You includes dummy data with ComponentType:"" group which you don't want to display. So the best solution which I see would be to include the data in the input pivot data only, but don't use the dummy data in the grid data. jqPivot uses datatype: "jsonstring" to prevent additional sorting of previously sorted data. The input data will be placed as the value of datastr option. So one can use the following onInitGrid to remove the dummy data before the data will be processed by jqGrid:
onInitGrid: function () {
var p = $(this).jqGrid("getGridParam"),
userdata = p.datastr.userdata;
p.datastr = $.grep(p.datastr, function (item) {
return item.ComponentType !== "";
});
p.datastr.userdata = userdata;
}
see the modified demo http://jsfiddle.net/OlegKi/b47ocLd7/11/.
In my Enyo app, I have a VirtualRepeater which produces Controls containing various text displays and an IntegerPicker.
I have two problems with this repeater:
1) If three rows are produced, clicking on the IntegerPicker in rows 1 and 2 brings up the drop-down picker UI over the top of the IntegerPicker in row 0.
2) I initialise each IntegerPicker with a max value using setMax(). However, if three rows are produced, the IntegerPickers in rows 0 and 1 will have the same max value as that in row 2.
It looks as if only one IntegerPicker is being created and is being used on the first row.
I tried replacing my VirtualRepeater with a Repeater, and changed my repeater row creation function to return a new instance of the item containing the IntegerPicker, instead of returning true. However this produces the error:
warning: enyo.Component.addComponent(): Duplicate component name "itemName" violates unique-name-under-owner rule, replacing existing component in the hash and continuing, but this is an error condition and should be fixed.
It seems that Repeaters need their delegates created inline, which seems quite inelegant.
This code sample illustrates the problem:
enyo.kind({
name:"Test",
kind:enyo.Control,
components: [
{
kind: "VirtualRepeater",
onSetupRow: "setupRow",
components: [{
name: "theIP", kind: "IntegerPicker", min:0
}]
}
],
setupRow: function(inSender, inIndex) {
if (inIndex < 3) {
this.$.theIP.setMax(inIndex);
return true;
}
return false;
}
});
How can I create an arbitrary number of IntegerPickers in my app? Any help appreciated!
What you are doing with theIP in your setupRow function is accessing a specific IntegerPicker itself, which is a child component of the Virtual Repeater. To set the max value of a given IntegerPicker corresponding to the row, give your VirtualRepeater a name attribute, like "PickerList":
kind: "VirtualRepeater",
onSetupRow: "setupRow",
name: "PickerList",
components:[//this should be empty to begin with]
Then you can access each row in the repeater like this:
setupRow: function(inSender, pickerMax) {
var newPicker = new IntegerPicker(pickerMax);
this.$.PickerList.push(newPicker);
To get a specific row in the VirtualRepeater you need to do it like this:
this.$.PickerList[1];
Here is an extended Enyo tutorial which makes use of the VirtualRepeater:
https://developer.palm.com/content/resources/develop/extended_enyo_tutorial.html