I'm using the tabulator's select editor to update my database on value change, once this is updated I need to update my cell value to the title of the selected value and not the value itself. currently it is updating the value and not the title.
is there a function or a method call to get the selected title from the select editor when the value changes?
Thanks
this is built in function in the tabulator ,use the formatter ,make it "lookup" and send it the array of values in "formatterParams" as below
{ title: "Hi", field: "status", editor: select2Editort, editorParams: { values: StatusSelect }, formatter: "lookup", formatterParams: StatusSelect, minWidth: 120},
the extra code is
formatter: "lookup", formatterParams: StatusSelect
Related
Is it possible to have one select field depend on the previous one?
Users select one value from select_1 then accordingly the value in select_2 change. Maybe a custom formatter?
const newCol = {//create column group
title: oldRow.title,
field: oldRow.field,
columns: [
{
title: rowData.select1.title, field: rowData.select2.name, editor: 'select',
editorParams: {values: rowData.select1.values}
},
{
title: rowData.select2.title, field: rowData.select2.name, editor: 'select',
editorParams: function (cell) {
console.log(cell)
return {values: [1, 2, 3]}
}
},
],
}
From above I need select1 selected value.
Would this work Editors?:
"If you want to generate the options when the select editor is triggered, then you can pass a function into the editorParams, that must return the option list in one of the two formats outlined above"
{title:"Name", field:"name", editor:"select", editorParams:function(cell){
//create a options list of all values from another column in the table
var rows = table.getRows();
var values = {};
rows.forEach(function(row){
var data = row.getData();
values[data.fullname] = data.fullname;
});
return {values:values};
}
Instead of fetching the all the rows, just fetch the cell value of the previous select column and use that to build the choices for the current select. This sort of depends on the specifics of how the two columns relate to each other. More information on that would be helpful.
I am using Tabulator for client-side entry and editing of tabular data. In my application I have need to copy the data from a single [Crew Leader] table to one or more [Crew Member] tables. After data for the [Crew Leader] is entered I am making use of a button to trigger the copying process to the [Crew Member] tables. This is accomplished using the Tabulator setData() function which works as expected.
After data has been copied to the [Crew Member] tables it is necessary to edit each row with information pertinent to the individual [Crew Member]. The on-screen editing process works as expected.
My problem arises when I go to export the data. Note, the data in my JSON string:
is not the same as what appears on-screen; and
is the same for all [Crew Member] tables.
It appears the changes being applied to one [Crew Member] table are being applied (in the virtual DOM) to all [Crew Member] tables. Stated differently, with two "cloned" tables the changes applied to table one are applied to table two in the virtual DOM but not on-screen (and vice versa).
Client-side script which does the copying from the [Crew Leader] table to the [Crew Member] table(s):
function CloneTable() {
var tableCrewLeader = Tabulator.prototype.findTable('#CrewLeaderTable')[0];
var dataCrewLeader = tableCrewLeader.getData();
if (tableCrewLeader.getDataCount() > 0) {
// Verify a Tabulator table is present for each selected [Crew Member] by
// looping through each <div> element with the class "crew-member-card".
$(".crew-member-card").each(function () {
if ($(this).attr('id').length > 0) {
const divId = "#" + $(this).attr('id').replace('Card', 'Table');
const tableMember = Tabulator.prototype.findTable(divId);
if (tableMember.length > 0) {
const tableCrewMember = Tabulator.prototype.findTable(divId)[0];
tableCrewMember.setData(dataCrewLeader);
}
else {
console.log("The Tabulator table " + divId+ " was not found.");
}
}
});
}
}
It is also worth noting, these anomalies do not occur when the data for the [Crew Member] tables is entered directly (no setData() method is used). On-screen edits/changes are not reflected in other tables when data was not copied to the table originally.
For what it's worth, the following is the loop I use to verify the contents of each [Crew Member] table row (using Firefox Web Console to view the log):
var dataCrewMember = tableCrewMember.getData();
$(dataCrewMember).each(function () {
console.log(this);
});
EDIT
I have eliminated the disparity between the on-screen data and the exported data by setting the reactiveData attribute in my Tabulator constructor, as follows:
var table = new Tabulator(divid, {
height: "100%",
layout: "fitDataFill",
reactiveData: true, //enable reactive data
movableRows: true,
tabEndNewRow: true,
rowContextMenu: myActionContextMenu,
keybindings: {
"navUp": true,
"navDown": true,
},
columns: [
{ title: "Phase Code", field: "Phasecode", width: 144, editor: "select", editorParams: { values: function (cell) { return window.laborPhaseCodes; } } },
{ title: "Date Worked", field: "DateComp", hozAlign: "center", sorter: "date", editor: dateEditor },
{ title: "Start Time", field: "TimeStart", hozAlign: "center", sorter: "time", editor: timeEditor },
{ title: "Finish Time", field: "TimeFinish", hozAlign: "center", sorter: "time", editor: timeEditor },
{ title: "Memo", field: "Memo", width: 144, hozAlign: "left", editor: "input" },
{ title: cloneString, headerSort: false, headerClick: CloneTable, rowHandle: true, formatter: "handle" }
],
});
Note, however, I am still experiencing the issue wherein a change made in one [Crew Member] table is automatically replicated within the other [Crew Member] tables. This only happens when the data in the [Crew Member] tables has been populated using the setData() method.
Any assistance is greatly appreciated.
Inside of your cloneTables function, you set dataCrewLeader = tableCrewLeader.getData(). Then you use dataCrewLeader as the value in each of the newly created tables. I can only assume that these are being passed as a reference because they are objects. So, changing one changes them all. (I don't know if this is a bug or if it is expected that tabulator create copies when calling setData().)
To fix this, instead of setting a variable to the value. You want to call .getData() multiple times. So, you could do tableCrewMember.setData(tableCrewMember.getData()) and it will work as expected.
You can comment/uncomment the lines inside of the copyData function from the below example to see the issue.
Edited the example, so that it works without changing anything.
https://jsfiddle.net/nrayburn/85ecbvys/36/
I am trying to create a table for my website and for some reason it is only showing the first row of data.
This is how I am formatting the columns of the data:
const { items } = this.props.item;
// console.log({ items });
// react - bootstrap - table - next
const columns = [{
dataField: 'team',
text: 'Team',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(row.team)[rowIndex]
)
}, {
dataField: 'current_Rank',
text: 'Current Rank',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(row.current_Rank)[rowIndex]
)
}, {
dataField: 'new_Rank',
text: '321 Rank',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(row.new_Rank)[rowIndex]
)
}];
This is how I am returning the table so that it renders the table:
return (
<BootstrapTable
keyField="team"
data={items}
columns={columns}
striped
hover />
)
}
}
The data:
Picture from the console
Live site: https://nhl-321-pointsystem.herokuapp.com/
I looked up your network response for /api/items API call, and found out that the data contains only one item. This being one of the reason you're seeing a single row when the table is rendered.
Please note the, another reason for the issue is, react-bootstrap-table-next key
data accepts a single Array object. And not array of single object.
You should re-arrange your data so that key 'team' will be present for all items in the array. And rest of the column header values (e.g. current_Rank) are available for each like.
Something like a reformat function I created in the sandbox available here.
Plus point - After you apply the reformat function, you won't need formatter for each column unlike your previous solution.
Alternate but recommended solution would be to send the formatted response from the API endpoint only, instead of re-parsing and creating new object to fit the needs of UI.
Sandbox link - https://codesandbox.io/embed/32vl4x4oj6
(FYI, I'm using jqGrid 5.)
My question is about a column filter in jqGrid. I have a field that comes back as a boolean from the server, either "true" or "false". I may have the luxury of changing this to a 0/1, but I really don't want to if I can avoid it. So, it looks like this:
{"rows":[{"rowID":47568,"field1":"some text here","isOpen":true} ...]}
In my jqGrid, I am using the "beforeProcessing" function to show that boolean as something besides "true" or "false":
beforeProcessing: function(data) {
for(var i=0, len=data.rows.length; i< len; i++) {
data.rows[i].isOpenModified = openFormatter(data.rows[i].isOpen);
}
...
function openFormatter(isOpen) {
return isOpen ? '' : 'CLOSED';
}
This has the effect of leaving the cell blank if isOpen is true, and showing 'CLOSED' if it's false. Everything is good so far.
The problem I'm having is the select field for the toolbar filter field. Here is the jqGrid column model:
colModel: [
{ name: 'field1', label: 'Stuff', width: 100},
{ name: 'isOpenModified', index:'isOpen', label: 'CLOSED',
searchoptions: { sopt:['eq'], value: ':All;" ":Open;"CLOSED":CLOSED'}, stype: 'select'},
],
This correctly shows the select box for the "CLOSED" field, but selecting anything besides "All" shows nothing.
I did try to change the isOpenModified to a 0 and 1, and then the filter select box worked, but of course I can't deliver that. My requirement is to display either empty (isOpen==true) or "CLOSED" (isOpen==false).
I feel like the solution might involve the name and index fields of the column model, but I can't pinpoint what I'm doing wrong. I appreciate your time....
I discovered the solution to the original problem, however it presents another problem.
The searchoptions needed to be modified in order to make it work:
{ name: 'isOpenModified', label: 'CLOSED',
searchoptions: { sopt:['eq'], value: ':All; :Open;CLOSED:CLOSED'}, stype: 'select'}
Notice the quotes are removed from around the space and from around CLOSED.
I also changed the format method to return a space instead of an empty string:
return isOpen ? ' ' : 'CLOSED';
This causes another issue: Now the "Open" option is selected by default (but it wasn't filtered by Open items). I attempted to solve that problem by reversing the order:
{ name: 'isOpenModified', label: 'CLOSED',
searchoptions: { sopt:['eq'], value: ' :Open;:All;CLOSED:CLOSED'}, stype: 'select'}
This worked insomuch as "All" was selected by default, but it was 2nd in the list. I'm waiting for the "style" guys to throw a fit. Any advice?
I'm, trying to add a search box exactly as one on sencha docs home page http://docs.sencha.com/ext-js/4-0/
I used the code from the example
http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html
and everything works as expected except for one thing ..
when I select an option from a list in my search box the combobox value is set to the selected value .. and when I press arrow down button it performs a new search with modified query ..
but I just want to see the results of the previous search - exactly the behaviour of the search box on sencha page
any ideas how to achieve that ?
After trying various things the code below does what i need, but maybe there is a better way ..
I had to set triggerAction to 'query' and also had to manually reset the text of the combobox in the the select event handler
var searchBox = {
xtype: 'combo',
store: dataStore,
displayField: 'title',
valueField: 'id',
autoSelect: false,
typeAhead: false,
fieldLabel: 'Search for',
hideTrigger:true,
anchor: '100%',
mode:'remote',
triggerAction: 'query',
listeners: {
'select' : function(combo) {
var selected = this.value;
combo.setValue(combo.lastQuery);
showResult(selected);
}
},
listConfig: {
loadingText: 'Searching ...',
emptyText: 'No matching posts found.',
getInnerTpl: function() {
return '<a class="search-item" href="?term={id}" onclick="return javascript:showResult(\'{id}\')">' +
'<h3><span>{title}<br /></span>{id}</h3></a>';
}
},
pageSize: 10
}
You need first sample from this page. Type "A" first
http://docs.sencha.com/ext-js/4-0/#!/example/form/combos.html