I'm trying to style only tabulator empty cells.
I tried with a custom formatter but it seems to be called only on cells with data.
Any suggestion on how to proceed?
Seems to process fields without data just fine ...
https://jsfiddle.net/udpr2680/
new Tabulator("#tabulator", {
data:[{id:4957},{id:39857,price:100}],
columns: [
{ title: "number", field: "id"},
{ title: "price", field: "price",formatter: function(c,fP,onR) { let p = c.getData().price; if (p === undefined) return "undefined"; return p; } },
],
});
Related
I am using this approach to show the total rows in a table:
var tabulator_table = new Tabulator("#example", {
columns: [
{ title: "name", field: "name", bottomCalc: "count", headerFilter: "input" },
{ title: "Type", field: "Type", bottomCalc: "count", headerFilter: "input" },
],
dataFiltered: function (filters, rows) {
var el = document.getElementById("search_count");
el.innerHTML = rows.length;
},
dataLoad: function (data) {
var el = document.getElementById("total_count");
el.innerHTML = data.length;
},
});
var total_count = $(".tabulator-footer").find('.tabulator-cell:first-child()').text();
$("#total_count").text(total_count);
$(".tabulator-footer").append("<span class='search_count' id='search_count'></span> Of<span class='search_result'>Total Productions: <span class='total_count'></span></span>")
var totalsearch = $("#total_count").text();
var resultsearch = $("#search_count").text();
$(".total_count").text(totalsearch)
$(".search_count").text(totalsearch);
//This CSS will hide the footer:
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
display: none;
}
This works good but there is one issue: when i hit export to excel, it exports the calculation row as well such as:
Name Type
john human
1 1
How do I stop the count row (1 1) from being exported or is there other approach to show total rows.
This is the export function:
document.getElementById("myButtons").addEventListener("click", function () {
tabulator_table.download("xlsx", "name.xlsx", { sheetName: "Info" });
});
I think all you need is the downloadConfig option in your table options. http://tabulator.info/docs/4.6/download#advanced-config
So, just add downloadConfig: {columnCalcs: false} to your table options.
Here is a working example.
https://jsfiddle.net/nrayburn/0hn6v48r/11/
I am trying to export table data to an Excel sheet. Everything works OK without formatter. But I have to format some cells before converting table to Excel. I'm debugging the code. Formatter function's parameter passes as null value. Here is my code:
var oExport = new sap.ui.core.util.Export({
exportType: new sap.ui.core.util.ExportTypeCSV({
separatorChar: ";"
}),
models: this.getView().getModel(),
rows: {
path: "/FaaliyetServisiSet"
},
columns: [{
name: "Kişi",
template: {
content: "{Klnad}"
}
}, {
name: "Faaliyet",
template: {
content: "{Falyt}"
}
}, {
name: "Süre",
template: {
content: {
parts: ["Sure"],
formatter: function(oValue) { // oValue is null that's the problem !!!!!!!
oValue = oValue + 2;
return oValue;
}
}
}
}, {
name: "Proje",
template: {
content: "{Proje}"
}
},
]
});
You should an array of objects instead of strings for the parts
parts: [
{ path: "Sure" }
]
https://openui5.hana.ondemand.com/#docs/guide/07e4b920f5734fd78fdaa236f26236d8.html
I´m facing a similar issue in some data binding use cases. The formatter function gets called with the initial data binding value which can be null or undefined. I circumvent this issue by ignoring calls of the formatter function by simple null and undefined checks.
I'm newbie in a OpenBravo ERP system, so I'm sorry if I posted an obvious question.
I have created a custom MDI view in Openbravo ERP, added some input field for filtering product's name in Smarclient's listgrid which contains Orders. I have created a Order datasource and bind it to the Smartclient grid. What I want to achieve is to filter a Order list in the grid by product name which is added in the input text field. I tried with several approaches but without success.
So I came to question is it possible to add join table in AdvancedCriteria in the grid's fetchData function?
Here is a snippet of my code:
isc.ELB_MainView.addProperties({
form: null,
grid: null,
initWidget: function () {
this.grid = isc.OBGrid.create({
setDataSource: function (ds, fields) {
var selectedFields = [],
fs = OB.Constants.FIELDSEPARATOR,
ident = OB.Constants.IDENTIFIER,
fieldNames = ['documentNo', 'documentStatus', 'orderDate', 'accountingDate', 'businessPartner'+fs+ident, 'currency'+fs+ident],
i, j;
for(i = 0; i < fieldNames.length; i++) {
for(j in ds.fields) {
if(ds.fields.hasOwnProperty(j) && j === fieldNames[i]) {
selectedFields.push(ds.fields[j]);
}
}
}
this.Super('setDataSource', [ds, selectedFields]);
this.fetchData();
}
});
this.form = isc.DynamicForm.create({
fields: [{name : "productName",
title: "Product Name",
type : "text",
width: '100%',
change: function(form, item, value, oldValue){
form.main.grid.invalidateCache();
form.main.grid.fetchData({
_constructor: 'AdvancedCriteria',
operator: 'and',
criteria: {
'fieldName': 'orderLineList.product.name',
'operator': 'equals',
'value': value
}
});
this.Super('change', arguments);
}}],
main: this
});
OB.Datasource.get('Order', this.grid, null, true);
this.addMember(this.form);
this.addMember(this.grid);
this.Super("initWidget", arguments);
}
});
Tnx in advance.
Similar question is posted on SmartClient Forum about Joining tables for listgrid datasource.
Here is my solution that will definitely solve your problem:
Create a view that is created by joining tables required for grid and use it as data source
Hi guys
I am try to research Yahoo lib- grid. I created a button to display grid. But when i click button N times -> it is displayed N grids. I only want display one grid and after click button it will get data from server again. My code like below:
Please help me., Thank you.
YUI({ filter: 'raw' }).use("jsonp", "node",function (Y) {
function handleJSONP(response) {
// Y.one("#out").setContent(Y.Lang.sub(template, response.user));
YUI().use("datatable-base", function(Y) {
var cols = [
{ key: "id", label: "Transaction No", abbr: "id"},
{ key: "userName", label: "User Name", abbr: "userName"},
{ key: "storeName", label: "StoreName", abbr: "storeName"}
],
data = response.Root,
dt = new Y.DataTable.Base({
columnset: cols,
recordset: data,
summary: "Price sheet for inventory parts",
caption: "These columns have labels and abbrs"
}).render("#example");
});
}
Y.one("#demo_btn").on("click", function (e) {
var url = "server.jsp"+ "?callback={callback}";
Y.jsonp(url, handleJSONP);
});
});
You should be using the DataSource utility to retrieve the data via JSONP. This will allow you to then reload the data via something like
dt.datasource.load();
See the docs for details: DataTable + DataSource.Get + JSON Data
Your handler needs to check if you've already created the table.
var dt;
if (dt === null) {
dt = new Y.DataTable.Base // etc.
}
I have a table using tabulator.
Everything works great, but I am trying to get autocomplete working with Ajax
What I am trying is:
var customerNumbers = [];
var table = new Tabulator("#edi-table",
ajaxURL: baseUrl + '/PaginatedEndPoint',
pagination: "remote",
paginationSize: 30,
paginationSizeSelector: [30, 60, 100, 200],
ajaxSorting: true,
ajaxFiltering: true,
selectable: true,
cellEdited: function (cell) {
cell.getElement().style.backgroundColor = "#32CD32";
},
dataLoading: function () {
customerNumbers = ["11", "12", "13"];
},
columns: [
{
title: "CustomerNumber", field: "CustomerNumber", headerFilter: "input", editor: "autocomplete", editorParams: {
searchFunc: function (term, values) {
var matches = [];
values.forEach(function (item) {
if (item.value === term) {
matches.push(item);
}
});
console.log(matches);
return matches;
},
listItemFormatter: function (value, title) {
return "Mr " + title;
},
values: customerNumbers
}
}
]
However, this does not show any predictions value predictions for me, it seems that autocomplete is built before "dataLoading" or any other Callback (I have tried many) is called.
I have tried to make an auxilary array in the style of values like {Title: "Mr + title", value: "title"} and then assign it in the searchFunc, and it didn't work despite being returned in matches.
Is it even possible to dynamically create autofill?
It seems like the current autocomplete functionality does not allow for the editorParams to take a function as an argument to set the dropdown values. You can set it with an object of key/values if you can send that via AJAX, but as far as dynamically setting, altering, or searching the data, it seems like that's impossible to do at the moment.
The other option would be use the editor:"select", which can take a function to set its editorParams. It's not the best solution, but it's the one I had to go with at the moment.
There is an open issue on the Tabulator docs, but so far no response from the developers.
I wish I had a better answer for you!