Hello Ankur Shah,

Thank you for posting in our forums!

To answer your first question, you can change the child grid's options during the childGridRendered event.  You can get the record for the parent with the event arguments and the findRecordByKey method.

I have attached a sample at the bottom of this post that demonstrates how to achieve this and the relevant code snippet below:

childGridRenderedHandler(event: any) {
    const ui = event.ui;
    //  Get the parent row's data.
    const parentRecord = $(ui.owner.element).igGrid("findRecordByKey", ui.parentrow.data("id"));
    //  Set the child grid's header.
    $(ui.childgrid.element).igGrid("option", "caption", parentRecord.FirstName + " " + parentRecord.LastName);
}

To run the sample you will need npm installed.  First, extract the files to a folder and open a CLI in the folder.  Then type "npm install" and then "npm start".

For your second question, the Angular2 website has some information on binding to events in their documentation here.

If you would like to see some specific IgniteUI documentation or an example of using events, please feel free to submit an issue for it on github.

If you have any further questions or concerns with this, please let me know and I will be glad to help.

You can handle the grid's childGridCreating event to set the options on the child grid before it gets created.  See Martin's answer in this forum thread for more information.

You can hide or show columns during design time by setting the hidden option to true on the column definitions.  To hide or show the columns during runtime, you can call the hideColumn and showColumn methods.

For information on the available selection events, please see our API documentation here.

If you have any further questions or concerns with this, please let me know.