ColumnDirective error on editTemplate using Hooks

[Alex]

Hi,

I'm building a React Web App for dental clinics.

Instead of react class component I'm using function with React Hooks, useState, useEffect.

I'm using GridComponent (@syncfusion/[email protected]) in order to manage clinics, users, patients..

I have a set of function called "cicassservice" that use axios promise func to get, update, delete items.

Everything worked fine, but I needed to use a custom datetimepicker for the birthday date of patients.

So in the relative columndirective I used the parameter editTemplate in this way:

<ColumnDirective field='birthday' editTemplate={(e) => calBirth()} format={'dd/MM/yyyy'} type='date' headerText={props.t('Data Nascita')} />

where calBirth is

const calBirth = (args) => {  //console.log(args);

        return (<DatePickerComponent value={getValue('birthday', args)} id="birthday" placeholder="To" floatLabelType='Always' format='dd/MM/yyyy' />)

    }

The datepickercomponent is correctly shown, I can choose dates, but when I try to save after a new item insert, I get a white screen with a generic GridComponent error.

I think is something between editTemplate and React Hooks because of I had another app, and with react class component is working correctly.

Can you help me?

In the zip attached you can find the error, the syncfusion packages installed, the file patient.js with the whole function and the images of the app.

Thank you in advance.

Alex

Attachment: syncfusion_40ed44f.zip

[Rajapandi Ravi]

Hi Alex, 

Greetings from syncfusion support 

From your update, We could see that you are rendering a datePicker component in a Grid’s  EditTemplate and facing a problem while adding the record. Based on your requirement scenario, we have prepared a sample with Functional component and try to reproduce your reported problem at our end. But it was unsuccessful. Please refer the below code example and sample for more information. 

 

const editTemplate =(args)=> { 

return (<DatePickerComponent value={getValue('OrderDate', args)} id="OrderDate" placeholder="Order Date" floatLabelType='Never'/>) 

} 

 

var grid;  

 

var initialFlag = true; 

  var toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

 

  var filterSettings = { type: 'Menu' } 

 

 

var startDate = ''; 

var endDate = ''; 

var customFilter = false; 

 

const SyncGrid = () =>{ 

  return ( 

    <div> 

        <GridComponent 

        id={"Grid"} 

        dataSource = {hierarchyOrderdata.slice(0,9)} 

          allowFiltering={true} 

          filterSettings={filterSettings} 

          ref={g => (grid = g)} 

          toolbar={toolbarOptions} 

          editSettings={editOptions} 

          height={320} 

        > 

          <ColumnsDirective> 

            <ColumnDirective 

              field="OrderID" 

              headerText="Order ID" 

              width="100" 

              isPrimaryKey ={true} 

            /> 

            <ColumnDirective 

              field="CustomerID" 

              headerText="Customer ID" 

              width="100" 

            /> 

            <ColumnDirective 

              field="OrderDate" 

              headerText="Order Date" 

              type='date' 

              format='dd/MM/yyyy' 

              editTemplate={editTemplate} 

              width="100" 

            /> 

            <ColumnDirective 

              field="ShipCountry" 

              headerText="Ship Country" 

              width="100" 

            /> 

          </ColumnsDirective> 

    <Inject services={[Toolbar, Edit, Page, Filter]} /> 

        </GridComponent> 

</div> 

  ); 

} 

 

Sample: https://stackblitz.com/edit/react-xa25ij-pppshm?file=component%2Fapp.jsx 

If you still face the issue, Please share the below details that will be helpful for us to provide better solution. 

1)      Please share your exact requirement with detailed description. 

2)      In your query you have mentioned that “I think is something between editTemplate and React Hooks”. So please confirm if you are changing any state while performing Inserting the record. 

           

3)      If yes, please share the details about what you are trying to change with state. 

4)      Please share issue scenario in video demonstration format 

5)      Please share any issue reproducible sample or please modify the above sample as per your application structure and try to reproduce the issue. 

Regards,
Rajapandi R 

[Alex]

Hi Rajapandi,

I found the origin of the issue: in component-base.js of ej2-react-base module, at row 347 there's a for cycle with a wrong length array: it's used   allColumns.length instead of  changedProps.length.

if (this.getModuleName() === 'grid' && key === 'columns') {

                        for (var _c1 = 0, allColumns = this.columns; _c1 < allColumns.length; _c1++) {

                            var compareField1 = getValue('field', allColumns[_c1]);

                            var compareField2 = getValue(_c1 + '.value.field', changedProps);

                            if (compareField1 === compareField2) {

                                var propInstance = getValue(changedProps[_c1].key + '.' + changedProps[_c1].index, this);

                                if (propInstance && propInstance.setProperties) {

                                    propInstance.setProperties(changedProps[_c1].value);

                                }

                                else {

                                    extend(propInstance, changedProps[_c1].value);

                                }

                            }

                        }

                    }

My allcolumns contain a one more item,  "Actions". This call an exception.

I controlled the same file in old version: there was changedProps.length correctly.

Please correct it.

I send you the correct component-base file

Best regards

Alex

Attachment: componentbase_3a661218.7z

[Praveenkumar Gajendiran]

Hi Alex,

Thanks for your update.

We checked your query and provided information. We are validating on your reported issue at our end. We will provide the further details on August 20, 2021. 

We appreciate your patience until then.

Regards,
Praveenkumar G 

[Rajapandi Ravi]

Hi Alex, 

Thanks for your patience 

To find the root cause of your reported problem, We need some information for our clarification then only we have to fix the problem. So please share the below details that will be helpful for us to provide better solution. 

1)     In your query you have mentioned that “My allcolumns contain a one more item,  "Actions".”. So please share the details about this query. 

2)     Please share the issue scenario in video demonstration format. 

3)     Please share the complete Grid rendering code. 

4)     Please share any simple issue reproducible sample or share your issue reproducing sample that will be helpful for us to validate the problem. 

Regards, 

Rajapandi R