binding rowSelected property from ts file

[Parthkumar Kakadiya]

Hi There,

I have used the schedule and grid into my Angular 8 Application. In the schedule i have used the Search event functionality by ejs-scheduler.

https://ej2.syncfusion.com/angular/demos/#/bootstrap4/schedule/search-events

Here, when we get the result in the Grid view. like this

 

 

Here I would like to listen the click event on the row click. I tried the rowSelected like this.  

private showSearchEvents(type: string, data?: Object): void {
  if (type === 'show') {
    if (document.getElementById('grid').classList.contains('e-grid')) {
      let gridObj: Grid = (document.querySelector('#grid') as EJ2Instance).ej2_instances[0] as Grid;
      gridObj.dataSource = data;
      gridObj.dataBind();
    } else {
      let gridObj: Grid = new Grid({
        dataSource: data,
        height: 505,
        width: 'auto',
        columns: [
          { field: 'produktname', headerText: 'produktname', width: 120 },
          { field: 'ort', headerText: 'ort', width: 120 },
          { field: 'datum_von', headerText: 'datum_von', width: 120, format: { type: 'dateTime', format: 'dd.MM.yyyy HH:mm ' } },
        ],
        rowSelected: rowSelected
      });
      gridObj.appendTo(document.querySelector('#grid') as HTMLElement);
      this.scheduleObj.element.style.display = 'none';
      function rowSelected(args){
        console.log('selected row: ', args)
      }
    }
  } else {
    let gridObj: Object[] = (document.querySelector('#grid') as EJ2Instance).ej2_instances;
    if (gridObj && gridObj.length > 0 && !(gridObj[0] as Grid).isDestroyed) {
      (gridObj[0] as Grid).destroy();
    }
    this.scheduleObj.element.style.display = 'block';
  }
}

html file div:

<div id="grid"></div>

here inside the rowSelected Function, I would like to call another function on my ts file. It send me "is not a function" error. 

On click of row i would like to open bootstrap modal with all information about the specific clicked row. 

Can anybody please help me with my problem or requirement. 

Regards, 

Parth

[Hareesh Balasubramanian]

Hi Parthkumar, 

Greetings from Syncfusion Support. 

We have validated your reported query “here inside the rowSelected Function, I would like to call another function on my ts file” at our end. And for that, we have prepared a sample using rowSelected event. And the sample can be viewed from the following link. 

Code snippet: 

let gridObj: Grid = new Grid({ 

  dataSource: data, 

  height: 505, 

  width: 'auto', 

  columns: [ 

                { field: 'Subject', headerText: 'Subject', width: 120 }, 

                { field: 'Location', headerText: 'Location', width: 120 }, 

                { field: 'StartTime', headerText: 'StartTime', width: 120, format: { type: 'dateTime', format: 'M/d/y hh:mm a' } }, 

                { field: 'EndTime', headerText: 'EndTime', width: 120, format: { type: 'dateTime', format: 'M/d/y hh:mm a' } }, 

  ], 

   rowSelected: this.rowSelected.bind(this) 

}); 

gridObj.appendTo(document.querySelector('#grid') as HTMLElement); 

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

Kindly try the above sample and revert us if you have any further assistance. 

Regards, 

Hareesh 

[Parthkumar Kakadiya]

Hi Hareesh,

I hope you doing well.

Thanks a lot for your quick response.

You solution fit perfectly for my requirement.

Regards,

Parth 

[Vengatesh Maniraj]

Hi Parth, 

 

You are most welcome. 

 

We are happy that our solution has fulfilled your requirement. 

 

Regards, 

Vengatesh