I got values in JSON and want to add several values in dataindex. How I can do this?
This works perfectly
columns: [
{
header: "Records",
dataIndex: time,
sortable: true,
},
];
But this example doesn't work
columns: [
{
header: "Records",
dataIndex: time + value + value1,
sortable: true,
},
];
Column property dataIndex should be a string that is the name of the field in the model definition, see documentation. To add different values from the model and display the result in a grid column, either use a calculated field and put the calculated field's name to dataIndex, or create a custom renderer function for the column and add the values there.
Related
I already appreciate your advice and answers, this time I go to you for the next problem I pass context, I want to create a dynamic table with quasar and vueJS this table will change according to a select field I have managed to bring the columns of the Selected tables, what I can't do is paint them in the view, since for this I must generate the following structure to be able to paint the table:
columns: [
{
name: 'id', align: 'center', label: 'id', field: 'id'
},
{
name: 'name', align: 'center', label: 'name', field: 'name'
},
{
name: 'age', align: 'center', label: 'age', field: 'age'
}
]
}
I want to form the structure above from an array that comes to me from the database (the columns of the table), what I receive is the following:
const columnsTable = [
"id",
"name",
"age"
];
I am trying as follows in my computed method:
My computed method to generate the array of objects
The result of this is not what was expected since in each key of my object the entire array is entered in this way.
colums in the image
The variable colums is where I want to generate the array of objects described at the beginning of the question.
I appreciate your answers and opinions, anything would help me a lot, thank you very much.
Maybe something like following snippet:
const columnsTable = [
"id",
"name",
"age"
];
const res = []
columnsTable.forEach(c => {
res.push({name: c, align: 'center', label: c, field: c})
})
console.log(res)
I am new to JavaScript and Tabulator, I am stuck at this place, your help is appreciated.
I have loaded the data on the tabulator table and making few changes to it (add new column, deleting column etc.), these changes are reflected on the table but when I use table.getData() updated data is not reflected (old data is reflected). I need this to use some other places. Where am I going wrong?
Here is the sample code.
tabulatorTable = new Tabulator("#dfTable", {
selectable:true,
data:dataJson,
layout:"fitColumns", //fit columns to width of table
responsiveLayout:"hide", //hide columns that dont fit on the table
tooltips:true, //show tool tips on cells
addRowPos:"top", //when adding a new row, add it to the top of
//table
history:true, //allow undo and redo actions on the table
pagination:"local", //paginate the data
paginationSize:20,
movableColumns:true, //allow column order to be changed
resizableRows:true, //allow row order to be changed
columns:[
{title:"YearsExperience", field:"YearsExperience", editor:"number"},
{title:"Salary", field:"Salary", sorter:"number"}
]
});
tabulatorTable.addColumn({formatter:"rownum", title:"id"}); **// Adding new column to the table**
console.log(tabulatorTable.getData()); **// Does not reflect the newly added column**
Expected Json file to contain added column data (title - "id")
You can't modify data just by adding a column to the grid. Additionally, the column you added is a "rownum" formatter and is not bound to a field, so what key would it know to add? You will need to explicitly modify the data on the table.
See here: http://tabulator.info/docs/4.2/update
Solved it see snippet
tabulatorTable.addColumn({
formatter: "rownum",
field: "id",
title: "id"
});
const dataJson = [{
'YearsExperience': 2,
'Salary': 40000
},
{
'YearsExperience': 3,
'Salary': 50000
},
]
const tabulatorTable = new Tabulator("#dfTable", {
selectable: true,
data: dataJson,
layout: "fitColumns", //fit columns to width of table
responsiveLayout: "hide", //hide columns that dont fit on the table
tooltips: true, //show tool tips on cells
addRowPos: "top", //when adding a new row, add it to the top of
//table
history: true, //allow undo and redo actions on the table
pagination: "local", //paginate the data
paginationSize: 20,
movableColumns: true, //allow column order to be changed
resizableRows: true, //allow row order to be changed
columns: [{
title: "YearsExperience",
field: "YearsExperience",
editor: "number"
},
{
title: "Salary",
field: "Salary",
sorter: "number"
}
]
});
tabulatorTable.addColumn({
formatter: "rownum",
field: "id",
title: "id"
}); // Adding new column to the table**
console.log(tabulatorTable.getData()); // Does not reflect the newly added column**
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/js/tabulator.min.js"></script>
<div id="dfTable"></div>
Oof that was a long title.
In my current project I have a grid that holds a set of workshop records. For each of these workshops there is a set of rates that apply specifically to the given workshop.
My goal is to display a combobox for each row that shows the rates specific to that work shop.
I've got a prototype that works for the most part up on sencha fiddle, but there's something off about how the selection values are being created:
Ext.define('Rates',{
extend: 'Ext.data.Store',
storeId: 'rates',
fields: [
'rateArray'
],
data:[
{
workshop: 'test workshop 1',
rateArray: {
rate1: {show: "yes", rate: "105", description: "Standard Registration"},
rate3: {show: "Yes", rate: "125", description: "Non-Member Rate"},
rate4: {show: "yes", rate: "44", description: "Price for SK tester"}
}
},
{
workshop: 'test workshop 2',
rateArray: {
rate1: {show: "yes", rate: "10", description: "Standard Registration"},
rate2: {show: "yes", rate: "25", description: "Non-Member Registration"}
}
}
]
});
Ext.define('MyGrid',{
extend: 'Ext.grid.Panel',
title: 'test combo box with unique values per row',
renderTo: Ext.getBody(),
columns:[
{
xtype: 'gridcolumn',
text: 'Name',
dataIndex: 'workshop',
flex: 1
},
{
xtype: 'widgetcolumn',
text: 'Price',
width: 200,
widget:{
xtype: 'combo',
store: [
// ['test','worked']
]
},
onWidgetAttach: function (column, widget, record){
var selections = [];
Ext.Object.each(record.get('rateArray'), function (rate, value, obj){
var desc = Ext.String.format("${0}: {1}", value.rate, value.description);
// according to the docs section on combobox stores that use 2 dimensional arrays
// I would think pushing it this way would make the display value of the combobox
// the description and the value stored the rate.
selections.push([rate, desc]);
});
console.log(selections);
widget.getStore().add(selections);
}
}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Rates');
Ext.create('MyGrid',{store: store});
}
});
In the grid widget that I'm using for the combobox I'm using the onWidgetAttach method to inspect the current row's record, assemble the rate data from the record into 2 dimensional array, and then setting that to the widget's store.
When I look at the sencha docs section on using a 2 dimensional array as the store, it states:
For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo valueField, while the value at index 1 is assumed to be the combo displayField.
Given that, I would expect the combo box to show the assembled description (e.g.
"$150: Standard Registration") and use the object key as the actual stored value (e.g. "rate1").
What I'm actually seeing is that the display value is the rate and I'm not sure how sencha generates the combobox selections to see how the selection is being rendered out.
Is my assumption about how the 2-dimensionally array gets converted to the store wrong?
Well, your question is suffering from the XY problem. Because what you really want to do is the following:
You want to create a decent store for your combo, using a well-defined model with the meaningful column names you already have in "rateArray", then you define displayField and valueField accordingly, and in onWidgetAttach, just stuff the "rateArray" object into that store using setData.
Sth. along the lines of
xtype: 'widgetcolumn',
text: 'Price',
width: 200,
widget:{
xtype: 'combo',
store: Ext.create('Ext.data.Store',{
fields:['rate','description','show']
filters:[{property:'show',value:"yes"}]
}),
displayField:'description',
valueField:'rate',
onWidgetAttach: function (column, widget, record){
widget.getStore().setData(record.get("rateArray"));
}
},
I'm trying to use the columns.headerTemplate feature of a Kendo UI Grid to customise the column header. You use this feature as shown below and as demonstrated by this example I created. Normally when using Kendo UI templates, the widget will pass the entity into template function so you can use the various properties to customise the html to be rendered.
Debugging the Kendo UI Grid code I can see that in the _headerCellText method the call to the template function passes in an empty object rather than the column even though column object is in scope.
text = kendo.template(template, settings)({});
Is there another approach I can take before resorting to custom column header templates for each column or worse - jQuery manipulation of the widget rendered DOM?
Is there a good reason for deviating from the common template pattern in the framework for this use case?
// Example kendoGrid use of column.headerTemplate
var templateFunction = function(shouldBeColumn) {
// shouldBeColumn is an empty object rather than the column object
return "Useless object:" + kendo.stringify(shouldBeColumn);
};
$("#grid").kendoGrid({
dataSource: {
data: products,
pageSize: 20
},
height: 550,
scrollable: true,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", headerTemplate: plainTemplate },
{ field: "UnitsInStock", title: "Units In Stock", headerTemplate: templateFunction }
]
});
RE: "Is there another approach I can take before resorting to custom column header templates for each column or worse - jQuery manipulation of the widget rendered DOM?"
Invoke a wrapper function that returns a function, thus:
function createHeaderTemplate(columnName) {
return function() {
return "Custom: " + columnName;
};
}
...
columns: [
{ field: 'field', headerTemplate: createHeaderTemplate('My Field') },
{ field: 'field2', headerTemplate: createHeaderTemplate('My 2nd Field') }
]
forum member I am having one problem is displaying the combobox name selected values to my gridpanel column.
I am having the gridPanel with one column containing the resources combobox and the user can select multiple values from the resource.
below is my gridpanel column with the column combobox
gridpanel column
{
xtype: 'gridcolumn',
dataIndex: 'resourceid',
text: 'Resource',
field: resourcecombo
},
resourcecombo
var resourcecombo = new Ext.form.ComboBox({
id: 'resourceid',
name: 'resourceid',
emptyText: 'Select resource',
displayField: 'firstname',
store: Ext.create('rms.store.employee'),
valueField: 'id',
multiSelect: true,
queryMode: 'local',
typeAhead: true
});
here I getting the list of resources and I can do multiselect also. Based on this multiselect the id is send to server and with the response I want to set the values to grid column.
but, something wrong is there I am getting the correct response from server, but my gridcolumn displays only one name in this column..
I want to display the name of all the resource selected, separated by comma sign , like
rishi,yogi,hiren etc
solution
just change the gridcolumn with below code
xtype: 'gridcolumn',
dataIndex: 'resources',
header: 'Resources name',
field: resourcecombo,
renderer: function(resources){
var result = [];
resources = resources || [];
for (var idx = 0, len = resources.length; idx < len; idx++ ){
var value = resources[idx].name;
if(value){
result.push(value);
}
}
return result.join(', ');
}
and change the model with below code
Ext.define('rms.model.taskmainModel', {
extend : 'Ext.data.Model',
fields : [
{ name : 'id', type : 'int' },
{ name : 'taskname', type: 'string'},
**{ name : 'resources', type: 'auto'},**
{ name : 'cmpname', mapping: 'project.company.cmpname'}
]
});
above solution works for me, hope this may help some one.
thanks for your support.
You have specified the name displayed on the combobox is 'firstname', and this string will correspond 1-1 to its value beneath (i.e. 'id'). If you think it does not work your way, just think about these:
How will the "selected items" be displayed on the combobox if multi items are chosen and this combobox is not in "focus" state? (The combo will show one random of the selected item, or list them as in a menu?)
How will the "selected items" be RE-displayed after you click on the combobox again to select some other items? (If multi items has been selected, will all of them display the same "name of all the resource selected, separated by comma sign , like rishi,yogi,hiren" as you described?)
So I recommend to choose other ways, such as: using another field to show the comma-separated names