Navaneetha Krishnan S
I have built a grid using kendogrid wrapped-up with angular2. the grid is getting populated with records by consuming the webapi service. I need to raise a rowclick event on the grid and on the click event, I need to fetch the record/async call to get the details for the row/record selected and display below on details section the same page. The details sections consists of around 10-12 textbox and I should be able to bind the values fetched from the services call.
In My UI, I have a grid in the top section - the grid is loaded with some record by consuming the services. When the user click on a any single row, the below details section controls to be loaded with the details values fetched by the asynch call.
any ideas on how to accomplish this?
I tried the below way to raise the event, but it is not working.
import { Component, ViewChild } from '@angular/core';
import { Grid } from './grid';
declare var kendo: any;
declare var $: any;
@Component({
selector: 'kendo-grid',
template: `<div>
<k-grid [options]="options" (click)="onClick($event)"></k-grid>
</div>`,
providers: [Configuration, Constants],
directives: [Grid]
})
export class ExtractorGrid {
options: any;
rowObject: any;
extractorDetails: any;
public component: any;
queueID: number;
constructor(private configSetttings: Configuration, private constants: Constants, private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {
this.setUpGridOptions();
}
onClick(event) {
event.preventDefault();
console.log("click event called");
}
}