Card View for the igGrid

[merjoha]

When we were using WinForms, there was an option on the DataGrid called CardView, which essentially turned the Grid 90 degrees and the caption headers were on the left hand side of the grid and the data was displayed as Columns of data instead of Rows of Data. This feature is not currently present on the ignite ui platform. We would still like to be able to organize our data in this manner within the bounds of the ignite ui platform.

[kdinev]

@merjoha We actually called this feature "responsive vertical rendering" for the ig-grid. Take a look at this sample and see if this is what you are looking for!

[merjoha]

Thank you for your response! That is what I am trying to do.

Is there a way within the bounds of the vertical rendering where I would be able to have the records appear side by side? Horizontal scrolling?

Can you accomplish the side by side look and feel by limiting the width of each record in contrast to the total grid width using the template approach?

[kdinev]

@merjoha I see. You are looking for each record to appear as a column. We currently don't have support for this in the igGrid, at least not out of the box. However, what you can do is to implement a client-side data transformation on the data you receive from your service (or server-side) which transposes all records in this fashion. Then the grid will render them.

[merjoha]

If I were to do the client side data transformation, the igGrid would be able to render them the way I am desiring? Do you have an example of something like this or some insight on how the grid would actually handle this?

[kdinev]

@merjoha We will prepare an example and we will share it.

[MonikaKirkova]

Hello I have prepared a sample demonstrating the described behavior. The data is modified in order to have proper structure(i.e. {columnName: value, field0: value, …}) in the ‘transformData’ method. Additionally, defaultColumnWidth is set to the columns and the font-weight of the first column is set to bold.

[merjoha]

Thank you for sharing this example.