Develop Reference

tabulator column visible, using function to decide column visibility [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am trying to set the column visibility though a function, to check if a value in the cell is true, then the column is visible, else it is hidden,
am using tabulator JS
this part is based on a column value in the rows , as below
My plan was, if the value of ageRange > 25, the column is visible, but with no success, I tried the below code:
const table = new Tabulator("#example-table", {
data: tabledata,
columns: [{
title: "Name",
field: "name",
width: 200
},
{
title: "Gender",
field: "gender",
visible: false
},
{
title: "Age",
formatter: AgeIcon,
width: 40,
headerSort: false,
visible: function (e, cell) {
return cell.getRow().getData().ageRange > 25;
}
},
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.4.1/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.4.1/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>

set the column visibility though a function
According to the Tabulator documentation, the visible property on the column definition does not take a function--only a boolean value.
Use the hideColumn function to hide the column based on the data.
See this snippet for an example.
//define data
const tabledata = [{
id: 1,
name: "Oli Bob",
location: "United Kingdom",
gender: "male",
rating: 1,
col: "red",
dob: "14/04/1984"
},
{
id: 2,
name: "Mary May",
location: "Germany",
gender: "female",
rating: 2,
col: "blue",
dob: "14/05/1982"
},
{
id: 3,
name: "Christine Lobowski",
location: "France",
gender: "female",
rating: 0,
col: "green",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon Philips",
location: "USA",
gender: "male",
rating: 1,
col: "orange",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret Marmajuke",
location: "Canada",
gender: "female",
rating: 5,
col: "yellow",
dob: "31/01/1999"
},
{
id: 6,
name: "Frank Harbours",
location: "Russia",
gender: "male",
rating: 4,
col: "red",
dob: "12/05/1966"
},
{
id: 7,
name: "Jamie Newhart",
location: "India",
gender: "male",
rating: 3,
col: "green",
dob: "14/05/1985"
},
{
id: 8,
name: "Gemma Jane",
location: "China",
gender: "female",
rating: 0,
col: "red",
dob: "22/05/1982"
},
{
id: 9,
name: "Emily Sykes",
location: "South Korea",
gender: "female",
rating: 1,
col: "maroon",
dob: "11/11/1970"
},
{
id: 10,
name: "James Newman",
location: "Japan",
gender: "male",
rating: 5,
col: "red",
dob: "22/03/1998"
},
];
//define table
const table = new Tabulator("#example-table", {
data: tabledata,
columns: [{
title: "Name",
field: "name",
width: 200
},
{
title: "Gender",
field: "gender",
visible: false
},
{
title: "Rating",
field: "rating",
width: 80,
bottomCalc: "avg",
visible: true
},
{
title: "Favourite Color",
field: "col"
},
{
title: "Date Of Birth",
field: "dob",
align: "center",
sorter: "date"
}
],
});
const ratings = tabledata.map(d => d.rating);
const averaveRating = ratings.reduce((p, c) => p + c) / ratings.length;
//hide the "rating" column if low average rating
if (averaveRating < 2.5) {
table.hideColumn("rating");
console.log(`Average rating is ${averaveRating}, column hidden`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.4.1/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.4.1/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>

Sum column tabulator based on condition

I am trying to sum column value in tabulator with specific condition and follow this Custom Calculation Function
What I tried so far:
$(document).ready(function() {
function getSum(total, num) {
return total + num;
}
var adultCalc = function(values, data, calcParams) {
var tempvalue = [];
data.forEach(function(data) {
var count = data.age * data.qty;
tempvalue.push(count);
});
console.log('array', tempvalue);
console.log('total', tempvalue.reduce(getSum));
/*return tempvalue;*/
}
var tabledata = [{
id: 1,
name: "Oli Bob",
age: "12",
qty: "1",
dob: ""
},
{
id: 3,
name: "Christine Lobowski",
age: "42",
qty: "1",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon Philips",
age: "35",
qty: "2",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret Marmajuke",
age: "16",
qty: "0",
dob: "31/01/1999"
},
{
id: 5,
name: "Marmajuke",
age: "17",
qty: "0",
dob: "31/01/1999"
},
{
id: 4,
name: "Philips",
age: "27",
qty: "0",
dob: "01/08/1980"
}
];
var table = new Tabulator("#example-table", {
height: 205,
data: tabledata,
layout: "fitColumns",
columns: [{
title: "Name",
field: "name",
width: 150
},
{
title: "Age",
field: "age",
bottomCalc: adultCalc
},
{
title: "Qty",
field: "qty"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.1.4/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>
My formula is : age * qty push it into array and total it.
I'm success to get the value what i want and push it into array, but the problem is i can't sum the array with array reduce function.
I got this error
TypeError: reduce of empty array with no initial value
My problem just to get total sum of array.
Can someone tell me what's wrong with my code?
Thanks.

You need to provide initial value to reduce
console.log('total', tempvalue.reduce(getSum,0));
first time when you use reduce you have an empty array and which is causing reduce to produce an error. you can pass initial value and it should work as expected.
Note: If initialValue isn't provided, reduce() will execute the
callback function starting at index 1, skipping the first index. If
initialValue is provided, it will start at index 0.
$(document).ready(function() {
function getSum(total, num) {
return total + num;
}
var adultCalc = function(values, data, calcParams) {
var tempvalue = [];
data.forEach(function(data) {
var count = data.age * data.qty;
tempvalue.push(count);
});
console.log('array', tempvalue);
console.log('total', tempvalue.reduce(getSum,0));
/*return tempvalue;*/
}
var tabledata = [{
id: 1,
name: "Oli Bob",
age: "12",
qty: "1",
dob: ""
},
{
id: 3,
name: "Christine Lobowski",
age: "42",
qty: "1",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon Philips",
age: "35",
qty: "2",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret Marmajuke",
age: "16",
qty: "0",
dob: "31/01/1999"
},
{
id: 5,
name: "Marmajuke",
age: "17",
qty: "0",
dob: "31/01/1999"
},
{
id: 4,
name: "Philips",
age: "27",
qty: "0",
dob: "01/08/1980"
}
];
var table = new Tabulator("#example-table", {
height: 205,
data: tabledata,
layout: "fitColumns",
columns: [{
title: "Name",
field: "name",
width: 150
},
{
title: "Age",
field: "age",
bottomCalc: adultCalc
},
{
title: "Qty",
field: "qty"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.1.4/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>

It can be done even easier. And don't forget the second parameter (initial value) of Array.reduce method.
$(document).ready(function() {
function getSum(total, num) {
return total + num;
}
var adultCalc = function(values, data, calcParams) {
return data.map(function(d) {
return d.age * d.qty;
})
.reduce(getSum, 0);
}
//or even in ES6 style
const qtyCalc = (values, data, calcParams) =>
data.map(d => d.age * d.qty)
.reduce((t, n) => t + n * 2, 0);
var tabledata = [{
id: 1,
name: "Oli Bob",
age: "12",
qty: "1",
dob: ""
},
{
id: 3,
name: "Christine Lobowski",
age: "42",
qty: "1",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon Philips",
age: "35",
qty: "2",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret Marmajuke",
age: "16",
qty: "0",
dob: "31/01/1999"
},
{
id: 5,
name: "Marmajuke",
age: "17",
qty: "0",
dob: "31/01/1999"
},
{
id: 4,
name: "Philips",
age: "27",
qty: "0",
dob: "01/08/1980"
}
];
var table = new Tabulator("#example-table", {
height: 205,
data: tabledata,
layout: "fitColumns",
columns: [{
title: "Name",
field: "name",
width: 150
},
{
title: "Age",
field: "age",
bottomCalc: adultCalc
},
{
title: "Qty",
field: "qty",
bottomCalc: qtyCalc
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.1.4/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>

Uncaught FoamTree: element has zero dimensions: 522 x 0

if (CarrotSearchFoamTree.supported) {
var foamtree = new CarrotSearchFoamTree({
id: "visualization",
dataObject: {
groups: [
{ id: "1", label: "Group 1", groups: [
{ id: "1.1", label: "Group 1.1" },
{ id: "1.2", label: "Group 1.2" }
]},
{ id: "2", label: "Group 2", groups: [
{ id: "2.1", label: "Group 2.1" },
{ id: "2.2", label: "Group 2.2" }
]},
{ id: "3", label: "Group 3", groups: [
{ id: "3.1", label: "Group 3.1" },
{ id: "3.2", label: "Group 3.2" }
]},
{ id: "4", label: "Group 4", groups: [
{ id: "4.1", label: "Group 4.1" },
{ id: "4.2", label: "Group 4.2" }
]},
{ id: "5", label: "Group 5", groups: [
{ id: "5.1", label: "Group 5.1" },
{ id: "5.2", label: "Group 5.2" }
]}
]
}
});
} else {
console.log("Visualization not supported.");
}
carrot search issue in carrotsearch.foamtree.js :Uncaught FoamTree: element has zero dimensions: 522 x 0.
this is a sample code for carrotsearch any help will be appreciated

you need to define an HTML element in which FoamTree should be embedded. The element must have non-zero dimensions.
see example:
<html>
<body>
<div id="visualization" style="width: 800px; height: 600px"></div>
<script src="https://get.carrotsearch.com/foamtree/demo/carrotsearch.foamtree.js">
</script>
<script>
window.addEventListener("load", function() {
var foamtree = new CarrotSearchFoamTree({
id: "visualization",
dataObject: {
groups: [
{ label: "Your", weight: 1.0 },
{ label: "First", weight: 3.0 },
{ label: "FoamTree", weight: 2.0 },
{ label: "Visualization", weight: 4.0 }
]
}
});
});
</script>

Ng-options don't refresh with track by

i want make cascade filter in Angular Js with ng-options
i have html
<div class="selection">
<div class="form-group">
<label for="size" class="col-sm-2 control-label">{{'logSize' | translate}}</label>
<div class="col-sm-10">
<select id="size" class="form-control" ng-model="logbook.size" ng-options="size as size.name | translate for size in versions track by size.id"></select>
</div>
</div>
<div class="form-group">
<label for="pages" class="col-sm-2 control-label">{{'logSize' | translate}}</label>
<div class="col-sm-10">
<select id="pages" class="form-control" ng-model="logbook.pages" ng-options="pages as pages.name | translate for pages in logbook.size.pages track by pages.id"></select>
</div>
</div>
<div class="form-group">
<label id="typeof" for="logSize" class="col-sm-2 control-label">{{'logSize' | translate}}</label>
<div class="col-sm-10">
<select id="typeof" class="form-control" ng-model="logbook.typeofsiding" ng-options="typeofsiding as typeofsiding.name | translate for typeofsiding in logbook.pages.typeofsiding track by typeofsiding.id"></select>
</div>
</div>
<div class="form-group">
<label for="terms" class="col-sm-2 control-label">{{'logSize' | translate}}</label>
<div class="col-sm-10">
<select id="terms" class="form-control" ng-model="logbook.terms" ng-options="terms as terms.name | translate for terms in logbook.typeofsiding.terms track by terms.id"></select>
</div>
</div>
</div>
and js
$scope.versions = [
{
id: "20cm",
name: "20 cm",
pages: [
{
id: "doublesided",
name: "Double-sided",
typeofsiding: [
{
name: "Two-side",
id: "twoside",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Text",
id: "Text"
},
{
name: "Link",
id: "Link"
}]
}
]
},
{
id: "onesided",
name: "One-sided",
typeofsiding: [
{
name: "none",
id: "none",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Text",
id: "Text"
},
{
name: "Link",
id: "Link"
}]
}
]
}]
},
{
id: "15cm",
name: "15 cm",
pages: [
{
id: "doublesided",
name: "Double-sided",
typeofsiding: [
{
name: "Two-side",
id: "twoside",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Text",
id: "Text"
},
{
name: "Link",
id: "Link"
}]
}
]
},
{
id: "onesided",
name: "One-sided",
typeofsiding: [
{
name: "none",
id: "none",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Link",
id: "Link"
}]
}
]
}]
},
{
id: "10cm",
name: "10 cm",
pages: [
{
id: "doublesided",
name: "Double-sided",
typeofsiding: [
{
name: "fold",
id: "fold",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Text",
id: "Text"
},
{
name: "Link",
id: "Link"
}]
},
{
name: "Two-side",
id: "twoside",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Text",
id: "Text"
},
{
name: "Link",
id: "Link"
}]
}
]
},
{
id: "onesided",
name: "One-sided",
typeofsiding: [
{
name: "none",
id: "none",
terms: [
{
name: "Link",
id: "Link"
}]
}
]
}]
},
{
id: "5cm",
name: "5 cm",
pages: [
{
id: "doublesided",
name: "Double-sided",
typeofsiding: [
{
name: "fold",
id: "fold",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Link",
id: "Link"
}]
},
{
name: "Two-side",
id: "twoside",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Link",
id: "Link"
}]
}
]
},
{
id: "onesided",
name: "One-sided",
typeofsiding: [
{
name: "none",
id: "none",
terms: [
{
name: "Link",
id: "Link"
}]
}
]
}]
}];
when i use ng-option without track by it perfect but i need my id values.
When i use track by the selects don't refresh and don't work properly.
Please help me. I spend whole day at this problem.

Access jqgrid elements using a javascript

I am using treegrid of jqgrid, in which i want multiselect which is not possible , so i explicitely put a checkbox column. Now I want to know how to iterate each row of tree grid and access particular cell of that row, so that I can do specific action on it. Thank in advance.

The simplest way to implement your requirements seems me to include additional column in the tree grid which has the checkbox:
You have not posted the code of the grid which you are using. It is even not clear if you are using local tree grid or a remote one. In the following example I am showing how to implement the checkbox from the "Enabled" column in case of local grid. So you can have the following results:
The corresponding demo you will find here.
The HTML code is:
<fieldset style="float:left">
<input id="getSelected" type="button" value="Get Selected"/>
</fieldset>
<fieldset style="clear:both; float:left">
<legend>Seleceted Ids</legend>
<p id="ids"></p>
</fieldset>
<fieldset style="clear:both; float:left">
<legend>Selected Names</legend>
<p id="names"></p>
</fieldset>
<div style="clear:left">
<table id="treegrid"><tr><td/></tr></table>
</div>
and the JavaScript code:
$(function () {
'use strict';
var mydata = [
{ id: "1", name: "Cash", num: "100", debit: "400.00", credit: "250.00", balance: "150.00", enbl: "1",
level: "0", parent: "null", isLeaf: false, expanded: false },
{ id: "2", name: "Cash 1", num: "1", debit: "300.00", credit: "200.00", balance: "100.00", enbl: "0",
level: "1", parent: "1", isLeaf: false, expanded: false, loaded: true },
{ id: "3", name: "Sub Cash 1", num: "1", debit: "300.00", credit: "200.00", balance: "100.00", enbl: "1",
level: "2", parent: "2", isLeaf: true, expanded: false },
{ id: "4", name: "Cash 2", num: "2", debit: "100.00", credit: "50.00", balance: "50.00", enbl: "0",
level: "1", parent: "1", isLeaf: true, expanded: false },
{ id: "5", name: "Bank\'s", num: "200", debit: "1500.00", redit: "1000.00", balance: "500.00", enbl: "1",
level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true },
{ id: "6", name: "Bank 1", num: "1", debit: "500.00", credit: "0.00", balance: "500.00", enbl: "0",
level: "1", parent: "5", isLeaf: true, expanded: false },
{ id: "7", name: "Bank 2", num: "2", debit: "1000.00", credit: "1000.00", balance: "0.00", enbl: "1",
level: "1", parent: "5", isLeaf: true, expanded: false },
{ id: "8", name: "Fixed asset", num: "300", debit: "0.00", credit: "1000.00", balance: "-1000.00", enbl: "0",
level: "0", parent: "null", isLeaf: true, expanded: false }],
grid = $("#treegrid"),
getColumnIndexByName = function (columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
iCol;
grid.jqGrid({
datatype: "local",
colNames: ["id", "Account", "Acc Num", "Debit", "Credit", "Balance", "Enabled"],
colModel: [
{name: 'id', index: 'id', width: 1, hidden: true, key: true},
{name: 'name', index: 'name', width: 180},
{name: 'num', index: 'acc_num', width: 80, align: "center"},
{name: 'debit', index: 'debit', width: 80, align: "right"},
{name: 'credit', index: 'credit', width: 80, align: "right"},
{name: 'balance', index: 'balance', width: 80, align: "right"},
{name: 'enbl', index: 'enbl', width: 60, align: 'center',
formatter: 'checkbox', editoptions: {value: '1:0'},
formatoptions: {disabled: false}}
],
height: '100%',
rowNum: 10000,
sortname: 'id',
treeGrid: true,
loadonce: true,
treeGridModel: 'adjacency',
treedatatype: 'local',
ExpandColumn: 'name',
caption: 'Demonstrate how to use Tree Grid for the Adjacency Set Model'
});
// we have to use addJSONData to load the data
grid[0].addJSONData({
total: 1,
page: 1,
records: mydata.length,
rows: mydata
});
iCol = getColumnIndexByName('enbl');
// nth-child need 1-based index so we use (iCol+1) below
$("tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")>input", grid[0]).change(function (e) {
var isChecked = $(this).attr("checked"), rowid, dataIndex,
tr = $(e.target, grid[0].rows).closest("tr.jqgrow");
if (tr.length > 0) {
rowid = tr[0].id;
dataIndex = grid[0].p._index[rowid];
if (typeof dataIndex !== "undefined" && dataIndex >= 0) {
grid[0].p.data[dataIndex].enbl = isChecked ? "1" : "0";
}
}
e.preventDefault();
});
$("#getSelected").click(function () {
var ids = [], names = [], i, data = grid[0].p.data, l = data.length, dataItem;
for (i = 0; i < l; i++) {
dataItem = data[i];
if (dataItem.enbl === "1") {
ids.push(dataItem.id);
names.push(dataItem.name);
}
}
$("#ids").html(ids.join(", "));
$("#names").html(names.join(", "));
});
});

I think there not so difficult.
$("#YourTreegridContainerTag").find(":input[type=='checkbox']").each(function()
{
$(this).attr("cheked", "checked");
});
and for disablling:
$("#YourTreegridContainerTag").find(":input[type=='checkbox']").each(function()
{
$(this).removeAttr("cheked");
});