Page 1 of 2

[REACT] value from finalizeCellEdit function

Posted: Wed Nov 30, 2022 10:54 am
by bhavisure

Hi,
We are adding validation for assignments through resourceassignment column.

used https://bryntum.com/products/gantt/docs/api/Gantt/column/ResourceAssignmentColumn#config-finalizeCellEdit for validating the assignments.
I want the currently added resources details . So used the "value" parameter to get the newly added assignments .

But the values shows all the assignments that were added

For example: if I add an employee say John to a task initially and come out of the resourceassignment editor. And again I go and add an employee namely Clara , then on the value parameter I get both John and Clara assignments records. I just want to get Clara's assignment on second time resource selection.

Is there any way to get only the currently selected records(Clara) and not along with the previously selected records?


Re: [REACT] value from finalizeCellEdit function

Posted: Wed Nov 30, 2022 11:43 am
by marcio

Hey bhavisure,

Yes, there is a way, we have a parameter on finalizeCellEdit that has the old value of the field (you'll see it on the documentation as well, and from there, you can filter the difference to get only the new values. Would be something like this:

finalizeCellEdit : ({ oldValue, value }) => {
	// Get only the new values selected
	const newData = value.filter(value => !oldValue.some(oldItem => oldItem.id === value.id));
}

Re: [REACT] value from finalizeCellEdit function

Posted: Thu Dec 01, 2022 8:28 am
by bhavisure

Hi Marico,
Got the newly assigned records. Thanks

But we are validating using a query it should wait till the response of the query.

  finalizeCellEdit: async item => {
            const { oldValue, value } = item;
            const newData = value.filter(
              value => !oldValue.some(oldItem => oldItem.id === value.id)
            );
            let idevent = item.record.id;
            let idresource = newData.map(o => o.resourceId);
            await ValidationFunc(idevent, idresource);
            debugger;
            if (
              ValidationResponse &&
              ValidationResponse.data == null
            ) {
              return false;
            } else if (
              ValidationResponse &&
              ValidationResponse.data.errorid == 1001
            ) {
              return true;
            }
          },

When the response of the query comes, by then return true false is not accepting .
Instead getting the below error

validation.PNG
validation.PNG (19.96 KiB) Viewed 563 times

How to wait until the response of the query and then finalize the assignment ?
is there any way to add

async =  true

?


Re: [REACT] value from finalizeCellEdit function

Posted: Thu Dec 01, 2022 11:07 am
by marcio

Hey bhavisure,

Are you able to share what your Gantt config looks like? I added a test column in our basic example with a fake timeout and it work just fine (without any errors), which version are you using??

{
            type             : 'resourceassignment',
            width            : 120,
            showAvatars      : true,
            finalizeCellEdit : async({ oldValue, value }) => {
            // Get only the new values selected
                const newData = value.filter(value => !oldValue.some(oldItem => oldItem.id === value.id));
                await new Promise(resolve => setTimeout(resolve, 3000));
                return true;
            }
        }

Also, there is a possible scenario when you don't have ValidationResponse in your code, it doesn't return either true or false.


Re: [REACT] value from finalizeCellEdit function

Posted: Thu Dec 01, 2022 12:11 pm
by bhavisure

Can you try returning false in same function


Re: [REACT] value from finalizeCellEdit function

Posted: Thu Dec 01, 2022 12:25 pm
by marcio

It worked as well because returning false means that there is an error in that cell edit action, as you'll see in the documentation

The edit will not complete until it returns false to mean the edit cannot be finished, or true to go ahead and complete.


Re: [REACT] value from finalizeCellEdit function

Posted: Thu Dec 01, 2022 2:12 pm
by bhavisure

In that case , I want to remove the assignment done in case the validation fails.
How can I remove the assignment ? is there something like

finalize(); 

?


Re: [REACT] value from finalizeCellEdit function

Posted: Thu Dec 01, 2022 3:13 pm
by marcio

Yes, there is, is not finalize, but you can cancel the editing like this

finalizeCellEdit : async({ oldValue, value, grid  }) => {
                // Get only the new values selected
                const newData = value.filter(value => !oldValue.some(oldItem => oldItem.id === value.id));
                // Do the validation
                await new Promise(() => setTimeout(() => {
                    grid.cancelEditing(true);
                }, 3000));
            }

https://bryntum.com/products/gantt/docs/api/Gantt/feature/CellEdit#function-cancelEditing


Re: [REACT] value from finalizeCellEdit function

Posted: Thu Dec 01, 2022 8:27 pm
by bhavisure

tried the same code you sent faced the below error

error_screenshot.PNG
error_screenshot.PNG (19.63 KiB) Viewed 531 times

Im able to get the grid value and

startEditing()

function is also available

but

grid.cancelEditing

throws the above error

Why is it not working? any other way to procced with the logic ?


Re: [REACT] value from finalizeCellEdit function

Posted: Fri Dec 02, 2022 7:02 am
by tasnim

I tried it in our advanced react demo, And it works fine here. Could you please provide a runnable test case so we can debug it?