Issue related to error tooltip on edit inline mode

[Ton That Hung]

Hi Syncfusion Team,
I'm using the Grid component to create a data list. I'm using the Edit inline feature of the grid component.
But the error tooltip is working weirdly(image).

Note: I'm also using Freeze feature.

Link sample: https://stackblitz.com/edit/react-rrytp4-cjfqag?file=index.js
Reprocedure step: 
 1. Click the add button
 2. Fill Customer Id field
 3. Enter
How can I fix this issue?
Thank you.

[Rajapandiyan Settu]

Hi Ton,

Thanks for contacting Syncfusion support.

We have confirmed that the reported behavior is an issue from our side and logged this as - “Validation error is not showing properly in movable columns with empty records”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on Oct 12^th, 2022.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,

Feedback: https://www.syncfusion.com/feedback/37955/validation-error-is-not-showing-properly-in-movable-columns-with-empty-records

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards, 

Rajapandiyan S 

[Ton That Hung]

Oh, thanks so much.

[Rajapandiyan Settu]

Hi Ton,

Thanks for your update. We will let you know once the issue is fixed.

We appreciate your patience until then.

Regards, 

Rajapandiyan S 

[Rajapandiyan Settu]

Hi Ton,

Sorry for the inconvenience caused.

We are unable to complete the issue (“Validation error is not showing properly in movable columns with empty records”) as planned due to its complexity and currently, we are working on this with high priority. However, we will include the fix on or before Oct 26^th, 2022 patch release.

FB Link: https://www.syncfusion.com/feedback/37955/validation-error-is-not-showing-properly-in-movable-columns-with-empty-records

We greatly appreciate your patience until then.

Regards,

Rajapandiyan S

[Rajapandiyan Settu]

Hi Ton,

You can resolve the reported problem temporally by using the following code in the validation-custom-placement event. Since it is an internal event, we have ON it in the created event of Grid.

Created: https://ej2.syncfusion.com/react/documentation/api/grid/#created

[index.js]

export class ColumnTemplate extends SampleBase {

  grid;

  created(args) {

    // ON the internal event

    this.grid.on('validation-custom-placement', this.validationCusPlace.bind(this));

  }

  validationCusPlace(args) {

    // customize the position of e-editcell element

    var movableEditCell = this.grid.element.querySelector('.e-movablecontent .e-editcell');

    if (movableEditCell) {

      if (this.grid.currentViewData.length === 0) {

        movableEditCell.style.position = 'absolute';

      } else {

        movableEditCell.style.position = 'relative';

      }

    }

  }

  render() {

    return (

      <GridComponent

        dataSource={[]}

        editSettings={this.editOptions}

        toolbar={this.toolbarOptions}

        selectionSettings={this.settings}

        allowPaging={true}

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

        frozenColumns={2}

        height={300}

        created={this.created.bind(this)}

      >

      </GridComponent>

    );

  }

}

 

Sample: https://stackblitz.com/edit/react-rrytp4-jy7yjs?file=index.html,index.js

We will let you know once the issue is fixed and appreciate your patience until then

Regards,

Rajapandiyan S

[Rajapandiyan Settu]

Hi Ton,

Thanks for your patience.

We are glad to announce that our Essential Javascript2 patch release (v20.3.50) has been rolled out successfully and in that release, we have added the fix of “Validation error is not showing properly in movable columns with empty records” issue. So, please update your Syncfusion packages to the current version and use latest style script to get this.

Release Notes: https://ej2.syncfusion.com/react/documentation/release-notes/20.3.50/?type=all#grid

Find the below sample for your reference.

Sample: https://stackblitz.com/edit/react-rrytp4-rkgngj?file=index.js

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require further assistance.

Regards,

Rajapandiyan S

[Ton That Hung]

Seem like it still has issues in this release. If you use editSettings = {newRowPosition:"Bottom"}. The error tooltip is still working weirdly(image).

Sample: https://stackblitz.com/edit/react-rrytp4-nnrede?file=index.js
Steps:
- Input data and save the first record

- Click add button to add the second record

- Enter or Click the save button

[Rajapandiyan Settu]

Hi Ton,

Thanks for your update.

We have confirmed that the reported behavior is an issue from our side and logged this as - “Validation message is not showing properly in movable columns if newRowPosition as Bottom”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on Nov 9^th, 2022.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,

Feedback: https://www.syncfusion.com/feedback/38606/validation-message-is-not-showing-properly-in-movable-columns-if-newrowposition-as

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards, 

Rajapandiyan S 

[Ton That Hung]

There is 1 more error here.

When I set the height of GridComponent = 100%, 

<GridComponent

dataSource={DATA}

editSettings={this.editOptions}

toolbar={this.toolbarOptions}

allowPaging={true}

dataBound={this.dataBound}

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

minHeight={200}

height="100%"

>

The error tooltip is weird.

I don't know if this issue whether related to the problem above.

Link sample: https://stackblitz.com/edit/react-rrytp4-nnrede?file=index.js,index.css

[Rajapandiyan Settu]

Hi Ton,

Query: When I set the height of GridComponent = 100%, The error tooltip is weird.

We have confirmed that the reported behavior is an issue from our side. We consider this case while fixing this issue - “Validation message is not showing properly in movable columns if newRowPosition as Bottom”. Both issues will be fixed in any of our upcoming releases.

We will get back to you once the fix is rolled out. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,

Feedback: https://www.syncfusion.com/feedback/38606/validation-message-is-not-showing-properly-in-movable-columns-if-newrowposition-as

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards, 

Rajapandiyan S 

[Rajapandiyan Settu]

Ton,

We are glad to announce that our Essential Javascript2 patch release (v20.4.43) has been rolled out successfully and in that release, we have added the fix of “Validation message is not showing properly in movable columns if newRowPosition as Bottom” issue. So, please update your Syncfusion packages to the current version and use latest style script to get this.

Release Notes: https://ej2.syncfusion.com/react/documentation/release-notes/20.4.43/?type=all#grid

Find the below samples for your reference.

Sample1 (validation with frozen grid): https://stackblitz.com/edit/react-rrytp4-kalhjf?file=package.json,index.html
sample 2 (validation with 100% height grid): https://stackblitz.com/edit/react-rrytp4-q3kyun?file=package.json

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require further assistance.

Regards,

Rajapandiyan S