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.)
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
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
I try to find answer for this question but I can't. So I have simple grid with cells editting by plugin (Ext.grid.plugin.CellEditing). So in such a case I see selected cell displayed in "bluebox".
but I dont want to see such a selection, I want to change this background. Any suggestion please.
Thank you Jadhav, and I see the second problem in this grid. I want to edit only two columns:
this numbers with gray backgruond and this checkbox. The first one is working good but this checkbox not (when I check it and go to other place checked position become unchecked) and can't set the same background as I set for column with numbers. This is done by:
renderer: function(value, meta) {
meta.style = "background-color:lightgray;";
}
This method, in checkbox column give me this:
Why and how to solve this?
OK, almost ok because of your help but when I change background via css I see the following result (summary row is also, partly in background color') and still don't know why and how to correct it:
You can implement using css for selected cell in CellEditing.
In this Fiddle, I have created a demo using CellEditing plugin.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'demostore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Demo Data',
store: 'demostore',
cls:'my-grid',
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}],
selType: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
height: 200,
renderTo: Ext.getBody()
});
}
});
CSS
<style>
.my-grid .x-grid-cell-selected{
background-color: transparent !important;
}
</style>
One more way you also done using on cell editor component blur event. You need to do put this below code
var selectionModel = grid.getSelectionModel();
selectionModel.deselect(selectionModel.selection.record)
Just you have to overwrite inline css, so that you can change background color i.e..,
.x-grid-row-selected .x-grid-td {
background: #ffffff;
}
I'm trying to specifically target the first and last x-axis labels, which are text elements, and alter their attributes.
To preface this issue, I was trying to keep the first and last x-axis labels within the confines of the Highcharts container. Unfortunately, they are cutting off in the UI.
This is my configuration:
xAxis: [{
type: 'datetime',
showFirstLabel: true,
showLastLabel: true,
labels: {
step: 3,
formatter: function(){
return options.labels[this.value];
},
style: {
fontSize: '10px',
color: '#9c9c9c'
},
// x: 5,
y: 10
},
startOnTick: true,
// lineColor: 'transparent',
tickLength: 0,
minPadding: 0,
maxPadding: 0
}],
The step key is causing this I realize. Otherwise, I would be able to use overflow:justify, but I wanted the step. So, I then decided that perhaps altering the SVG would be a good solution. It worked when the chart is first loaded, but it does not work when being redrawn.
This was my solution on 'load', which I'd like to replicate on 'redraw':
Highcharts.Chart.prototype.callbacks.push(function(chart){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
});
You should configure these callbacks in the options of your chart. It's cleaner that way:
function moveLabels(){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
}
$('#container').highcharts({
chart: {
events: {
load: moveLabels
redraw: moveLabels
}
}
},
...