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. Image for the cookie policy date

formatting of listview

Would you please show how to format the listview (heading and entries -fontsize, dimensions of titlebox and entries).
thank you.
Larry Greenberg

3 Replies

SS Selvamani Sankarappan Syncfusion Team May 12, 2017 11:13 AM UTC

Hi Lawrence,   
Thanks for contacting Syncfusion Support.   
You can customize the ListView header and entries using our existing property “CssClass”. By defining the root class using this API, you can change the theme style to your own; in this case, you need to include this root class in that .css file in a project.  Please refer to the below code example:   
@(Html.EJ().ListView("testListView").DataSource(ds => ds.URL("http://mvc.syncfusion.com/Services/Northwnd.svc/")).Query("ej.Query().from('Customers').take(5)").ShowHeader(true).HeaderTitle("List View").CssClass("customclass").FieldSettings(fs => fs.Text("CustomerID")).Width(350).Height(500)) 
.e-lv.customclass .e-htitle, .e-lv.customclass .e-btn-text { 
        font-size: 20px;   //customize the header font-size 
    .e-lv.customclass .e-header { 
        height: 60px;  //customize the header dimensions 
    .e-lv.customclass .e-list { 
        font-size:16px;          //customize the list items font-size and dimensions 
We have prepared a sample based on this. Please refer to the following sample: 
To know more about ListView component properties, methods and events. Refer to the following link: 
If you still have any difficulties, let us know and we will be happy to help you.   
Selvamani S. 

LG lawrence greenberg May 12, 2017 01:21 PM UTC

Thank you Selvamani

AP Arun Palaniyandi Syncfusion Team May 15, 2017 08:37 AM UTC

Hi Lawrence, 

We are glad that our solution has helped you out. 

Please let us know if you have any queries in future. 

Arun P. 

Live Chat Icon For mobile
Up arrow icon