Grid table

[Kalyan Kumar]

Hi

Using angular grid to represent data in a table. In one of the column data i have to represent it like a chips style, so i was imple

mented with a e-column. Now i have to apply filter for that column. Below is the code

<ejs-grid #grid [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]="pageOptions">

        <e-columns>

            <e-column field='CategoryName' headerText='Category Name' width='150'></e-column>

            <e-column field='ProductName' headerText='Product Name' width='150'></e-column>

            <e-column field='UnitsInStock' headerText='Units In Stock' width='150' textAlign='Right'></e-column>

            <e-column field='Discontinued' headerText='Chocolate' width='150' textAlign='Center' displayAsCheckBox='true' type='chips'>

              <ng-template #template let-data>

                <div *ngFor="let item of data['Discontinued']" >

                <div style="background: green; color: white;">{{ item }}</div><br>

                </div>

              </ng-template>

            </e-column>

        </e-columns>

    </ejs-grid>

[Thiyagu Subramani]

Hi Kalyan, 

Thanks for contacting Syncfusion forum. 

Based on your update you have mentioned that you need one of the column data in a chips style. So, we suspect that you used template column in grid and you need to filter that column. 

In column definition you have used displayAsCheckBox as true but it will return checkbox for required column in UI level and you have used column type as chips in Discontinued field column. But this type does not occur in grid default types. 

Default column types in grid : https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-type 

So we unclear about your requirement, So please share below details which helps us to provide appropriate solution as soon as possible. 

1.  Are you want render chips in column template or check box? 

2.  Based on which value you want to filter that column. 

3.  UI representation of that template column. 

4. Explain your requirement briefly 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Kalyan Kumar]

S.no	City	State	Chocolates                          :
1	Hyderabad	Andhra	Asha    diarymilk   kitkat
2	Bangalore	Karnataka	diarymilk   kitkat
3	Mumbai	Maharastra	Asha    diarymilk

Check the above table last column once. I was iterating the chocolate types in the e-column template to display. I need a filter dropdown with all the chocolate types with checkbox. When user selects diarymilk in the dropdown filter, the grid should display the diarymilk related rows only. if user selects diarymilk and kitkat, it should display diarymilk and kitkat related rows.

[Thiyagu Subramani]

Hi Kalyan,  

Thanks for your update. 

Based on your shared information we suspect that you want to filter column which is array of strings. By default, the EJ2 Grid column only supports number, string, date, dateTime, Boolean, checkbox type values, and which is not supports array type value. Refer to the below documentation.  

UG: https://ej2.syncfusion.com/documentation/api/grid/columnType/   

We can show array values in the Grid column using the valueAccessor API. If you are using columTemplate feature , we can iterating the array value from dataSource, then bind the value into the columnTemplate .   

But, this is used only for the display purpose we cannot perform Grid actions like Filtering, Searching, Grouping, Sorting, etc., to this column(when you are display the custom text through valueAccessor ).   

Because, the Grid can perform the actions (like sorting, grouping ,filtering) based on its dataSource value. This is the behavior of EJ2 Grid.  

valueAccessor: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#valueaccessor   

columnTemplate: https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-template  

Note : The Grid actions like Filtering, Sorting, Searching, Grouping, aggregates, etc., are based on the column field and its dataSource value. We can display our own customized value in the column using its template or valueAccessor  feature . But, the Grid actions are based on the dataSource value not with the customized value. This is the behavior of EJ2 Grid.   

Please get back to us if you need further assistance with this.  

Regards,   

Thiyagu S