- This topic has 9 replies, 3 voices, and was last updated 1 week, 1 day ago by
.
-
Im trying to create a template in a grid using a button.
My definition is ;
{label : ‘Pdf’, dataField : ‘XXX_PDF’, template: function (formatObject) {formatObject.template ='<button class=”cfg-button cfg-button-floating” type=”button” role=”button” onclick=”testFai();”><span aria-hidden=”true” class=”fa fa-html5 cfg-button-font-icon”></span></button>’;} },
Th button is correctly represented but nothing happens when I click it.
The testFai funtion does nothing but a console.log.
I tried to enable editing on the field but nothing changed.
What should I do to get my button working ?
Tks
I looked at the example.
In my environment itm didn’t work and then I tryed to reproduce in your demo.
I modify the code as shown below simply adding some console.log but the console.log is never executed or, better, I don’t see the message. Why ?
Tks
{ label: ‘Quantity’, dataField: ‘Quantity’, showIcon: true, align: ‘center’, icon: ‘fa-plus-circle’, cellsAlign: ‘center’, width: 120,
template: function (formatObject) {
if (!formatObject.template) {
console.log(‘Entrato’);
const data = document.createElement(‘span’);
const plus = document.createElement(‘smart-button’);
const minus = document.createElement(‘smart-button’);
plus.style.background = getChipColor(0);
minus.style.background = getChipColor(5);
plus.innerHTML = ‘<span class=”fa-plus”></span>’;
minus.innerHTML = ‘<span class=”fa-minus”></span>’;
data.innerHTML = formatObject.value;
data.style.marginLeft = ‘7px’;
plus.row = formatObject.row;
minus.row = formatObject.row;
plus.addEventListener(‘click’, () => {
const row = plus.row;
console.log(‘plus ‘);
row.getCell(‘Quantity’).value += 5;
});
minus.addEventListener(‘click’, () => {
const row = minus.row;
console.log(‘Minus ‘);
row.getCell(‘Quantity’).value -= 5;
});
const template = document.createElement(‘div’);
template.appendChild(data);
template.appendChild(minus);
template.appendChild(plus);
formatObject.template = template;
}
else {
formatObject.template.firstChild.innerHTML = formatObject.value;
const buttons = formatObject.template.querySelectorAll(‘smart-button’);
buttons[0].row = formatObject.row;
buttons[1].row = formatObject.row;
}
}The problem seems to be more complex.
I’ setted the template as shown below and the button is allways shown but clicking the button sometimes it works and sometime it doesn’t.
To be more clear sometime I see “Piu” and the new page opens; sometime I see “Passo di qui” and “Passo di qua” on the console.
Why ?
tks
{label : ‘Quantity’, dataField : ‘XXX_Q’, showIcon: true, align: ‘center’, icon: ‘fa-plus-circle’, cellsAlign: ‘center’, width: 120,
template: function(formatObject) {
if (!formatObject.template) {
console.log(“Passo di qui”);
const plus = document.createElement(‘smart-button’);
plus.innerHTML = ‘<span class=”fa fa-plus cfg-button-font-icon”></span>’;
plus.addEventListener(‘click’, () => {
console.log(“Più”);
window.open(“https://www.w3schools.com”);
});
const template = document.createElement(‘div’);
template.appendChild(plus);
formatObject.template = template;
}
else {
console.log(“Passo di qua”);
}
}
},I created a testcase I’ll append below.
In the demo the relevant object is the Quantity field .
Running it as a demo You’ll see :
. clicking on the + in the Quantity field the dimension of the first row will reduce (why ?)
. clicking on the + button in the first line You’ll never see the required action (open a page in another window)
. clicking on the + button in the second line You’ll see sometime the required action (open a page in another window) and sometime not.
If you remove editing it works (but I need it for another field not in the demo).
I’ll send the testcase by mail.
Tks for Your help
Tullio
I restart that thread after a while.
I wan’t able to prepare a testcase because I didn’t understand where the problem could be.
Now I get back to the problem and I understand where the problem could be.
I’ve 2 fields which are represented by a button (each one) : I did it with a template as suggested.
Each button takes 3% of the screen.
In that situation clicking on the button :
. grid rows shrink
. some rows are overlapped
. the selection checkboxes disappear on all rows.
I noticed that, with theese buttons, the grid appears quite higher than without them,
I enlarged button to 25% and the problem disappeared.
I reduced the field value to a single character and again the problem disappeared.
It seem as before representing the button it calculates the hight value of the text which, in a small space the value is divided into several lines, and takes more height space then the button is represented in that augmented space.
When I click a button or another normal cell it shrinks with the effects I described.
Is it a bug ? Is there a workaround ?
Tks
- You must be logged in to reply to this topic.