New to Telerik UI for ASP.NET Core? Download free 30-day trial

Tag Helper

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

tag_helper.cshtml

<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":"280px"},{"field":"LastName","title":"Last Name","width":"160px"},{"field":"Position"},{"field":"Phone","width":"200px"},{"field":"Extension","width":"140px"},{"field":"Address"}],"height":540,"dataSource":{"schema":{"type":"json","model":{"id":"EmployeeId","fields":{"ReportsTo":{"nullable":true},"EmployeeId":{"type":"number"},"Extension":{"type":"number"}},"parentId":"ReportsTo","expanded":true}},"transport":{"read":{"dataType":"jsonp","url":"https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All"}}}});}); .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; }

Description

This example shows how you can use the tag-helper for ASP.NET Core TreeList component.

Tag Helper

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo