Our blazing fast Grid component built with pure JavaScript
hi,
I am using this example as a base to customize it towards what I need:
in file app.component.ts the following line of code determines what is displayed when dragging the grid element:
proxy.innerHTML = `<i class="${task.iconCls}"></i> ${task.name}`;
I changed that to
proxy.innerHTML = `display something else`;
because I want to display something else.
I noticed that during dragging this is working properly, but when it is dropped it shows the "old" info.
I am probably missing something where do I have to change that?
thanks, udo
Hello udo,
You need to do the same thing, but in the drop event, you also can do
const proxy = context.element,
And follow the same approach there
hello marcio,
I tried and added the following to drop:
drop : ({ context }) => {
const
proxy = context.element,
task = context.task,
target = context.target
;
proxy.innerHTML = `<i class="${task.iconCls}"></i> display something else`;
...
}
note: I also tried with target.innerHTML = ...
unfortunately it still displays the original/default(?) content... I am probably missing something else...
thanks, udo
p.s.: is there a documentation reference which explains what is displayed by default and how to change that?
Hi, udo,
To do so, in the drop event you need to set task.name
to whatever you want to display when dropped.
if (date) {
// Remove from grid first so that the data change
// below does not fire events into the grid.
(grid.store as Store).remove(task);
task.setStartDate(date, true);
task.name = 'XYZ';
Here is a preview that it is working:
chrome_p96Zp1WBif.gif (349.59 KiB) Viewed 451 times
You can also check this :
https://bryntum.com/docs/scheduler-pro/api/SchedulerPro/view/SchedulerPro#config-eventRenderer
By default name
is displayed
Good Luck ,
Tasnim
yes. The eventRenderer
should be in the app config and also add a property called eventRenderer
to HTML
so to change the default behaviour it would be better to do it in Scheduler.view.mixin.SchedulerEventRendering#config-eventRenderer, correct?
Yes, if you want to do it for all events or conditionally.
let's say I would not like to display the icon. how would the eventRenderer look like?
Here is how you can achieve it:
All the best ,
Tasnim
works! thank you very much tasnim!
note: I always forget to add the HTML property