looking for sample of CardView style Grid

[Merick Icy Agustin]

I'm looking for a sample CardView style grid using Syncfusion Essential version 15.1.0.37.

[Jayaprakash Kamaraj]

Hi Merick,                                                                                                  

Thanks for contacting Syncfusion support. 

We can achieve your requirement using row template feature. In this feature, set the customized look and behavior to grid all rows. RowTemplate property used to render the grid with template rows. Please refer to the below help documents , code example and online demo sample. 

 

Api for row template : https://help.syncfusion.com/api/js/ejgrid#members:rowtemplate 

 

https://help.syncfusion.com/aspnetmvc/grid/row#row-template 

 

<script id="templateData" type="text/x-jsrender"> 

    <tr> 

        <td class="photo"> 

            <img src="../Content/images/Employees/{{:EmployeeID}}.png" alt="{{:EmployeeID}}" /> 

        </td> 

        <td class="details"> 

            <table class="CardTable" cellpadding="3" cellspacing="2"> 

                <colgroup> 

                    <col width="50%"> 

                    <col width="50%"> 

                </colgroup> 

                <tbody> 

                    <tr> 

                        <td class="CardHeader">First Name </td> 

                        <td>{{:FirstName}} </td> 

                    </tr> 

           .. 

               </tbody> 

            </table> 

        </td> 

    </tr> 

</script> 

} 

@section ControlsSection{ 

    @(Html.EJ().Grid<EmployeeView>("RowTemplate") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .AllowScrolling() 

        .ScrollSettings(scroll => { scroll.Height(380).Width(500); }) 

        .RowTemplate("#templateData") 

        .Columns(col => 

        { 

            col.HeaderText("Photo").Width(30).Add(); 

            col.HeaderText("Employee Details").Width(70).Add(); 

        }) 

    ) 

} 

 

 

sample: http://mvc.syncfusion.com/demos/web/grid/rowtemplate 

 

Regards, 

 

Jayaprakash K. 

 

[Merick Icy Agustin]

Hi Jayaprakash,

One more thing to ask, I did notice that AllowSelection() will not work if i am using RowTemplate.

Is this a limitation of the grid?

Thanks by the way.

Respectfully,

Merick

[Jayaprakash Kamaraj]

 

Hi Merick, 

 

We don’t have an inbuilt support to select the row when render the Grid rowTemplate. In Grid control with rowTemplate has following limitations. 

 

1.       We can’t perform editing on the Grid control. 

2.       The sorting and filtering performed based on the specified field name. So, we can perform sorting and filtering by set the field property to any one of the column and please refer to the below code example. 

 

    @(Html.EJ().Grid<EmployeeView>("RowTemplate") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .AllowScrolling() 

        .AllowPaging(true) 

        .ScrollSettings(scroll => { scroll.Height(380).Width(500); }) 

        .RowTemplate("#templateData") 

        .Columns(col => 

        { 

            col.Field("EmployeeID").HeaderText("Photo").Width(30).Add(); 

            col.Field("FirstName").HeaderText("Employee Details").Type("string").Width(70).Add(); 

        })) 

 

Note: If use rowTemplate we need to specify the Type in columns to perform filtering operation. 

 

Regards, 

 

Jayaprakash K. 

 

[Merick Icy Agustin]

Hi Jayaprakash,

Thank you for the answers. We'll try it out.

Respectfully,

Merick

[Jayaprakash Kamaraj]

Hi Merick,  

 

Thanks for the update. 

 

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

 

Regards,  

 

Jayaprakash K.