Grid collapse

[Fabricio]

I need to create a functionality where data is displayed in a grid and that each record to display more information in a control.
example:





thanks,

[Sathyanarayanamoorthy Eswararao]

Hi Fabricio, 

Thanks for contacting Syncfusion support. 

Query: I need to create a functionality where data is displayed in a grid and that each record to display more information in a control. 

 

In this query we suspect that you want to display more details for each row in a grid. Hence we suggest you to use the details template for row in grid. We have achieved your requirement in the following example. 

 

Refer the below code example. 

 

 

 

[Gridcomponent.html] 

 

<ej-grid #grid [allowPaging]="true" [allowSorting]="true" detailsTemplate="#tabGridContents" [dataSource]="gridData"  [allowGrouping]='true'  [pageSettings]='page' (detailsDataBound)="detailsDataBound($event)" > 

    <e-columns> 

        <e-column field="EmployeeID" headerText="Employee ID" [priority]=1 width="75" textAlign="right"></e-column>         

        <e-column field="CustomerID" headerText="CustomerID" [priority]=2 width="80"></e-column> 

        <e-column field="OrderID" headerText="OrderID" [priority]=3 width="80"></e-column>        

    </e-columns> 

     <ng-template #tabGridContents e-details-template let-data>  

     

         <ej-grid [allowPaging]="true" [editSettings]="editsettings" [pageSettings.pageSize]="pagesize" [dataSource]="data.DetailsData"> 

            <e-columns> 

 

                <e-column field="DetailID" [isPrimaryKey]="true" headerText="DetailID " width="90" textAlign="right"></e-column> 

                <e-column field="Name" headerText="Name" width="90"></e-column> 

            </e-columns> 

        </ej-grid>   

             

     </ng-template>  

 

</ej-grid> 

 

 

[Gridcomponent.ts] 

 

 

export class GridComponent { 

    public gridData: any; 

    public pagesize: number; 

    editsettings: any; 

    template: any; 

    constructor() { 

        this.gridData = [{ 

            OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5,DetailsData:[{DetailID:1,Name:"String1"}], 

            OrderDate: new Date(8364186e5), Freight: 32.38 

        }, 

        { 

            OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6,DetailsData:[{DetailID:2,Name:"String2"}], 

            OrderDate: new Date(836505e6), Freight: 11.61 

        }, 

        { 

            OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4,DetailsData:[{DetailID:3,Name:"String3"}], 

            OrderDate: new Date(8367642e5), Freight: 65.83 

        }, 

        { 

            OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3,DetailsData:[{DetailID:4,Name:"String4"}], 

            OrderDate: new Date(8367642e5), Freight: 41.34 

        }, 

        { 

            OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4,DetailsData:[{DetailID:5,Name:"String5"}], 

            OrderDate: new Date(8368506e5), Freight: 51.3 

        }];  

         

    } 

    detailsDataBound(e:any){ 

} 

    } 

 

 

 

 

 

 

 

We have prepared a sample for your reference which can be downloaded from below location: 

 

Sample: http://www.syncfusion.com/downloads/support/forum/134879/7z/angular2-seeds-1446700795.7z 

 

Regards, 

Sathyanarayanamoorthy

[Fabricio]

hi,

you can load the information in the detail on demand, call to rest services when expanded for example.

[Vignesh Natarajan]

Hi Fabricio, 

Thanks for the update 

Query: “you can load the information in the detail on demand, call to rest services when expanded for example” 

We suspect that you want to load the detail Grid with remote data (i.e. with rest services). 

We have achieved your requirement by binding the detailGrid with ODataService using ODataAdaptor. 

Refer the below code snippet 

[HTML] 

  <ng-template #tabGridContents e-details-template let-data>  

     

         <ej-grid [allowPaging]="true" [editSettings]="editsettings" [pageSettings]="pageSettings" [dataSource]="gridData1"> 

            <e-columns> 

 

                <e-column field="OrderID" [isPrimaryKey]="true" headerText="OrderID " width="90" textAlign="right"></e-column> 

                <e-column field="CustomerID" headerText="Name" width="90"></e-column> 

                                                          <e-column field="EmployeeID" headerText="ID" width="90"></e-column> 

            </e-columns> 

        </ej-grid>   

             

     </ng-template>  

[TS] 

export class GridComponent { 

    public gridData: any; 

              public pageSettings; 

              public gridData1 = ej.DataManager({ 

    url: "http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders", 

    adaptor: new ej.ODataAdaptor(),  

}); 

    public pagesize: number; 

    editsettings: any; 

For example I have used ODataAdaptor. Similary you can use other adaptor like UrlAdaptor,RemoveSaveAdaptor with MVC controller as a backend. 

Kindly download the sample from below link 

Sample: http://www.syncfusion.com/downloads/support/forum/134879/ze/angular2-seeds1141915188  

If we misunderstood your query please get back to us with more details 

Regards, 

Vignesh Natarajan