Using ej-grid with my columndefinition

[cihan kandis]

Hello,

I am trying to create a grid component (my-grid) which will use ej-grid in its template.

The template of my-grid is like this.

<ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="itemsSource">

<e-columns>

<ng-content></ng-content>

</e-columns>

</ej-grid>

the usage of my-grid component is like the following

<my-grid id="grid" [itemsSource]="gridData" [selectionMode]="'Row'" #grid>

<my-grid-column [header]="'Bakiye'" [binding]="'Freight'" [width]="'*'" ></my-grid-column>

<my-grid-column [header]="'Grup'" [binding]="'CustomerID'" [width]="'*'" ></my-grid-column>

<my-grid-column [header]="'Telefon'" [binding]="'OrderID'" [width]="'*'" ></my-grid-column>

<my-grid-column [header]="'E-posta Adresi'" [binding]="'EmployeeID'" [width]="'*'" ></my-grid-column>

<my-grid-column [header]="'Vade'" [binding]="'OrderDate'" [width]="'*'" ></my-grid-column>

</my-grid>

the problem is that ej-grid automatically generates the columns. However, I want ej-grid to use my column definitions. 

Is this possible?

The reason is that we have many my-grid component in our project using another library. Now we want to use syncfushion in our project but do not want to change all the code to use ej-grid. we want to keep the code as is but use ej-grid.

Can you please provide an example if it is possible.

thanks.

[Thavasianand Sankaranarayanan]

Hi Cihan, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to define the Grid columns in the template file. So, we suggest you to use the below code examples in your sample.   

<ej-grid id="Grid" [dataSource]="data" [allowPaging]="true" >  

    <e-columns>      

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

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

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

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

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

    </e-columns> 

</ej-grid> 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/134710/ze/angular2-seeds-master_(2)1887740455.zip 

Refer the help documentation. 

Link: https://help.syncfusion.com/angular/grid/getting-started 

Link: https://help.syncfusion.com/angular/grid/columns 

Link: https://help.syncfusion.com/api/angular/ejgrid#members:columns 

Regards, 

Thavasianand S. 

[cihan kandis]

Hello,

Thank you for your reply. Your solution is a sample of the usage of ej-grid. That does not answer my question. 

I have my own grid component which is "my-grid" component. this component has a template like this:

<--my-grid.component.html-->

<ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="itemsSource">

<e-columns>

<ng-content></ng-content>

</e-columns>

</ej-grid>

As you see, "my-grid" component uses the ej-grid component in its template.

Also, in my app.component.html

<--app.component.html-->

<my-grid id="grid" [itemsSource]="gridData" [selectionMode]="'Row'" #grid>

<my-grid-column [header]="'Bakiye'" [binding]="'Freight'" [width]="'*'" ></my-grid-column>

<my-grid-column [header]="'Grup'" [binding]="'CustomerID'" [width]="'*'" ></my-grid-column>

<my-grid-column [header]="'Telefon'" [binding]="'OrderID'" [width]="'*'" ></my-grid-column>

<my-grid-column [header]="'E-posta Adresi'" [binding]="'EmployeeID'" [width]="'*'" ></my-grid-column>

<my-grid-column [header]="'Vade'" [binding]="'OrderDate'" [width]="'*'" ></my-grid-column>

</my-grid>

To sum up, my "app.component.html" calls "my-grid" as you see above and "my-grid" component calls "ej-grid" from "my-grid.component.html".

However, ej-grid automatically generates the columns from the datasource. I want it to use my column-definition "my-grid-column". how to do that?

[Thavasianand Sankaranarayanan]

Hi Cihan, 

According to your query, we suspect that you want to use a common template for all columns in Grid. So, we suggest you to use the rowTemplate feature of ejGrid control. 

Refer the below code example. 

<ej-grid id="Grid" [dataSource]="data" [allowPaging]="true" rowTemplate="#rowTemplate" >  

    <e-columns>    

        <e-column  headerText="OrderID"  width="75"></e-column> 

        <e-column  headerText="CustomerID" width="80"></e-column> 

        <e-column  headerText="EmployeeID"  width="80"></e-column> 

        <e-column headerText="Freight" width="90" ></e-column> 

        <e-column  headerText="ShipCountry" width="90"></e-column> 

     </e-columns> 

 

     <ng-template #rowTemplate e-row-template let-data> 

        <tr class="e-row"> 

            <td class="e-rowcell">ord:{{data.OrderID}}</td> 

            <td class="e-rowcell">{{data.CustomerID}}</td> 

            <td class="e-rowcell">{{data.EmployeeID}}</td> 

            <td class="e-rowcell">{{data.Freight}}</td> 

            <td class="e-rowcell">{{data.ShipCountry}}</td> 

        </tr> 

    </ng-template>  

 

</ej-grid> 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/134710/ze/angular2-seeds-master_(4)710365598.zip 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/angular/ejgrid#members:rowtemplate 

Regards, 

Thavasianand S.