Edit Cell to show Link

Edit Cell to show Link

Posted by: parmarkinjalk on 3 February 2020, 9:58 pm EST

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 3 February 2020, 9:58 pm EST

  Hi Team,

  I have a dataset which has a document name and document id property. What I am doing right now is showing the document name column with this ```
  
  wj-flex-grid-column
  
  [width]=“‘1.5*’”
  
  [header]=“‘Document Name’”
  
  [binding]=“‘documentNm’”>

  
  Now what I want is document name to be a Link so that when I click the link a function is called with the entire item object to be send to this function, so that I can call the download doc API with the document id.
  I tried to use ng-template but when the page first loads my pagination is gone and it just shows the entire list on the first page and when I click next page the actual pagination starts. Also it not showing the doc name on IE when I use ng- template

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 3 February 2020, 10:06 pm EST

  Hi,

  Forget about the pagination issue. I solved it.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 4 February 2020, 1:52 am EST

  Hi Kinjalk,

  We are glad that you were able to resolve the issue. Could you please post the solution here so that others with the same issue can refer to your solution?

  Regards,
  
  Ashwin

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 4 February 2020, 12:04 pm EST

  Hi Ashwin,

  I just resolved the pagination issue by setting the pagesize property before setting the sourcecollection property. I still can’t figure out how to show the document name as a link and when I click that link it calls a function and pass the entire item as a object to it. I am using angular 6. Please read the original post for context.

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 February 2020, 12:32 am EST

  Hi Kinjalk,

  To add links, simply add a link element inside the ng-template and bind its click event to a method. To pass the current item, you may use the let-item directive of the ng-template:

  <wj-flex-grid-column header="Document Name" binding="docName" [width]="200" [isReadOnly]="true">
      	<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
  		<a href="#" (click)="linkClick(item)">{{item.docName}}</a>
  	</ng-template>
  </wj-flex-grid-column>
  

  https://stackblitz.com/edit/angular-rhkrna

  Regarding the IE issue, could you please explain more about the issue?

  ~regards

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 5 February 2020, 3:31 pm EST

  Thanks ashwin,

  The above solution is working for me on chrome. But on IE its giving me the following error. “** Assertion failed in Wijmo: Cannot find the host element.” It shows the same error on chrome but the doc name is displayed on IE the doc name column is blank.

   this.http.get('assets/data.json')
    .subscribe(res => {
      this.grid.collectionView.beginUpdate()
      this.source._pgSz = 10;
      this.source._trackChanges = true;
      this.source.sourceCollection = res['documentMetadata'];
      this.grid.collectionView.endUpdate()  });
     }
  
  
                <wj-flex-grid-column
                  header="Document Name"
                  binding="documentNm" [isReadOnly]="true">
                  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
                    <a href="#" (click)="linkClick(item)">{{item.documentNm}}</a>
                  </ng-template>
                </wj-flex-grid-column>
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 6 February 2020, 5:10 am EST

  Hello again,

  We were not able to replicate the issue at our end. Please refer to the sample below that we used to replicate the issue:

  https://stackblitz.com/edit/angular-zgga7c

  Could you please let us know whether we are missing something in order to replicate the issue?

  Also, I would suggest you use the public properties pageSize and trackChanges instead of private properties like _pgSz and _trackChanges because they are only used internally and may change in the future release thereby breaking your application.

  ~regards

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 10 February 2020, 2:10 am EST

  Hi Ashwin,

  I am using Wijmo Library 5.20162.207 and Angular 8.2.14. Could you please try with this config in IE. Its still not showing links. thanks.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 February 2020, 12:51 am EST

  Hi,

  We are working on this and will update you as soon as possible.

  ~regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 14 February 2020, 1:15 am EST

  Hi Kinjalk,

  Since you are using a really old build, we will need some time to set up our environment. We will update you as soon as we have more information.

  ~regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 February 2020, 11:40 pm EST

  Hi Kinjalk,

  We are sorry but we were unable to create a sample with the provided configuration. Could you please provide us a sample that demonstrates how did you create an angular 8 application with 16v2?

  ~regards