search

IgniteUI / ignite-ui

Ignite UI for jQuery by Infragistics
https://bit.ly/2kuu1fT
Other
477 stars 83 forks source link

Card View for the igGrid #2194

Open merjoha opened 2 years ago

merjoha commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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

MonikaKirkova commented 2 years ago

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 commented 2 years ago

Thank you for sharing this example.