I'm generating a tabulator table with a groupBy method from an already filtered datatable (from DataTable.js) with date range and parameters already defined. The new tabulator table is working perfectly fine but takes the whole data regardless of the filters already applied to the table I need to create the groupby from. My original datatable is:
var table = $('#datatable').DataTable();
and with the filters is 20 lines long. When creating the tabulator from that datatable it takes the whole data. Is there a way to reuse the same filtered table already existent to create a tabulator groupBy approach?
here's the code of my tabulator:
if(table!=null){
$('#datatable').DataTable().destroy();
}
var tableTab = new Tabulator('#datatable',{
groupToggleElement:"header",
height:"100%",
virtualDomBuffer: "100%",
layout:"fitColumns",
pagination:"local",
//paginationSize:false,
movableRows:false,
groupBy:"Id",
groupStartOpen:false,
columns:[
{title:"a", field:"a", width:200},
{title:"b", field:"b"},
{title:"c", field:"c"},
{title:"d", field:"d"},
{title:"Id", field:"Id"},
{title:"e", field:"e"},
{title:"CreatedDate", field:"CreatedDate"},
],
});
tableTab.setFilter($('#select').val(), $('datepickerStart').datepicker, $( "#datepickerEnd").datepicker());
IS there a way to create the new Tabulator from the filtered table.DataTable() and not from the whole '#datatable' with the full data?
Example:
select only a's in the last 10 days and groupBy b's.
Thank you
You can use the initialFilter option to set filters on the table when it loads, so you shouldnt need to call the setFilter function:
var tableTab = new Tabulator('#datatable',{
groupToggleElement:"header",
height:"100%",
layout:"fitColumns",
pagination:"local",
movableRows:false,
groupBy:"Id",
groupStartOpen:false,
initialFilter:[
{field:"a", type:"=", value:5000} //set an initial filter that will only show rows with an a value of 5000
],
columns:[
{title:"a", field:"a", width:200},
{title:"b", field:"b"},
{title:"c", field:"c"},
{title:"d", field:"d"},
{title:"Id", field:"Id"},
{title:"e", field:"e"},
{title:"CreatedDate", field:"CreatedDate"},
],
});
You will need to provide three properties for each initial filter, the field name of the column you want to filter, the Filter Function and the value to filter for
Related
I'm using tabulator.js which every time a user edit a cell (cellEdited:function) it calls a function to store the specific value to db and after that it refreshes (reload) the entire table.
What i'm willing to do is to keep both row and column index into a variable before save. After tabulator refreshes, will apply cell focus at the specific cell was before.
Is there any function to directly access cell's value? like tableName.setValue(rowId, ColId, value);
my typical table setup is:
function setup_table(dataset){
table = new Tabulator(document.getElementById("qc_table"), {data:dataset,layout:"fitColumns",addRowPos:"bottom",index:"ID",
keybindings:{"navNext" :'tab("9")'},
columns:[{title: "ID", field: "ID", headerSort:false, width: 80},
{title: "title1", field: "f1",width: 80,editor:"input"},
{title: "title2", field: "f2",width: 80,editor:"input"},
{title: "title3", field: "f3",width: 80,editor:"input"}],
cellEdited:function(cell){
// -- HERE GET ROW INDEX AND COLUMN INDEX BEFORE SAVE--
// SAVE TABLE TO DB
saveTable().then(function(done){
// CODE TO REFRESH TABLE
// -- HERE APPLY FOCUS TO THE PREVIOUS EDITED CELL --
});
}
});
}
Any ideas?
Thanks for your time!
There should be no need to refresh the table, you can simply call the setValue function on the Cell Component passed into the cellEdited callback.
cellEdited:function(cell){
// SAVE TABLE TO DB
saveTable().then(function(done){
cell.setValue("whatever value you want")
});
}
The documentation shows by adding printVisibleRows:false the table.print(false,true) function will print all rows. My table only prints the 20 rows that are visible due to pagination. I would like to print all rows. Is that possible?
//define setup options
var tabData = [{
invalidOptionWarnings: false,
layout: fitDatafill,
printAsHtml:true,
printVisibleRows:false,
printCopyStyle:true, //copy Tabulator styling to HTML table
printHeader:"<h1>"+tdata[0].tablenamedisplay+"<h1>",
printFooter:"<h2><h2>",
autoResize:true,
pagination:"local",
paginationAddRow:"page",
paginationSize:20,
paginationSizeSelector:[25,40,50,100],
movableColumns:false,
tooltipsHeader:true,
columns:tdata[0],
data:tdata[1],
footerElement:myfooter,
rowClick:function(e, row){},
rowContext:function(e, row){
e.preventDefault(); // prevent the browsers default context menu form
appearing.},
}];
//create table
tabEquip[p] = new Tabulator("#"+vDDest, tabData[0] );
My table only prints the 20 rows that are visible due to pagination. I would like to print all rows.
You can do this as of Tabulator v4.8 in one of two ways.
Either by setting the printRowRange option to "active" in the table constructor, and then calling the print function:
///define table
var table = new Tabulator("#example-table", {
printRowRange:"active", //print all active rows
});
//print table
table.print();
Or by passing the string "active" into the print function when you call it:
table.print("active", true);
I've got a sap.ui.table.Table with Input fields and the table gets the data via JSON which works well. However, if I edit the value in the first row for example, and try to scroll down, the value "stays" in the first row until a different value hits this field. So it basically updates every cell except the edited one while scrolling. After that, I scroll up again to see the value I changed, but this value now has the old value from the load at the beginning again.
I think something with my binding isn't correct at all, because I haven't seen anything like this yet. I know that tables only update the row contexts but I can't figure out how to do this.
Here is a example: https://jsbin.com/yuvujozide/6/edit?html,console,output
Edit the right "Gates" and scroll, to see how it disappears and edit the left value and scroll to see how the value scrolls with the table.
I tried to remove/set the VisibleRowCount and logged to see if the data gets loaded multiple times but that's not the case.
var oModel = new sap.ui.model.json.JSONModel();
var oTable = new sap.ui.table.Table({
visibleRowCount: 12,
selectionMode: sap.ui.table.SelectionMode.Single,
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Fixed,
editable: true
});
oModel.setData({ rows: tableRows.value, columns: columnArray });
oTable.setModel(oModel);
var counter = 0;
oTable.bindColumns("/columns", function (sId, oContext) {
var columnName = columnArray[counter];
var defaultTemplate = new sap.m.Input({
value: "{" + columnName + "}"
}).bindProperty("value", columnName, function (cellValue) {
return returnRange(this, oTable, cellValue, columnName, counter, dic);
});
counter++;
return new sap.ui.table.Column({
label: columnName,
template: defaultTemplate,
flexible: true,
autoResizable: true,
width: 'auto',
multiLabels: [
new sap.ui.commons.Label({ text: columnName }),
new sap.ui.commons.Label({ text: dic[Number(counter - 1)].value[0] + " - " + dic[Number(counter - 1)].value[1] })
]
});
});
oTable.bindRows("/rows");
As you can see I separated the rowData and columnNames in two arrays:
tableRows and columnArray
The returnRange function checks some values and just returns the cellValue
I would expect that the Input fields keeps the changed values (which is probably normal), so I can change several Input fields and then I can Update the table via Ajax-Call.
The problem is that sap.ui.table.Table has a custom scrolling behaviour that is different from the default browser scrolling. Instead of creating a row for each record, it will create a fixed number of rows and re-bind these rows after each scroll.
If the table is editable and bound to a JSONModel, it will usually create a two-way-binding and update the model values upon user input, hence scrolling works fine. But since you have provided a custom formatter function for the binding (returnRange), a two-way-binding is not possible anymore. This means that any user input is lost after scrolling.
If you remove the formatter function like this
var defaultTemplate = new sap.m.Input({
value: "{" + columnName + "}"
});
it will work fine.
In case you want to validate the user input, you should listen to the input's change event and use InputBase#setValue to set it to a different value. This will also reflect your changes in the JSONModel.
I need to rebuild my kendo grid columns dynamically per selected filter, so I call this code:
setGridDefinition: function (grid, gridId, gridDef) {
var options = grid.options;
options.columns = gridDef.columns;
options.groupable = gridDef.groupable;
options.sortable = gridDef.sortable;
options.selectable = gridDef.selectable;
options.pageable = gridDef.pageable;
options.scrollable = gridDef.scrollable;
options.filterable = gridDef.filterable;
options.resizable = gridDef.resizable;
grid.destroy();
$("#" + gridId).empty().kendoGrid(options);
},
The problem is that the grid is now missing some very important property values, e.g. element, content, etc.
The only properties which still have values are: columns, dataSource, options, _cellId, _data, _events.
Any ideas how to not lose them or maybe to rebuild them?
I build the grid from MVC code and after selecting some filter I rebuild it from JavaScript (if it gives any clue).
Thanks
Thanks to #Orilux I used the setOptions method while before I tried something like 'grid.options = gridDef'.
Now my codes like this and it works:
setGridDefinition: function (grid, gridId, gridDef) {
grid.setOptions(gridDef);
},
I'm using dc.js to plot chart and show data tables.
Everything runs quite good. And for the table i've created a dimension and also a group. Passing the group variable to dynatable records.
Problem is when I do some selection in the chart. The data table value are of course getting changed. But the there are few records which are supposed to hidden instead they come with 0 value.
I wanted to hide those rows.
Below are the functions I'm using.
Table Dimension :
var tableDim = ndx.dimension(function(d) { return d.label; })
Table Group: var tableGroup = tableDim.group().reduceSum(function(d) { return d.count; })
Dyna Table:
var dynatable = $('.data-table').dynatable({
features: {
pushState: false
},
dataset: {
records: tableGroup.top(Infinity),
perPageDefault: 10,
perPageOptions: [10, 20, 100, 500, 1000]
}
}).data('dynatable');
Refresh the table on chart selection :
function RefreshTable() {
dc.events.trigger(function () {
dynatable.settings.dataset.originalRecords = tableGroup.top(Infinity);
dynatable.process();
});
$('.data-table tr').each(function() {
if ($(this).find('td:nth-child(2)').text() < 1) {
$(this).addClass('zero-value');
}
})
};
I've written jquery codes to assign a class for the rows with zero-value. And it gets assigns only for the first 10 records as I've given the perPageDefault: 10. But I want to it run for the entire table records.
Some one please help me in hiding those rows with values 0.
Before assigning the records in the dynaTable initialization and RefreshTable, you can copy the data and remove records that have value 0.
Dynatable is acting on the records that you pass it, so you can change that data in any way you see fit.