Hi
I am working on igGrid. We have a requirement like below
1. There is one parent table( igGrid ) and three child each one is an igGrid table. Now according to the selection of igGrid parent table i have to show/hide the related child table.
2. When ever child table is shown (frist time) I have to put the child table first row in edit mode.
3. All the child and parent data is populated through one JSON object.
4. When ever we press enter on last row of child we need to select next row in parent table and then show child table accordingly in edit mode
I am able to achieve all the functionality desciribed above in angular 2 component
Please have look at the code snippet where i am facing problem.
Parent Component template:
<div class="col-md-12">
<table id="gridId" class="table-font-size" ></table>
<div *ngFor="let item of sourceData; let i = index">
<div [ngSwitch]="item.Type">
// Child table component 1
<var-table *ngSwitchCase="1" id="childGrid_{{i}}" [(source)]="item.AcquisitionSteps" [(data)]="sourceData" (change)="UpdateParent($event)" (move)="moveToNextTable($event)"></var-table>
// Child table component 2
<att-table *ngSwitchCase="2" id="childGrid_{{i}}" [(source)]="item.AcquisitionSteps" [(data)]="sourceData" (change)="UpdateParent($event)" (move)="moveToNextTable($event)" ></att-table>
// Child table component 3
<vis-table *ngSwitchCase="3" id="childGrid_{{i}}" [(source)]="item.AcquisitionSteps" [(data)]="sourceData" (change)="UpdateParent($event)" (move)="moveToNextTable($event)" ></vis-table>
<div *ngSwitchDefault></div>
</div>
childTableMethod(){
setTimeout(() => {
var widget = $(this.el.nativeElement).igGrid("widget");
this.startEdit(widget, 1);
}, 500);
}
.private startEdit(childGrid, childRowId: number) {
var isEditing = childGrid.igGridUpdating("isEditing");
if (isEditing) {
childGrid.igGridUpdating("endEdit", true, false);
childGrid.igGridUpdating("startEdit", childRowId, "ACQValue", true);
Now whenever i make child table visible childTableMethod is called and it give me an exception ( Editing the specified row or column is currently not possible. It should be in view on the current page and virtualization frame )
Please let me know how can i resolve this error.
Thanks
Ankur Shah
its works.
Hello Ankur,
You can access all the rows with the following query:
$(this.el.nativeElement).find("tbody tr");
This returns an array of all the row DOM elements. To get the data-id, for example, from the third row:
$( $(this.el.nativeElement).find("tbody tr")[2] ).data("id");
Feel free to contact me if you have further questions.
Regards,Ivaylo HubenovEntry-level developer
I will check for the solution you provide the feedback if i t works or not. Just one more question what if we want to set given row in edit for example if we want to edit 3rd row or any other row.
There are two issues in the sample:
1) The id in the template (of every child table) is not supposed to be there. Instead, in the createChildTable method set the Id manually:
private createChildTable() { let that = this; $(this.el.nativeElement).attr("id", this.id); ...}
2) The startEdit function takes as an argument the rowID (not row index). You can get the rowID of the first row with the following line of code:
public showEditMode() { var widget = $(this.el.nativeElement).igGrid("widget"); var rowId = $(this.el.nativeElement).find("tbody tr:first").data("id"); this.startEdit(widget, rowId);}
I have attached the modified sample. Please test it and let me know how it went.
Hi Ivaylo,
Please have a look at the running attached code.
You just need run npm Install after that npm start.
In this example i got the same exception while selecting the rows.
Please have a look at it and let me know the resolution.
Thank