route to the particular doctor from grid ui

[Prabhat kumar]

Dear Team,

In SyncFusion’s element grid I want to present a table.

The table cointains names of employes and the code looks as follows:

the below code giving link on doctor name ..i want to route to the particular doctor on same page on sub-page should appear that page should holding  doctor details how to do that..Please see the below image of forgot password subpage.

<e-column field='name' headerText='Name' textAlign='Right' width='120'>

                                    <ng-template #template let-doctors> 

                                        <div> 

                                            <a rel='nofollow' rel='nofollow' href="#">{{doctors.name}}</a>     

                                        </div> 

                                        </ng-template>

</e-column>

[Prabhat kumar]

how to access userid of doctors userid ..name is getting print but not able access

<e-column field='name' headerText='Name' textAlign='left' width='100'>

                                    

                                    <ng-template #template let-doctors> 

                                        <button type="button" $index={{doctors.userId}} class="btn btn-link btn-sm"                        

                                         (click)="ViewProfile(index)">

                                             {{doctors.name}}</button>

                                        </ng-template> 

                                        

                                </e-column>

[Manivel Sellamuthu]

Hi Prabhat, 

Greetings from Syncfusion support. 

We have validated your requirement. From your requirement, we can understand that you want to redirect to another element on the same page based on the row data value. We have prepared a simple sample based on your requirement. Please refer the below code example and sample for more information. 

<div class="control-section" style="height: 1000px"> 

    <ejs-grid [dataSource]='data'> 

        <e-columns> 

            <e-column field='CustomerName' headerText='Customer Name' width='150'> 

               <ng-template #template let-data>  

                <div>                             // to remove the whitespaces and access the particular element 

                   <a rel='nofollow' rel='nofollow' rel='nofollow' href='#{{data.CustomerName.split(" ").join("")}}'>{{data.CustomerName}}</a>      

                  </div> 

                  </ng-template> 

            </e-column> 

. . . 

        </e-columns> 

    </ejs-grid> 

</div> 

 

<div id="AntonioMoreno"> 

  Doctors details here 

</div> 

Sample: https://stackblitz.com/edit/angular-156471-template?file=app.component.html 

Screenshot:  

 

If we misunderstood your query or this is not your exact requirement, please get back to us for further assistance. 

Regards, 

Manivel 

[Prabhat kumar]

Hi Manivel ,

In grid i have many doctors if we will select(enable checkbox) multiple doctor from list how to get their id all selected doctors ids. so that i can send it to backend

example.....   [~]Peter

                      [ ]John

                      [~]Smith

here smith and peter is selected and now i want to see his id ..in backed id is there from grid i want to see id.

[Manivel Sellamuthu]

Hi Prabhat, 

Thanks for your update. 

From your query we can understand that you want to send selected records ID to the backend. You can achieve your requirement by using getSelectedRecords method of the Grid. Please refer the below code example and sample for more information. 

[App.component.html] 

<div class="control-section"> 

  <button (click)="btnClick()">Get Selected records</button> 

    <ejs-grid #Grid [dataSource]='data'> 

        <e-columns> 

            <e-column type='checkbox' width='50'></e-column> 

            <e-column field='ID' headerText='ID' width='120' textAlign='Right'></e-column> 

            <e-column field='Doctor' headerText='Doctor Name' width='150'> 

            </e-column> 

        </e-columns> 

    </ejs-grid> 

</div> 

[App.component.ts] 

export class AppComponent implements OnInit { 

    public data: Object[] = []; 

    @ViewChild('Grid') 

    public Grid: GridComponent; 

 

    ngOnInit(): void { 

        this.data =  

   [{   ID: 10248, Doctor: 'Peter'  }, 

    {   ID: 10249, Doctor: 'John'  }, 

    {   ID: 10250, Doctor: 'Smith'  }]; 

    } 

 

    btnClick () { 

      var ids = []; 

//  here we can get the selected records of the Grid 

  console.log(this.Grid.getSelectedRecords()); 

  this.Grid.getSelectedRecords().forEach((e)=>{ 

    ids.push(e["ID"]); 

  }); 

  alert (ids); 

  // here you can pass the selected record's IDs to backend 

    } 

} 

Sample: https://stackblitz.com/edit/angular-156471?file=app.component.ts 

Please let us know, if you need further assistance. 

Regards, 

Manivel