ejs-grid Not able to render properly if Drag-Drop is enabled/disabled dynamically

[Visha Shah]

I am enabling/disabling grid allowRowDragAndDrop based on a button click. The feature works fine but it does not render grid properly.

When I load grid with allowRowDragandDrop to true for the first time, This is how it looks

After Disabling Drag and drop dynamically, this is how it looks

Here is the sample

https://stackblitz.com/edit/angular-rowdd-hvke5x?file=app.component.html

Is there anything you can help out?

[Thiyagu Subramani]

Hi Visha 

Thanks for contacting Syncfusion forum. 

We have already resolved your reported problem " allowRowDragAndDrop is not working properly while dynamically enable and disable the API “in our 17.4.55 version. So we suggest updating your Syncfusion package to the latest version(18.2.58). Please check the below Release Notes and update the sample link. 

 

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

 

Sample link: https://stackblitz.com/edit/angular-rowdd-zlfyme?file=package.json 

 

Please get back to us, if you need any further assistance. 

 

Regards, 

Thiyagu S 

[Visha Shah]

When I tried to upgrade to the latest version, it did not bind any data. No error on console.

I am using @angular/core": "^7.2.0

Here is my package.json

   "@angular-devkit/build-webpack": "^0.901.8",

    "@angular/animations": "~7.2.0",

    "@angular/common": "^7.2.0",

    "@angular/compiler": "^7.2.0",

    "@angular/core": "^7.2.0",

    "@angular/forms": "^7.2.0",

    "@angular/http": "^7.2.8",

    "@angular/platform-browser": "~7.2.0",

    "@angular/platform-browser-dynamic": "~7.2.0",

    "@angular/router": "~7.2.0",

    "@asymmetrik/ngx-leaflet": "^5.0.1",

    "@asymmetrik/ngx-leaflet-markercluster": "^2.0.0",

    "@ngxs/storage-plugin": "^3.4.3",

    "@ngxs/store": "^3.4.3",

    "@okta/okta-auth-js": "^2.9.0",

    "@syncfusion/ej2-angular-buttons": "^18.2.58",

    "@syncfusion/ej2-angular-calendars": "16.4.55",

    "@syncfusion/ej2-angular-charts": "17.3.26",

    "@syncfusion/ej2-angular-dropdowns": "17.3.26",

    "@syncfusion/ej2-angular-grids": "^18.2.58",

    "@syncfusion/ej2-angular-inputs": "^18.2.58",

    "@syncfusion/ej2-angular-lists": "^18.2.58",

    "@syncfusion/ej2-angular-navigations": "^18.2.58",

    "@syncfusion/ej2-angular-notifications": "^18.2.54",

    "@syncfusion/ej2-angular-popups": "^18.2.58",

    "@syncfusion/ej2-angular-richtexteditor": "^18.2.56",

    "@syncfusion/ej2-angular-spreadsheet": "17.4.55",

    "@syncfusion/ej2-angular-treegrid": "17.3.26",

    "@syncfusion/ej2-layouts": "^18.2.58",

    "@syncfusion/ej2-ng-navigations": "16.2.50",

    "@syncfusion/ej2-popups": "^18.2.58",

[Thiyagu Subramani]

Hi Visha, 

Thanks for your update. 

We checked in our sample with latest version but we did not face the mentioned issue at our end.  So, please refer to the below sample for reference. 

Sample link: https://stackblitz.com/edit/angular-rowdd-gtxw8r?file=package.json 

Note : In your shared package.json you are used @syncfusion/ej2-ng-navigations but currently we are updated package name ng-navigations as angular-navigations. Please upgrade this. 

If still facing the issue, please share below details then only we provide appropriate solution as soon as possible. 

1.  Share issue reproducing sample or reproduce the issue in above sample. 

2. Video/image representation of your requirement. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

[Visha Shah]

Ok. I was able to reproduce the issue and found the problem as well.

The problem is in valueAccessor with new package. In previous package you handled null values in valueAccessor. If I do not pass any valueaccessor, the data was displaying just fine. 

In New package, if the valueAccessor is null or not being passed in column, then you do not display any data. Strangly, it does not throw any error on console. Not sure if its written in your documents somewhere too. 

Try to Uncomment "this.ValueAccessor.bind(this)" in the example and grid will work just fine.  

https://stackblitz.com/edit/angular-rowdd-kar1q4?file=app.component.html

Is it possible to handle the null value in ValueAccessor? 

[Thiyagu Subramani]

Hi Visha, 

Thanks for your update. 

We checked the attached sample and found that you used undefined column definitions in e-column initialization which is the root cause of an issue. So, we suggest you to use only defined column definitions in e-column to overcome the reported issue. Please refer below code snippets. 

public columns: GridColumn[] = [ 

       { field: 'DirectoryName', useAsLink: true, headerText: 'Directory Name', width: 120 },  

        { field: 'CreatedOn', type: 'date', headerText: 'Created On', width: 70, valueAccessor: null  

    ]; 

Use only defined column definitions in e-column like below image. 

<e-columns> 

      <ng-template #template ngFor let-column [ngForOf]="columns" let-i="index"> 

        <e-column *ngIf="column.useAsLink" [headerText]="column.headerText" [field]="column.field" 

          [width]="column.width">  // Use only defined columns definitions 

        </e-column> 

. . . . . . 

        <e-column *ngIf=" 

            column.type === 'date'  

          " [headerText]="column.headerText" [field]="column.field" [width]="column.width" 

          [valueAccessor]="column.valueAccessor" > 

          . . . . . . 

        </e-column> 

      </ng-template> 

    </e-columns> 

We have modified sample as per your requirement and in this sample we also handled null value in valueAccessor  

Sample link: https://stackblitz.com/edit/angular-rowdd-ckccvj?file=app.component.html 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

[Visha Shah]

Ok. Still we are missing something. 

If you are saying it has to have all fields defined, then why it starts working as soon as I bind valueAccessor to some event even if I do not have all fields defined?

Another question, package 17.3.26 did not had any requirements on defining fields. It used to work just fine. I was hoping, upgrading the package will work the same way.

Not trying to arguye but just trying to understand before I make change to the whole project. We use grids in almost each page. 

[Visha Shah]

ok. Finally I was able to plot the data on our grids. 

I would still say the problem is with ValueAccessor. ValueAccessor is the mandatory defined. When you have all the fields defined then nulling out valuaccessor works. Otherwise it does not. 

[Thiyagu Subramani]

Hi Visha, 

Sorry for the inconvenienced.  

Based on your suggestion we are currently validating your reported scenario at our and we will update further details on 29^th September 2020. Until that time we appreciate your patience. 

Regards, 

Thiyagu S 

[Visha Shah]

Still waiting on your update.

[Thiyagu Subramani]

Hi Visha, 

Extremely we regret that inconvenienced. 

We have validated and confirmed that your recorded issue replicated in our side from version 18.2.44. But currently we are facing more complexity to find root cause of this issue and it as forwarded to the corresponding team and we will update more information on 6th October 2020. We would appreciate your patience until that moment. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Thiyagu Subramani]

Hi Visha, 

Sorry for the delay. 

We have validated your requirement and confirmed your reported behavior is an issue from our side and logged a bug for same. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and will include the defect fix in our weekly patch release which is expected to be rolled out by the mid of October, 2020.  

 

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

Feedback Link : https://www.syncfusion.com/feedback/18019/ 

Please get back to us if you need further assistance.  

Regards,  

Thiyagu S.  

[Visha Shah]

Thank you

[Thiyagu Subramani]

Hi Visha, 

Thanks for your update. 

We will update you once your reported issue has been fixed. 

Regards, 

Thiyagu S