Basic usage

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        index.cshtml
                    
                        IndexController.cs
                    
                        EmployeeDirectoryController.cs
                    
                        EmployeeDirectoryModel.cs

Also available for:

API REFERENCE

<div class='employee-photo' style='background-image: url(/aspnet-core/shared/web/treelist/people/#: EmployeeId #.jpg);'></div> <div class='employee-name'>#: FirstName #</div> kendo.syncReady(function(){jQuery("#treelist").kendoTreeList({"columns":[{"field":"FirstName","template":jQuery('#photo-template').html(),"title":"First name","width":"250px","filterable":true},{"field":"LastName","title":"Last name","width":"160px","filterable":true},{"field":"Position","filterable":true},{"field":"Phone","width":"200px","filterable":true},{"field":"Extension","width":"140px","filterable":true},{"field":"Address","filterable":true}],"filterable":true,"height":540,"pageable":{"pageSize":15,"pageSizes":[5,10,20]},"sortable":true,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-core/employeedirectory/all"},"prefix":""},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"EmployeeId","parentId":"ReportsTo","fields":{"EmployeeId":{"nullable":false,"type":"number"},"FirstName":{"nullable":false,"type":"string"},"LastName":{"nullable":false,"type":"string"},"ReportsTo":{"nullable":true,"type":"number","defaultValue":null},"Address":{"nullable":false,"type":"string"},"City":{"nullable":false,"type":"string"},"Country":{"nullable":false,"type":"string"},"Phone":{"nullable":false,"type":"string"},"Extension":{"nullable":false,"type":"number","defaultValue":null},"Position":{"nullable":false,"type":"string"},"BirthDate":{"nullable":false,"type":"date","defaultValue":null},"hasChildren":{"nullable":false,"type":"boolean"},"HireDate":{"nullable":false,"type":"date","defaultValue":null}},"expanded":true}}}});}); .employee-photo { display: inline-block; width: 40px; height: 40px; border-radius: 50%; background-size: 40px 44px; background-position: center center; vertical-align: middle; line-height: 41px; box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2); } .employee-name { display: inline-block; vertical-align: middle; line-height: 41px; padding-left: 10px; }

The TreeList component is part of Telerik UI for ASP.NET Core, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Support & Learning Resources

Was this demo helpful?

YES NO

Tell us how we can improve this demo

Submit Skip