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
Hello Ankur,
Please make sure of two things:
1) The grid is not hidden, when the startEdit method is called.
2) The childGrid variable actually refers to the visible table and not one of the hidden ones.
Please let me know how it went.
Regards,Ivaylo HubenovEntry-level developer
HI Ivaylo
When ever i select the parent table i will hide all the child table and show only the relevant child table. Thats why I put some TimeOut of 500 mili second before calling start edit. still i got this error.
As per your second option.
All the three child table are different component for eg (<vis-table></vis-table>, <var-table></var-table>, <att-table></att-table> )
You can see the template for parent which is shown above .
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
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.
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.
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.
its works.