Related
I have a fairly simple table, and am currently using a bottom calculator formatter:
export let myTable = new Tabulator("#my-table", {
columns:[
{title:"ID", field:"id", headerSort:false, visible:false, responsive:2},
{formatter:"rowSelection", titleFormatter:"rowSelection", align:"center", bottomCalc:"sum", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
cell.getRow().toggleSelect();
}},
{title:"Name", field:"address", width:300, bottomCalc:"count"},
{title:"My Data", field:"mydata", bottomCalc:avNoOutsiders},
],
});
export let avNoOutsiders = function(values, data, calcParams){
// filter outliers
let myArray = filterOutliers(values);
// filter any null or falsy values
let av = average(myArray);
return av
}
The code isn't super important, but what I'd like to be able to do is allow the user to de-select a row to exclude the value from this calculation.
The problem is, I don't understand how to access the isSelected() function here, I think it's just the row() I can access it. I can access the values (all the column values) but there's no selection data there, I can access the data - the whole table, but there's no way of determining which row it is, or whether it is selected or not.
My current direction of thinking is either
using bottomCalcParams. I don't understand how I would do this. This function returns a getRow() is not a function error:
function cellIsSelected(cell){
selected = cell.getRow().isSelected()
return {isSelected:selected};
}
or
Writing individual functions for each bottom calc. This doesn't work as I can't call the table inside the table calcs - var selectedRows = table.getSelectedRows() causes a circular error if I try to put that into a column calc function. I can reference the table inside the table.
Any ideas how I can access the row selection data to make a column calculation?
There might be an easier way, but one way to achive that would be to create a hidden placeholder column which can be updated to true/false upon row selection/deselection. Then you can use the values of this hidden column in your bottomCalc function to exclude rows that are not selected. Here is an example where selecting a row will re-trigger bottom calculation and average the age of all selections:
const dataSet1 = [
{ id: 1, name: 'Billy Bob', age: '21', gender: 'male' },
{ id: 2, name: 'Mary May', age: '5', gender: 'female' },
{ id: 3, name: 'Christine Lobowski', age: '42', gender: 'female' },
{ id: 4, name: 'Brendon Philips', age: '80', gender: 'male' },
]
const calcAvg = (values, data, calcParams) => {
let selected = data.filter((row) => row.isSelected)
values = selected.map((i) => i.age)
let avg = values.reduce((a, b) => Number(a) + Number(b), 0) / values.length
return avg ? avg : ''
}
const table = new Tabulator('#table', {
data: dataSet1,
columns: [
{
formatter: 'rowSelection',
titleFormatter: 'rowSelection',
cellClick: (e, cell) => {
cell.getRow().toggleSelect()
}
},
{ title: 'Name', field: 'name' },
{ title: 'Age', field: 'age', bottomCalc: calcAvg },
{ title: 'Gender', field: 'gender' },
{ title: '', field: 'isSelected', visible: false } // Selection placeholder column
]
})
const selection = (row) => {
row.update({ isSelected: row.isSelected() })
table.recalc()
}
table.on('rowSelected', selection)
table.on('rowDeselected', selection)
<html>
<head>
<link href="https://unpkg.com/tabulator-tables#5.2.2/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#5.2.2/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="table"></div>
</body>
<html>
#Tim's answer got me 95% of the way there.
Note that some of his responses don't work on Tabulator v4.9:
const selection = (row) => {
row.update({ isSelected: row.isSelected() })
table.recalc()
}
table.on('rowSelected', selection)
table.on('rowDeselected', selection)
I thought that figuring out a way round this might take longer than updating, so I plunge and updated to 5.2.2, which was less painful than expected. I had multiple columns to calculate, so rather than running a different function for each one, I passed the field name into the function via the bottomCalcParams, thus:
const calcAvg = (values, data, calcParams) => {
let selected = data.filter((row) => row.isSelected)
// Add your calcParams here:
values = selected.map((i) => i[calcParams.field])
let avg = values.reduce((a, b) => Number(a) + Number(b), 0) / values.length
return avg ? avg : ''
}
const table = new Tabulator('#table', {
data: dataSet1,
columns: [
{
formatter: 'rowSelection',
titleFormatter: 'rowSelection',
cellClick: (e, cell) => {
cell.getRow().toggleSelect()
}
},
{ title: 'Name', field: 'name' },
{ title: 'Age', field: 'age', bottomCalc: calcAvg, bottomCalcParams:{field:"age"} },
{ title: 'Remaining Teeth', field: 'teeth', bottomCalc: calcAvg, bottomCalcParams:{field:"teeth"} },
{ title: 'Personality Quirks', field: 'quirks', bottomCalc: calcAvg, bottomCalcParams:{field:"quirks"} },
{ title: 'Gender', field: 'gender' },
{ title: '', field: 'isSelected', visible: false } // Selection placeholder column
]
})
var ColDef = [{
headerName: "colA",
field: 'colA',
rowGroup: true
},
{
headerName: "colB",
field: 'colB',
pivot: true,
enablePivot: true
},
{
headerName: "colC",
field: 'colC',
rowGroup: true
},
{
field: 'colD',
aggFunc: 'first',
valueFormatter: currencyFormatter,
tooltip: function(params) {
return (params.valueFormatted);
},
},
{
field: 'comment'
},
{
field: 'colF'
}
];
function currencyFormatter(params) {
return params.value;
}
above code is from different question. it works but i want to use different 'comment' field as tool tip to current 'colD' . also this is a group and pivot agGrid,if it is normal grid this is not a problem. I would appreciate any ideas for group and pivot agGrid?
Not sure if there is good way for the grid to get the data in your scenario then, as your rows and columns are different than original model after pivot.
Maybe you can consider retrieve this information outside of grid. Assume you also want some aggregated information displays in the tooltip, the tooltip function may eventually look like this:
tooltip: params => {
const country = params.node.key;
const year = params.colDef.pivotKeys[0];
const athletesWithNumbers = this.state.rowData
.filter(d => d.year == year)
.filter(d => d.country === country)
.filter(d => d.gold > 0)
.map(d => d.athlete + ': ' + d.gold);
return athletesWithNumbers.join(', ');
}
See this plunker for what I am talking about - again, not sure if this is what you want but just an FYI.
just use tooltipValueGetter
{
field: 'message',
headerName: 'Message',
headerTooltip: 'Message',
width: 110,
filter: 'agSetColumnFilter',
tooltipValueGetter: (params) => `${params.value} some text`
}
or just use the same method for tooltipValueGetter
UPDATE:
Okay, I understood
but it also easy
Ag-grid has property tooltipField - where you can choose any field from grid
For example here - in the column of 'sport' I am showing tooltip of the previous column
Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08
OR
You can easily manipulate with data for each field by tooltipValueGetter
with next construction:
tooltipValueGetter: function(params) {
return `Country: ${params.data.country}, Athlete: ${params.data.athlete}, Sport: ${params.data.sport}`;
},
Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08
Result:
UPDATE 2
Hey Man! I do not understand was is wrong
I just used your code snippet and my solution
And it works as you want
Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08
UPDATE 3
A little bit of manipulation and I can get the data
{ field: 'gold', aggFunc: 'sum',
tooltipValueGetter: function(params) {
var model = params.api.getDisplayedRowAtIndex(params.rowIndex);
return model.allLeafChildren[0].data.silver;
},
},
The Last:
https://plnkr.co/edit/9qtYjkngKJg6Ihwb?preview
var ColDef = [{
headerName: "colA",
field: 'colA',
rowGroup: true
},
{
headerName: "colB",
field: 'colB',
pivot: true,
enablePivot: true
},
{
headerName: "colC",
field: 'colC',
rowGroup: true
},
{
field: 'colD',
aggFunc: 'last',
tooltipValueGetter: commentTooltipValueGetter
},
{
field: 'comment'
},
{
field: 'colF'
}
];
function commentTooltipValueGetter(params) {
const colB = params.colDef.pivotKeys[0];
var model = params.api.getDisplayedRowAtIndex(params.rowIndex);
for (var i = 0; i < model.allLeafChildren.length ; i++) {
if (model.allLeafChildren[i].data.colB=== colB) {
return model.allLeafChildren[i].data.comments;
}
}
}
This is what i had to do for my question. It is combination of answers from #wctiger and #shuts below. So please also refer them for more context
[![Firefox Console][1]][1]In my Vue app I am trying to use mdb-datatable, the table reads data() and sets the rows accordingly. I am setting the row data programmatically after my data is loaded with Ajax. In one column I need to add a button and it needs to call a function. I am trying to add onclick function to all buttons with "status-button" class but something weird happens.
When I print HtmlCollection it has a button inside, which is expected but I can't reach proceedButtons[0], it is undefined. proceedButtons.length also prints 0 length but I see the button in console.
I also tried to add onclick function but probably "this" reference changes and I get errors like "proceedStatus is not a function" it does not see anything from outer scope.
<mdb-datatable
:data="tableData"
:searching="false"
:pagination="false"
:responsive="true"
striped
bordered/>
export default {
name: "Applications",
mixins: [ServicesMixin, CommonsMixin],
components: {
Navbar,
Multiselect,
mdbDatatable
},
data () {
return {
statusFilter: null,
searchedWord: '',
jobRequirements: [],
applications: [],
options: ['Awaiting', 'Under review', 'Interview', 'Job Offer', 'Accepted'],
tableData: {
columns: [
{
label: 'Name',
field: 'name',
sort: 'asc',
},
{
label: 'Date',
field: 'date',
sort: 'asc'
},
{
label: 'Compatibility',
field: 'compatibility',
sort: 'asc'
},
{
label: 'Status',
field: 'status',
sort: 'asc'
},
{
label: 'Proceed Application Status',
field: 'changeStatus',
}
],
rows: []
}
}
}
fillTable(applications) {
let statusButtonId = 0;
applications.forEach(application => {
this.tableData.rows.push({
name: application.candidateLinkedIn.fullName,
date: this.parseDateFromDateObject(application.applicationDate),
compatibility: this.calculateJobCompatibility(application.candidateLinkedIn.linkedInSkillSet),
status: application.applicationStatus,
changeStatus: '<button type="button" class="btn-indigo btn-sm m-0 status-button"' +
' style="margin-left: 1rem">' +
'Proceed Status</button>',
candidateSkillSet: application.candidateLinkedIn.linkedInSkillSet
});
statusButtonId++;
});
},
addEventListenersToButtons() {
let proceedButtons = document.getElementsByClassName("status-button")
console.log(proceedButtons);
console.log(proceedButtons[0])
console.log(proceedButtons.item(0))
/*
proceedButtons.forEach(button => {
button.addEventListener("click",this.proceedStatus);
});
*/
},
[1]: https://i.stack.imgur.com/zUplv.png
From MDN:
Get the first element with a class of 'test', or undefined if there is no matching element:
document.getElementsByClassName('test')[0]
So undefined means no match, even if length is 0...
Since this is not an array, you do not get out-of-bounds exceptions.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Regarding Arrays
You can't index the list returned from getElementsByClassName.
You can turn it into an array though, and then index it.
ES6
let proceedButtons = document.getElementsByClassName("status-button")
const arr = Array.from(proceedButtons);
console.log(arr[0]);
Old School
const arr = []
Array.prototype.forEach.call(proceedButtons, function(el) {
arr.push(el);
});
console.log(arr[0]);
I have a kendo grid and want certain rows to stay pinned at the top of the grid after sorting. I can achieve this by specifying a custom sort on every column. For example:
<script>
var ds = new kendo.data.DataSource({
data: [
{ name: "Jane Doe", age: 30, height: 170, pinToTop: false },
{ name: "John Doe", age: 33, height: 180, pinToTop: false },
{ name: "Sam Doe", age: 28, height: 185, pinToTop: true },
{ name: "Alex Doe", age: 24, height: 170, pinToTop: false },
{ name: "Amanda Doe", age: 25, height: 165, pinToTop: true }
]
});
$('#grid').kendoGrid({
dataSource: ds,
sortable: {mode: 'single', allowUnsort: false},
columns: [{
field: "name",
title: "Name",
sortable: {
compare: function (a, b, desc) {
if (a.pinToTop && !b.pinToTop) return (desc ? 1 : -1);
if (b.pinToTop && !a.pinToTop) return (desc ? -1 : 1);
if (a.name > b.name) return 1;
else return -1;
}
}
}
//Other columns would go here
]
});
</script>
This works fine when the grid is sorted by the user clicking on a column header. However, if I want to sort the grid using Javascript code, like so:
$('#grid').data('kendoGrid').dataSource.sort({field: 'age', dir: 'asc'});
The pinToTop field is ignored. This is because the sort is performed on the DataSource, but the custom sort logic is part of the grid.
JSFiddle Example
I need to either:
Be able to specify custom sort logic in the DataSource, so that when I sort the DataSource using JavaScript, the pinned rows stay at the top.
Or:
Be able to execute a sort of the grid itself, rather than the DataSource, from JavaScript.
It wasn't quite what I wanted, but I was able to solve this issue by sorting on multiple fields and including the pinToTop field first:
$('#grid').data('kendoGrid').dataSource.sort([{field: 'pinToTop', dir: 'desc'},{field: 'age', dir: 'asc'}]);
This is an old question, but here is an answer for those coming across this question, like I did.
Define the comparison as a function and pass it to the DataSource:
var compareName = function (a, b, desc) {
if (a.pinToTop && !b.pinToTop) return (desc ? 1 : -1);
if (b.pinToTop && !a.pinToTop) return (desc ? -1 : 1);
if (a.name > b.name) return 1;
else return -1;
}
$('#grid').data('kendoGrid').dataSource.sort({field: 'age', dir: 'asc', compare: compareName);
Works in version 2017.2.621
I use multi-row grouping and put the totals in the grouping headers.
I'm not using the totals in the totals rows. I see the the rows are grouped and where the totals would be there are empty rows. In my case there is an empty row after each of the child grouping and at the end there is an empty row for the parent totals.
How do I remove these totals rows?
Thank you!
.cshtml:
<div id="gridList" class="grid" style="width: 100%; height: 500px"></div>
.js
$(function() {
var columns = [
{
id: "isExcluded",
name: "Exclude",
field: "isExcluded" /*, width: 120*/,
formatter: Slick.Formatters.Checkmark,
editor: Slick.Editors.Checkbox, sortable: true
},
{
id: "symbol",
name: "Symbol",
field: "symbol",
sortable: true /*, width: 120*/
},
{
id: "price",
name: "Price",
field: "price",
sortable: true
//, groupTotalsFormatter: sumTotalsFormatter
},
{
id: "parent_name",
name: "Parent Name",
field: "parent_name",
sortable: true /*, width: 120*/
},
{
id: "description",
name: "Description",
field: "description",
sortable: true,
width: 120,
editor: Slick.Editors.Text,
},
{ id: "cancel_ind",
name: "Canceled",
field: "cancel_ind",
sortable: true, width: 80 }
];
function requiredFieldValidator(value) {
if (value == null || value == undefined || !value.length) {
return { valid: false, msg: "This is a required field" };
} else {
return { valid: true, msg: null };
}
};
var options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: true,
enableExpandCollapse: true,
rowHeight: 25
};
var sortcol = "parent_name";
var sortdir = 1;
var grid;
var data = [];
var groupItemMetadataProviderTrades = new Slick.Data.GroupItemMetadataProvider();
var dataView = new Slick.Data.DataView({ groupItemMetadataProvider: groupItemMetadataProviderTrades });
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
function groupByParentAndSymbol() {
dataViewTrades.setGrouping([
{
getter: "parent_name",
formatter: function(g) {
return "Parent: " + g.value + " <span style='color:green'>(" + g.count + " items) Total: " + g.totals.sum.price + "</span>";
},
aggregators: [
new Slick.Data.Aggregators.Sum("price")
],
aggregateCollapsed: true
,lazyTotalsCalculation: true
},
{
getter: "symbol",
formatter: function(g) {
return "Symbol: " + g.value + " <span style='color:green'>(" + g.count + " items) Total: " + g.totals.sum.price + "</span>";
},
aggregators: [
new Slick.Data.Aggregators.Sum("price")
],
collapsed: true
,lazyTotalsCalculation: true
}]);
};
grid = new Slick.Grid("#gridList", dataView, columns, options);
grid.registerPlugin(groupItemMetadataProviderTrades);
grid.setSelectionModel(new Slick.RowSelectionModel());
..... /*sorting support etc*/
// use instead of the default formatter <--- removed not used.
function sumTotalsFormatter(totals, columnDef) {
var val = totals.sum && totals.sum[columnDef.field];
//if (val != null) {
// return "total: " + ((Math.round(parseFloat(val) * 100) / 100));
//}
return "";
}
// will be called on a button click (I didn't include the code as irrelevant)
var getDataList = function () {
$.getJSON('/Home/GetData/', function (json) {
data = json;
dataView.beginUpdate();
dataView.setItems(data);
groupByParentAndSymbol();
dataView.endUpdate();
dataView.syncGridSelection(grid, true);
});
};
getDataList();
});
Adding displayTOtalsRow: false to the dataview solved my problem - the total rows are not shown now.
var dataView = new Slick.Data.DataView({ groupItemMetadataProvider: groupItemMetadataProviderTrades, displayTotalsRow: false });
To answer simply to your question... Just remove the aggregators: [...], when I say remove you have 2 options, you can remove whatever is the array [...] or you could simply erase completely that object line (so removing completely the aggregators[...]).
Now if you want more explanation of how it works...Let's give you some definition so you'll understand better. An aggregate is a collection of items that are gathered together to form a total quantity. The total in question could be a sum of all the fields, an average or other type of aggregator you might define. So basically it's the action of regrouping by the column you chose and give the calculation result of the group. Alright now how does it work in the case of a SlickGrid? You need to define what kind of Aggregator you want to use (Avg, Sum, etc...) that goes inside your function groupByParentAndSymbol(), defining them will do the calculation BUT unless you attach it to the field, nothing will be displayed, so in the example you found it is very important to attach/bind this groupTotalsFormatter: sumTotalsFormatter to your columns definition, as for example:
...var columns = [{id: "cost", ...width: 90, groupTotalsFormatter: sumTotalsFormatter}, ...];
so let's recap... Once the Aggregator is define new Slick.Data.Aggregators.Sum("cost") it will do the calculation but unless it's bind to the field nothing will be displayed. As an extra option, the aggregateCollapsed (true/false) is to display the sub-total (avg, sum or whatever) inside or outside the group when you collapse.