Our blazing fast Grid component built with pure JavaScript


Post by udo »

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


Post by marcio »

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 :)

Best regards,
Márcio


Post by udo »

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?


Post by tasnim »

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
chrome_p96Zp1WBif.gif (349.59 KiB) Viewed 413 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


Post by udo »

worked! thank you tasnim!

so to change the default behaviour it would be better to do it in https://www.bryntum.com/docs/scheduler/api/Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer, correct?

where would I add the eventRenderer? would that go into app.config.ts like the following?

export const schedulerConfig = {
  ...
  eventRenderer({ eventRecord, resourceRecord, renderData }) {
    ...
  }
  ...
}

let's say I would not like to display the icon. how would the eventRenderer look like?

thanks, udo


Post by 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:

renderData.iconCls = '';

All the best :),
Tasnim


Post by udo »

works! thank you very much tasnim!
note: I always forget to add the HTML property :|


Post Reply