[REACT] single click for resource change

[Jammb]

I have a resource dropdown and every time to change the resource I got to double click resource dropdown for the resources to appear. Is there a way to Change the double click event trigger into to single click for resource change

[fabio.mazza]

Hi jammb,

Please share your code (or part of it) showing how you are configuring this resource dropdown and where exaclty?

Thank you

[Jammb]

PFA.

[alex.l]

Hi Jammb,
Please, follow this link: https://bryntum.com/docs/scheduler/#Grid/feature/CellEdit#config-triggerEvent
It will do the job.

All best,
Alex.

[Jammb]

Hi Alex,
I did try that and it didnt do the job.
I am not using grid. Is there any example where there is an example of columns using grid ? I tried to see but most of the examples have columns in scheduler not a grid in scheduler.

Thanks,
Mukesh.

[fabio.mazza]

Hi jammb,

This feature is from grid, but scheduler has a grid on it, then grid features are there.

triggerEvent you have to apply on your feature configuration, not on scheduler configuration, also remember that there is a wrap for react, so the config name is different:

<BryntumScheduler
    ...
    cellEditFeature={{
        triggerEvent: 'cellclick'
    }}
    ...
...

[Jammb]

Hi,
I tried doing that.

features={{
          cellEditFeature: {
            triggerEvent: 'cellclick'
          },
          }}
 

[fabio.mazza]

Jammb, it's wrong, check again my code.

you have to remove your features={{ from your code above because cellEditFeature already is a feature definition because of the wrap. Take a look on react examples to learn more about the wrap.

[Jammb]

Once I changed it, there was no more errors. But still the resources dropdown is displayed only on double click.

<Scheduler
      eventDragCreateFeature = {false}
      onBeforeEventEditShow= {(selected : any) => handleChange(selected)}
      change= {(selected : any) => handleChange(selected)}
      rowHeight= {40}
      cellEditFeature={{
        triggerEvent: 'cellclick'
    }}
        eventsVersion={eventsVersion}
        resourcesVersion={resourcesVersion}
        events={events}
        resources={resources}
        startDate={getStartDate(scheduleDay)}
        endDate={getendDate(scheduleDay)}
        eventBodyTemplate = {(data : any) => div(data)}
        eventRenderer={( selected : any) => check(selected)}
        eventEditFeature={{
          showRecurringUI : false,
       }}
       ></Scheduler>

[pmiklashevich]

Hello,

There are only 2 steps:

1. Define triggerEvent for the CellEdit feature
2. Apply the feature config taking into account it's a react app and the react wrapper can be used

Now, let's take one of our examples and get it up and running, for example

cd Scheduler/examples/react/javascript/simple 
npm install
npm run start

Go to https://localhost:3000/ and make sure it works and cell editing starts by double click on a cell.

Now let's configure CellEdit feature. The demo uses React wrapper, so need to go to the React guide and search for "Supported options". It has a list of configurations that can be applied to the Scheduler react component. And below the configurations you can find a list of features the Scheduler react component supports. Please find "cellEditFeature" in the list. It means you can configure the component like:

import { BryntumScheduler } from 'bryntum-react-shared';
.....
<BryntumScheduler
    cellEditFeature={{
        triggerEvent : 'cellclick'
    }}

Please go to Scheduler/examples/react/javascript/simple/src/containers/Main.js and modify it to have BryntumScheduler configured with the "cellEditFeature" property. Since "npm run start" is still running, please go to the browser and make sure the cell editing starts by a cell click.

Запись активности на экране 2020-09-15 в 10.56.09.gif (3.45 MiB) Viewed 1430 times

Let us know please if it works for you.

Best,
Pavel