We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

looking for sample of CardView style Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

129912 Apr 10,2017 01:53 AM UTC Apr 12,2017 06:55 AM UTC ASP.NET MVC 5
loading
Tags: Grid
Merick Icy Agustin
Asked On April 10, 2017 01:53 AM UTC

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

Jayaprakash Kamaraj [Syncfusion]
Replied On April 10, 2017 09:02 AM UTC

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. 
 
 
 
<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(); 
        }) 
    ) 
} 
 
 
 
Regards, 
 
Jayaprakash K. 
 


Merick Icy Agustin
Replied On April 10, 2017 10:14 AM UTC

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 [Syncfusion]
Replied On April 11, 2017 09:45 AM UTC

 
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
Replied On April 11, 2017 09:50 AM UTC

Hi Jayaprakash,

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

Respectfully,
Merick

Jayaprakash Kamaraj [Syncfusion]
Replied On April 12, 2017 06:55 AM UTC

Hi Merick,  
 
Thanks for the update. 
 
Please get back to us if you need any further assistance.   
 
Regards,  
 
Jayaprakash K. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;