When using tabulator-tables#4.9.3
Created 2 drop down list columns with editor: "select"
Used Code:
{title: "ProductID", field: "productID", sorter: "string", minWidth: 100, width: 150, sorter: "number", editable: Editable, editor: "number", validator: "required", hozAlign: "left", editor: "select", editorParams: { values: ProductIDSelect }, formatter: "lookup" , formatterParams: ProductIDSelect },
For Example: Products and Units. This type of drop down contain Name, ID.
After choose the name and press on save button will send the data from tabulator to C# to check all data type and Inserted to the table in database Image below.
enter image description here
Before sanded data I check data array with press right click on the page choose "Inspect" getting the below image
enter image description here
Shares indicate the number between "4" and "5" string type
When matching data by C# and finds that the Integer field type and string data are incorrect
Related
I am using exceljs to prepare an Excel file. This works fine when the first-level properties of a model are used as column keys. But when the second-level property of a Model is used as a column key, the column appears blank when the excel file gets downloaded.
worksheet.columns = [
{ header: "ID", key: "_id", width: 30 }, // work
{ header: "Survey Name", key: "name", width: 30 }, // work
{ header: "Status", key: "status", width: 15 }, // work
{ header: "Survey Type", key: "survey_type.name", width: 50 } // not work
]
How can I solve this issue?
Update
I could not find any solution within exceljs. First create a copy of the array such that I bring the required sub-properties as the first-level property, and then use the new array to generate an excel sheet.
I would like to color the cell value (Amount) in green only if the value of (KP) is true by maintaining the original money formatting.
This is my actual definition of my 2 relevant columns:
{ title: "Amount", field: "amount", width: 60, sorter: "number", hozAlign: "right", headerSort: false, formatter: "money", formatterParams: {thousand: " ", precision: 0 }, bottomCalc: "sum", bottomCalcFormatter: "money", bottomCalcFormatterParams: {thousand: " ", precision: 0}},
{ title: "KP", field: "cache", width: 25, hozAlign: "center", formatter: "tickCross",
headerSort: false, headerFilter: true, headerFilterParams: { tristate: true } },
The example shown on the webpage obviously does not work for me as I need to refer to another cell and I want to keep the predefined formatter and formatterParams options
You can use a custom function in the formatter, this example from the documentation.
{title:"Name", field:"name", formatter:function(cell, formatterParams, onRendered){
//cell - the cell component
//formatterParams - parameters set for the column
//onRendered - function to call when the formatter has been rendered
return "Mr" + cell.getValue(); //return the contents of the cell
}
It wouldn't be difficult to emulate the money formatter return value, this would be the best approach in my view. Alternatively if you wanted to run a second formatter function following the inbuilt tabulator "money" formatter you could do this by setting the cell element style, something like cell.style.fillColor = rgb etc has worked for me before. I find the first approach far better however.
Refer the documentation here Tabulator Formatters
Is it possible to get which cell the right-click context menu is performed with rowContextMenu?
rowContextMenu gives the data for all cells in the row, but I have not found how to get which cell the action happens.
Using contextMenu could be an option, but I want to build the columns-setup serverside as json and load the columns with
table.setColumns(columnsJson)
Setting columns contextmenu as a function is not a valid json,
columns": [
{ "title": "", "field": "age", "sorter": "string", "headerSort": false, "contextMenu": cellContextMenu}
]
And setting the "contextMenu" as a "string" fails with: error: "Uncaught TypeError: o.forEach is not a function"
columns": [
{ "title": "", "field": "age", "sorter": "string", "headerSort": false, "contextMenu": "cellContextMenu"}
]
Any tips on getting which cell the menu is trigged with rowContextMenu?
Or is there maybe a different/better solution builtin in Tabulator?
Reason for building the column setup serverside is that I want to have different context menu based on type of cell-data, and it will vary based on selection by user.
BR
Bjorn
If you want to get the cell that is being clicked on then you need to use the Cell Context Menu instead as this is passed the cell component that has been clicked.
You would then need to assign the menu per cell but this is easy if you define it as an array outside the table and then reference it on each column definition using the contextMenu property:
//define cell context menu
var cellContextMenu = [
{
label:"Reset Value",
action:function(e, cell){
cell.setValue("");
}
},
]
//add header menu in column definition
var table = new Tabulator("#example-table", {
columns:[
{title:"Name", field:"name",contextMenu:cellContextMenu},
{title:"Age", field:"age",contextMenu:cellContextMenu},
{title:"Address", field:"address",contextMenu:cellContextMenu},
]
});
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.)
Hi I have a question how to get the values from list in a select option.
I have this array
{
"C_ID": "Item044",
"Descripcion": "Item 1",
"ID": "044"
},
{
"C_ID": "Item045",
"Descripcion": "Item 2 ,
"ID": "045"
},
{
"C_ID": "Item046",
"Descripcion": "Item 4",
"ID": "046"
},
{
"C_ID": "Item047",
"Descripcion": "Item 5",
"ID": "047"
},
and I get this values in a select option with NgFor but I need when selected for example Item 1 get the ID and C_ID in a input text automatic
and I get this values in a select option with NgFor but I need when selected for example Item 1 get the ID and C_ID in a input text automatic
Wire an ng model to the select input. And then wire the backed field to the input. Now when the select changes the input text should change.