1. Home
  2. Forum
  3. Blazor
  4. Cards in DataGrid and TreeGrid

Cards in DataGrid and TreeGrid

Please, describe how to implement cards to replace rows inside TreeGrid and DataGrid. Or plan to add this ability in next release.
It is hard to make web-shop site without CardView compoment with similar sort, filter, search and other grid fuctions.

11 Replies
GL Gowri Loganathan Syncfusion Team May 11, 2020 01:54 PM UTC

Hi Stanislav,  
 
Thanks for contacting Syncfusion Forum. 
 
Query#1: describe how to implement cards to replace rows inside Treegrid 
 
Based on your requirement, we suggest you to use the “Row Template” feature of TreeGrid. We can customize the TreeGrid rows by using this feature. So that you can render Card inside this template. Please refer the below documentation link and online demo for more details regarding this topic,  
 
Query#2: describe how to implement cards to replace rows inside DataGrid 
 
Based on your requirement, we suggest you to use the “Row Template” feature of Grid. We can customize the Grid rows by using this feature. So that you can render Card inside this template. Please refer the below documentation link and online demo for more details regarding this topic,  
 
And also we would like to suggest you to refer our column template feature documentation.  
 
Please get back to us if you need further assistance.  

Regards, 
Gowri V L 
 


SG Stanislav Gordenko May 11, 2020 02:06 PM UTC

Hi Gowri, 
I'd like to have an abiltity to make Tile View with Cards from Grid and Tree Grid. I found it impossible with Row template because it allows only one data element for one row.
I need to have few Product Cards in each row. So, I need an ability to rewrite data element dividers from table rows to divs.


MP Manivannan Padmanaban Syncfusion Team May 12, 2020 10:57 AM UTC

  
Hi Stanislav, 

In order to proceed further, we request you to get back to us with the below details. 

  1. Share the screenshot Or diagrammatically representation of your requirement.
  2. Explain your requirement in detail.

Provided details will help us, to proceed further on your requirement. 

Regards, 
Manivannan Padmanaban 


SG Stanislav Gordenko May 12, 2020 11:32 AM UTC



I would like to make something like it, but with grid filter, group, search and sort futures:


To make it I should only to have ability to wrap each data item not to table row, but to divs. 
Your code generate this:

<tr role="row" class="e-row e-altrow" style="" data-uid="grid-row0" aria-rowindex="0">
<td class="e-rowcell e-hide" role="gridcell" tabindex="-1" aria-label="fb02f801-3d38-48a1-a578-1ec2359cba29 Column Header " style="text-align:left" aria-colindex="0">
</td>
...
</tr>

I should be able to do the same like https://blazor.syncfusion.com/demos/card/tile-view?theme=bootstrap4, but to keep grid futures.



BM Bishan Moteria May 19, 2020 01:10 PM UTC

Hi,
Even I have the same question. How to display records in cards style (multiple records in a row like shown in the picture above) while still having filter, search and sort features? This layout is much needed especially for Tablet and Mobile size screens.

Thanks,
Bishan M.

JA Jesus Arockia Sankaran S Syncfusion Team May 21, 2020 04:48 AM UTC

Hi Stanislav, 
 
Currently we do not have support to achieve your requirement “New component request - Datalist component for Blazor“ but we have logged a feature request on this and it can be tracked through our feedback portal below. 
 
 
Please cast your vote to make it count. We will prioritize the features every release based on the demands. 
 
If you have any more specification/suggestions to the feature request you can add it as a comment in the portal. 
 
Regards, 
Jesus Arockia Sankaran S 


JA Jesus Arockia Sankaran S Syncfusion Team May 21, 2020 04:50 AM UTC

Hi Bishan,  

We request you to refer our previous response for this new component request related query.  

Regards, 
Jesus Arockia Sankaran S 


BM Bishan Moteria May 21, 2020 07:30 AM UTC

Hi Jesus Arockia Sankaran S,

Thank you for the update. I have added more specification/suggestions to the feedback portal. The new "Datalist" component for blazor would be really useful when you have many properties to display especially on mobile/tablet size screen. Scrolling horizontally, applying filters, searching, grouping, etc. with Grid component on mobile/tablet isn't as intuitive as a card style layout.

Example for reponsive card style layout: https://www.codeply.com/go/nIB6oSbv6q

Please feel free to ask if you require further information.

Regards,
Bishan M.

JA Jesus Arockia Sankaran S Syncfusion Team May 21, 2020 08:32 AM UTC

Hi Bishan, 

We are very grateful for your comments and suggestion in feedback portal. 

Regards, 
Jesus Arockia Sankaran S 


BM Bishan Moteria June 3, 2020 10:37 AM UTC

Hi,

I'd like to share an update where I managed to display each data grid item in a card style (using SfCard component) with Sorting, Filtering (checkbox style), Paging and Searching features. It looks like following:

Wide screen:


Tablet screen:


Mobile screen:



Please find attached sample project for more information.

Note: The grouping feature doesn't work due to css display property set to "flex".

Cheers,
Bishan M.


Attachment: CardsInDataGrid_7b1fc50d.zip

RS Renjith Singh Rajendran Syncfusion Team June 4, 2020 12:17 PM UTC

Hi Bishan, 

Thanks for your update. 

We could see that, you have used the previously suggested RowTemplate feature of Grid to display the cards in Grid. But the shared UI of Amazon screenshot requirement could not be achieved properly, the problem is that there will be misalignments with column header and content of Grid. And in the amazor screenshot the header is not present. 

So only we have logged a New component request. Suppose if this suits your requirement, then you can use the RowTemplate feature to display cards in Grid as like you have done in your code. And we are happy that your requirement is achieved through our inbuilt features. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 



Loader.
Up arrow icon