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

Checkbox Selection

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

            
                        checkbox_selection.cshtml
                    
                        Checkbox_SelectionController.cs
                    
                        EmployeeDirectoryController.cs

Also available for:

API REFERENCE

kendo.syncReady(function(){jQuery("#treelist").kendoTreeList({"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-mvc/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},"HireDate":{"nullable":false,"type":"date","defaultValue":null}},"expanded":true}}},"columns":[{"selectable":true,"width":"65px"},{"field":"Position"},{"field":"FirstName","title":"First Name","width":"250px"},{"field":"LastName","title":"Last Name"},{"field":"Phone","title":"Phone"}],"height":540,"messages":{"commands":{"canceledit":"Cancel","create":"Add new record","createchild":"Add child","destroy":"Delete","edit":"Edit ","save":"Save changes","cancel":"Cancel changes","excel":"Export to Excel","pdf":"Export to PDF","update":"Update"},"loading":"Loading","noRows":"No records available.","requestFailed":"Request failed.","retry":"Retry"}});});

Description

As of R3 2020, а checkbox based selection is provided by the TreeList. To enable this functionality you should define selectable column as shown below:

columns.Add().Selectable(true)

This column allows you to select TreeList rows automatically after changing the status of the checkbox to checked. A checkbox is also displayed in the column header to toggle the checked/selected state of all rows in the current page.

Checkbox Selection

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo