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

Editing

Loading Demo...

EXAMPLE
VIEW SOURCE
EDIT IN TELERIK REPL
- Edit in Telerik REPL
- Edit in Theme Builder
Change Theme
default
Themes & Swatches

SASS

LESS

Launch Theme Builder
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Purple

Turquoise
Bootstrap Theme

Main

Main Dark

Nordic

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Nova
Classic Theme

Main

Main Dark

Opal

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

                    editing.cshtml
                
                    EditingController.cs
                
                    EmployeeDirectoryController.cs
                
                    EmployeeDirectoryModel.cs

Also available for:

CLIENT-SIDE API SERVER-SIDE API

kendo.syncReady(function(){jQuery("#treelist").kendoTreeList({"columns":[{"field":"FirstName","title":"First Name","width":"220px","editor":"\r\n\u003cinput data-val=\"true\" data-val-required=\"The First name field is required.\" id=\"FirstName\" name=\"FirstName\" title=\"FirstName\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"#FirstName\").kendoTextBox({});});\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"FirstName\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","filterable":true},{"field":"LastName","title":"Last Name","width":"100px","editor":"\r\n\u003cinput id=\"LastName\" name=\"LastName\" title=\"LastName\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"#LastName\").kendoTextBox({});});\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"LastName\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","filterable":true},{"field":"Position","editor":"\r\n\u003cinput id=\"Position\" name=\"Position\" title=\"Position\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"#Position\").kendoTextBox({});});\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Position\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","filterable":true},{"field":"HireDate","format":"{0:MMMM d, yyyy}","title":"Hire Date","editor":"\n\u003cinput id=\"HireDate\" name=\"HireDate\" title=\"HireDate\" type=\"text\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"#HireDate\").kendoDatePicker({\"format\":\"d\"});});\u003c/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"HireDate\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","filterable":true},{"field":"Phone","editor":"\r\n\u003cinput id=\"Phone\" name=\"Phone\" title=\"Phone\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"#Phone\").kendoTextBox({});});\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Phone\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","filterable":true},{"field":"Extension","format":"{0:#}","title":"Ext","editor":"\n\u003cinput data-val=\"true\" data-val-range=\"The field Extension must be between 0 and 9999.\" data-val-range-max=\"9999\" data-val-range-min=\"0\" id=\"Extension\" name=\"Extension\" style=\"width:100%\" title=\"Extension\" type=\"text\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"#Extension\").kendoNumericTextBox({\"decimals\":0,\"format\":\"n0\",\"max\":2147483647,\"min\":-2147483648});});\u003c/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Extension\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","filterable":true},{"attributes":{"style":"text-align: center;"},"command":[{"name":"createChild","text":"Add child"},{"name":"edit"},{"name":"destroy"}],"width":"300px","filterable":true}],"editable":true,"height":540,"toolbar":[{"name":"create"}],"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":"","update":{"url":"/aspnet-core/employeedirectory/update"},"create":{"url":"/aspnet-core/employeedirectory/create"},"destroy":{"url":"/aspnet-core/employeedirectory/destroy"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverAggregates":true,"filter":[],"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},"CountryFlag":{"nullable":false,"type":"string"}},"expanded":true}}}});}); .k-treelist .k-command-cell .k-button { min-width: 0px; padding: 10px 10px 10px 10px; }

Description

The Telerik UI for ASP.NET Core TreeList comes with multiple built-in options for editing. You can easily implement it by setting the model and configuring its transport.

This demo illustrates the implementation of the Inline editing functionality by adding Create, Update, and Destroy action methods to the controller and configuring them to return a collection with the modified or deleted records in the view.

Key Editing Features

Incell (batch) editing – implement cell editing and make and save batch updates
Inline editing – set the edit mode to inline editing
Popup editing – configure the TreeList for popup editing
Editing by dragging and dropping of rows

Editing

Themes & Swatches

Description

Key Editing Features

Support & Learning Resources