Grid Hirarchie is not working as expected

[Nirbhay]

Hi everyone,

I am new in angular 2 and trying to implement ej-grid with child grid. Where the data are like Roles details having the primary key RoleId and the sub roles details having the composit key RoleId+SubRoleId. I am using two API, one SearchRoles which gives all the Roles Details and second GetSubRoles which  fetch the Sub roles details data by passing the argument as RoleId.

The given code is populating the Roles Details in the grid but not populating the child grid to display the sub roles details.

<div>
    <ej-grid id="Grid" [dataSource]="rolesList" [childGrid]='childGrid' [allowPaging]="true"  [toolbarSettings]="toolbarItems" [editSettings]="editSettings"
     (recordClick)="recordClick($event)" (endDelete)="deleteRole($event)" (endAdd)="addRole($event)" (endEdit)="editRoleGrid($event)"  >

        <e-columns >
            <e-column field="RoleId" [isPrimaryKey]="true" height="10px" [visible]="false" headerText="Role Id" textAlign="center"></e-column>
            <e-column field="RoleName" headerText="Role Name" height="10px" width="20%" ></e-column>
            <e-column field="Description" headerText="Description" height="10px" width="40%" ></e-column>
            <e-column headerText='Manage Records' height="10px" [commands]='buttons' textAlign="center"></e-column>
        </e-columns>
    </ej-grid>
</div>

export class RoleGridComponent implements OnInit {
    public SubRoles any = [];
    constructor(private roleService: RoleService) {
        this.userId = Number(localStorage.getItem("currentUserId"));
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbarItems = { showToolbar: true, toolbarItems: ["add"] };

        // api service call by passing the roleid 1 as argument to get the sub roles of a role having RoleId 1
        this.roleService.getSubRoles(1).subscribe((data) => {
            if (data.Status == "OK") {
                this.SubRoles = data.Results;
            }
            else if (data.Status == "ERR") {
                this.statusMessage = data.ErrMessage;
            }
        },

            (error) => {
                this.statusMessage = "problem with service please try again after some time";
                console.log(this.statusMessage);
            });

        this.childGrid = {
            dataSource: this.SubRoles,
            queryString: 'RoleId',
            columns: [
                { field: 'SubRoleId', headerText: 'SubRole Id', width: 120 },
                { field: 'SubRoleName', headerText: 'Sub Role', width: 120 }

            ],
            width: '50%'
        };
    }

    ngOnInit() {
        this.roleService.searchRoles(false).subscribe((data) => {
            if (data.Status == "OK") {
                this.rolesList = data.Results;
            }
            else if (data.Status == "ERR") {
                this.statusMessage = data.ErrMessage;
            }
        },

            (error) => {
                this.statusMessage = "problem with service please try again after some time";
                console.log(this.statusMessage);
            });

        this.buttons = [{ type: "edit", buttonOptions: { cssClass: "glyphicon glyphicon-pencil" } },
        { type: "delete", buttonOptions: { cssClass: "glyphicon glyphicon-trash" } },
        { type: "save", buttonOptions: { cssClass: 'glyphicon glyphicon-penci' } },
        { type: "cancel", buttonOptions: { cssClass: 'fa fa-file-text-o' } }
        ];
    }

    recordClick(e) {
 // Fetching the sub roles from api depending on the selected roles in parent grid
        this.roleService.getSubRoles(e.data.RoleId).subscribe((data) => {
            if (data.Status == "OK") {
                this.SubRoles = data.Results;
            }
            else if (data.Status == "ERR") {
                this.statusMessage = data.ErrMessage;
            }
        },

            (error) => {
                this.statusMessage = "problem with service please try again after some time";
                console.log(this.statusMessage);
            });

        let x = this.rolesList;
 this.rolesList = [];
        this.rolesList = x;
    }
}

Can anybody help me to resolve the issue.

Thanks & regards

Nirbhay

Attachment: Screenshot_95d804e5.rar

[Renjith Singh Rajendran]

Hi Nirbhay, 

  

Thanks for contacting Syncfusion support. 

  

We have analyzed your query and code example provided. We could see that you are using data service as child grid dataSource. We suspect that the data for child Grid does not contain values. Since the data for child Grid comes from service call, due to time delay there won’t be data. We suggest you to set the dataSource for the child grid by using the Datamanager. The dataManager will manage the time delay occurred due to the service call. 

  

Please refer the documentation links below, 

https://help.syncfusion.com/js/grid/data-binding#remote-data 

https://help.syncfusion.com/js/datamanager/overview 

  

Regards, 

Renjith Singh Rajendran.