How to exclude columns from row selection in tabulator 5.2 - tabulator

I have a table with selectable rows. I want to exclude clicks on the "SAS" column from changing the row selection.
var tabledata = [
{name:"Oli Bob", location:"United Kingdom", gender:"male", col:"red", dob:"14/04/1984"},
{name:"Jamie Newhart", location:"India", gender:"male", col:"green", dob:"14/05/1985"},
{name:"Gemma Jane", location:"China", gender:"female", col:"red", dob:"22/05/1982" },
{name:"James Newman", location:"Japan", gender:"male", col:"red", dob:"22/03/1998"},
];
var table = new Tabulator("#example-table", {
data:tabledata,
selectable: true,
columns:[
{title:"Row Num", formatter: "rownum"},
{title:"Name", field:"name", width:200},
{title:"SAS", formatter: "tickCross"} // exclude clicks on this column from changing the selection
],
});
Kind regards, simon

I used a cellClick event on your "SAS" column to handle your need.
Working Demo: https://codesandbox.io/s/exclude-cols-from-row-selection-ikxth5?file=/src/index.js
Not sure if there is any other proper way to achieve that as my solution is kind of a trick. But hope it helps!

Related

How to use joins for sublists values in search expressions

nlapi allows to use joins to refer to values in another record or a sublist, when searching for a record. E.g. if there is a record FOO
FOO: {
type: 'rectype',
field1: '111',
sublists:
bar: [
{value: 1,}, {value: 2,}
]
}
I can search for this record with a query, provided there is a join, let's say, bar to the bar sublits:
nlapiSearchRecord('rectype', null,
[
['field', 'equalto', 'bar',],
'and',
['bar.value', 'equalto', '1',],
],
[ new nlobjSearchColumn('anotherfield', null, null), ]
);
This works. And the question is: is there a way to find a record (the one from the example) by specifying more sublist values, like:
nlapiSearchRecord('rectype', null,
[
['field', 'equalto', 'bar',],
'and',
['bar.value', 'equalto', '1',],
'and',
['bar.value', 'equalto', '2',],
],
[ new nlobjSearchColumn('anotherfield', null, null), ]
);
I've tried numerous approaches with different expressions, but it finds nothing with such a query.
A more concrete example is to find a bomrevision, which has specific components and bomquantities (the commented code is just for demonstration purposes of some approaches with the filter expression I've tried):
nlapiSearchRecord('bomrevision', null, [
['isinactive', 'equalto', 'F',],
'and',
['component.item', 'is', '4942',],
'and',
['component.item', 'is', '4936',],
//[
// 'and',
// ['component.bomquantity', 'equalto', '38',],
//],
//'and',
//[
// ['component.item', 'anyof', '4936',],
// 'and',
// ['component.bomquantity', 'equalto', '38',],
//],
],
[ new nlobjSearchColumn('name', null, null), ]
);
Thank you
I understand your question to be "How can I find items where the component list includes multiple specified items?"
The challenge here is that when you join to the component list, NetSuite returns a result for each line in the list. This means any line that contains 'Item 1' will not contain 'Item 2' and vice versa, so no result meets the criteria.
You can work around this using the following approach:
Group the results by 'main' or 'parent' record ('FOO' or 'bomrevision' in your examples).
Use NS_CONCAT to give a field in each result that contains values from all the sublist results. (Note that NS_CONCAT is undocumented, so use at your own risk).
Use summary criteria formulae to inspect the concatenated field for each value of interest.
Example (tested with assembly items and their member items as I don't have access to an account with BOM revisions):
[
["type","anyof","Assembly"],
"AND",
["min(formulatext: NS_CONCAT({memberitem.name}) )","contains","ITEM 1"],
"AND",
["min(formulatext: NS_CONCAT({memberitem.name}))","contains","ITEM 2"]
]
Or, for your 'bomrevision' (untested, adapted from above):
[
["min(formulatext: NS_CONCAT({component.item}) )","contains","4942"],
"AND",
["min(formulatext: NS_CONCAT({component.item}))","contains","4936"]
]
Be aware that under some circumstances NetSuite will default to returning the text of a list field rather than the value. If this is the case (and the values shown in your example are internal IDs as I'm assuming), you may need to replace component.item with component.item.id, or change the search values to the text name instead.
There may be a more straightforward way of doing this so I'd be glad to hear from anyone with a better solution.
Edit in response to request in comments:
Here is the full code of a working example in my account:
var assemblyitemSearch = nlapiSearchRecord("assemblyitem",null,
[
["type","anyof","Assembly"],
"AND",
["min(formulatext: NS_CONCAT({memberitem.name}) )","contains","ITEM 1"],
"AND",
["min(formulatext: NS_CONCAT({memberitem.name}))","contains","ITEM 2"]
],
[
new nlobjSearchColumn("itemid",null,"GROUP").setSort(false),
new nlobjSearchColumn("displayname",null,"GROUP"),
new nlobjSearchColumn("salesdescription",null,"GROUP"),
new nlobjSearchColumn("formulatext",null,"MIN").setFormula("NS_CONCAT({memberitem})")
]
);
This is an Item search filtering by Member Items, as the closest thing in my account to the BOM Revisions in the example. The only change I have made is to replace the item names with "ITEM 1" and "ITEM 2". You would need to replace these with relevant items from your system.
I can go to a Sales Order page and open developer tools on my browser and add the above code to create a search, then append the following additional code to retrieve results and print out to the console:
var data = [];
assemblyitemSearch.forEach(r => {
var vals = {};
r.rawValues.forEach(v => {
vals[v.name] = v.value
});
data.push(vals);
});
console.table(data);
This returns a table with results exactly as expected.
Edit 2: Adding example using Sales Orders and Items as possibly more consistent between different accounts.
var salesorderSearch = nlapiSearchRecord("salesorder",null,
[
["type","anyof","SalesOrd"],
"AND",
["trandate","within","thismonth"],
"AND",
["min(formulatext: NS_CONCAT({item}))","contains","ITEM 1"],
"AND",
["min(formulatext: NS_CONCAT({item}))","contains","ITEM 2"]
],
[
new nlobjSearchColumn("trandate",null,"GROUP"),
new nlobjSearchColumn("tranid",null,"GROUP"),
new nlobjSearchColumn("formulatext",null,"MIN").setFormula("NS_CONCAT({item})")
]
);

Why is Tabulator textarea losing focus on every key press?

I have a simple Tablulator JS Fiddle at the link below that has 3 columns. The last column (TA Test) has both the formatter and editor set to 'textarea'. Any attempt to enter values into that field result in the cell immediately losing focus on any key press (at least I think that is what is happening). There are no console or other errors and from what I can tell all the Tabulator options are correct.
What am I missing here to make this cell editable as a textarea?
https://jsfiddle.net/gbvam5ck/2
var data = [
{
pid: 1001,
title: "Test One",
Q1: {qid: 1, value: 1},
Q2: {qid: 2, value: null},
},
{
pid: 1002,
title: "Test Two",
Q1: {qid: 1, value: 0},
Q2: {qid: 2, value: "Hello"},
},
];
var columns = [
{title: "PID", field: "pid"},
{title: "Title", field: "title"},
{title: "TA Test", field: "Q2.value",
formatter:"textarea",
editor: "textarea",
editorParams:{
elementAttributes:{
maxlength:"500",
}
},
}
];
var table = new Tabulator("#example-table", {
index:"pid",
height: "100%",
layout: "fitData",
columns,
data: data,
});
It looks to be a bug using the textarea with the table height option set to a percentage. If you use a pixel value, then it works as expected.
I would recommend you fill out a bug report against the github project. https://github.com/olifolkerd/tabulator/issues/new?assignees=&labels=Possible+Bug&template=bug_report.md&title=
The bug report template shows you what information is needed for the bug to be easy to replicate and fix.
(If you don't have a Github account, then I can create the bug report.)

How do I create a table in Tabulator without having to add the columns attribute?

The code given in the documentation requires the column attribute and the corresponding JSON column mapping. But I have a dataset having 100+columns and I don't want to map them manually. Is there a function in tabulator that creates the table with the original column names given in JSON. I tried SetData Function but it doesn't work. I tried to remove the columns attribute from the below code but it still doesn't work (Tables are not displayed in the web).
Code given in the documentation is not working:
var table = new Tabulator("#example-table", {
index:"age", //set the index field to the "age" field.
});
var tableData = [
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
]
table.setData(tableData);
Code working only with Column attributes:
var table = new Tabulator("#example-table", {
index:"age", //set the index field to the "age" field.
});
var tableData = [
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
]
var table = new Tabulator("#example-table", {
data:tableData, //set initial table data
columns:[
{title:"Name", field:"name"},
{title:"Age", field:"age"},
{title:"Gender", field:"gender"},
{title:"Height", field:"height"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob"},
{title:"Cheese Preference", field:"cheese"},
],
});
Not a function, but a table constructor property:
http://tabulator.info/docs/4.3/columns#autocolumns

Is this consistent behavior between "select" and "autocomplete" options of Tabulator?

to replace raw values I use "lookup" feature of Tabulator.
But "select" and "autocomplete" behaves differently
var country_list = {
1: "Germany",
2: "Ukraine",
3: "Canada",
};
//Build Tabulator
var table = new Tabulator("#example-table", {
height:"311px",
data: tabledata,
columns:[
{title:"ID", field:"id", width:40 },
{title:"Country", field:"country_id", width:130,
editor:"select",
editorParams:{values: country_list, },
formatter : "lookup",
formatterParams : country_list,
},
{title:"Country2", field:"country_id", width:130,
editor:"autocomplete",
editorParams:{values: country_list, },
formatter : "lookup",
formatterParams : country_list,
},
],
});
Try to edit Country and Country2 fields:
JSFiddle
"select" displays label, but "autocomplete" displays raw value.
Is this behavior consistent?
If yes, how to force Tabulator to hide raw value?
This is a bug, a fi has been pushed to the 4.2 branch which should be released shortly

dgrid/Grid setting dynamic column field

I'm new to dgrid/Grid. I have problem when set the last field to columns of Grid. My data array:
[{
"StatisticType": "Năng suất lập trình",
"Language": "PHP",
"Phase": "Code - Review Code",
"ProjectType": "Customize/Full",
"Donvi": "KLOC/ManMonth",
"**HSL**": "2.2"
}, {
"StatisticType": "Năng suất lập trình",
"Language": "PHP",
"Phase": "Code - Review Code - UT",
"ProjectType": "Customize/Full",
"Donvi": "KLOC/ManMonth",
"**TTP**": "1.21"
}, {
"StatisticType": "Tỷ lệ bug phát hiện khi review source code",
"Language": "Tính chung các ngôn ngữ",
"Phase": "",
"ProjectType": "Customize/Full",
"Donvi": "bug/KLOC",
"**CCC**": "0"
}]
I save my data array to ViewBag.Data and here is my code:
<script>
var report = #Html.Raw(ViewBag.Data);
require([
'dojo/_base/declare',
'dstore/Memory',
'dgrid/OnDemandGrid'
], function (declare, Memory, OnDemandGrid) {
var store = new (declare([Memory]))({
data: report_#(i)
});
// Instantiate grid
var grid = new (declare([OnDemandGrid]))({
collection: store,
columns: {
StatisticType: 'Số liệu thống kê',
Language: 'Ngôn ngữ LT',
Phase: 'Công đoạn',
ProjectType: 'Loại Project',
Donvi: 'Đơn vị tính',
"The last field of column"
(if I set HSL: 'HSL' it's okay but the other fields??)
}
}, 'grid');
grid.startup();
});
</script>
I had read https://github.com/SitePen/dgrid/blob/v0.4.3/doc/components/core-components/Grid.md but have no idea. Can any one help me?
Thanks a lot!
Finally, I solved my problem.
First, get your data as a datatable, then you convert it into a json array.
Second, in html you bind Json array to the Grid's store.
Because the last column is dynamic, so you can get datatable column and convert to Json array to use in HTML.
Hope this help someone else.

Resources