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

Custom data source

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

            
                        custom_datasource.cshtml
                    
                        Custom_DataSourceController.cs
                    
                        ProductViewModel.cs

Also available for:

ASP.NET MVC

API REFERENCE

Add new recordkendo.syncReady(function(){jQuery("#listView").kendoListView({"tagName":"div","dataSource":{"transport":{"read":{"url":"https://demos.telerik.com/kendo-ui/service/Products","dataType":"jsonp"},"update":{"url":"https://demos.telerik.com/kendo-ui/service/Products/Update","dataType":"jsonp"},"create":{"url":"https://demos.telerik.com/kendo-ui/service/Products/Create","dataType":"jsonp"},"destroy":{"url":"https://demos.telerik.com/kendo-ui/service/Products/Destroy","dataType":"jsonp"},"parameterMap":parameterMap},"pageSize":4,"page":0,"groupPaging":false,"total":0,"schema":{"model":{"id":"ProductID","fields":{"ProductID":{"type":"number"},"ProductName":{"type":"string"},"UnitPrice":{"type":"number"},"UnitsInStock":{"type":"number"},"Discontinued":{"type":"boolean"},"LastSupply":{"type":"date"},"UnitsOnOrder":{"type":"number"},"Category":{"type":"object"},"CategoryID":{"type":"number","defaultValue":null},"QuantityPerUnit":{"type":"string"}}}},"batch":true},"template":kendo.template(jQuery('#template').html()),"pageable":{"buttonCount":10,"pagerId":"listView_pager"},"editTemplate":"\u003cdiv class=\"product-view k-widget\"\u003e \u003cdiv class=\"edit-buttons\"\u003e \u003ca class=\"k-button k-button-icontext k-update-button\" href=\"\\\\\\#\"\u003e\u003cspan class=\"k-icon k-i-check\"\u003e\u003c/span\u003e\u003c/a\u003e \u003ca class=\"k-button k-button-icontext k-cancel-button\" href=\"\\\\\\#\"\u003e\u003cspan class=\"k-icon k-i-cancel\"\u003e\u003c/span\u003e\u003c/a\u003e \u003c/div\u003e \u003cdl\u003e \u003cdt\u003eProduct Name\u003c/dt\u003e \u003cdd\u003e \u003cinput data-val=\"true\" data-val-required=\"The Product name field is required.\" id=\"ProductName\" name=\"ProductName\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"\\#ProductName\").kendoTextBox({});});\u003c/script\u003e \u003cspan data-for=\"ProductName\" class=\"k-invalid-msg\"\u003e\u003c/span\u003e \u003c/dd\u003e \u003cdt\u003eUnit Price\u003c/dt\u003e \u003cdd\u003e \u003cinput data-val=\"true\" data-val-number=\"The field Unit price must be a number.\" data-val-range=\"The field Unit price must be between 0 and 2147483647.\" data-val-range-max=\"2147483647\" data-val-range-min=\"0\" data-val-required=\"The Unit price field is required.\" id=\"UnitPrice\" name=\"UnitPrice\" style=\"width:100%\" type=\"text\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"\\#UnitPrice\").kendoNumericTextBox({\"format\":\"c\",\"max\":2147483647,\"min\":0});});\u003c/script\u003e \u003cspan data-for=\"UnitPrice\" class=\"k-invalid-msg\"\u003e\u003c/span\u003e \u003c/dd\u003e \u003cdt\u003eUnits In Stock\u003c/dt\u003e \u003cdd\u003e \u003cinput data-val=\"true\" data-val-range=\"The field Units in stock must be between 0 and 2147483647.\" data-val-range-max=\"2147483647\" data-val-range-min=\"0\" data-val-required=\"The Units in stock field is required.\" id=\"UnitsInStock\" name=\"UnitsInStock\" style=\"width:100%\" type=\"text\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"\\#UnitsInStock\").kendoNumericTextBox({\"decimals\":0,\"format\":\"n0\",\"max\":2147483647,\"min\":-2147483648});});\u003c/script\u003e \u003cspan data-for=\"UnitsInStock\" class=\"k-invalid-msg\"\u003e\u003c/span\u003e \u003c/dd\u003e \u003cdt\u003eDiscontinued\u003c/dt\u003e \u003cdd\u003e\u003cinput class=\"k-checkbox\" data-val=\"true\" data-val-required=\"The Discontinued field is required.\" id=\"Discontinued\" name=\"Discontinued\" type=\"checkbox\" value=\"true\" /\u003e\u003clabel class=\"k-checkbox-label\" for=\"Discontinued\"\u003e\u003c/label\u003e\u003cinput name=\"Discontinued\" type=\"hidden\" value=\"false\" /\u003e\u003c/dd\u003e \u003c/dl\u003e\u003c/div\u003e"});}); <div class="product-view k-widget"> <dl> <dt>Product Name</dt> <dd>#:ProductName#</dd> <dt>Unit Price</dt> <dd>#:kendo.toString(UnitPrice, "c")#</dd> <dt>Units In Stock</dt> <dd>#:UnitsInStock#</dd> <dt>Discontinued</dt> <dd>#:Discontinued#</dd> </dl> <div class="edit-buttons"> <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a> <a class="k-button k-delete-button" href="\\#"><span class="k-icon k-i-delete"></span></a> </div> </div> .product-view { float: left; width: 50%; height: 300px; box-sizing: border-box; border-top: 0; position: relative; } .product-view:nth-child(even) { border-left-width: 0; } .product-view dl { margin: 10px 10px 0; padding: 0; overflow: hidden; } .product-view dt, dd { margin: 0; padding: 0; width: 100%; line-height: 24px; font-size: 18px; } .product-view dt { font-size: 11px; height: 16px; line-height: 16px; text-transform: uppercase; opacity: 0.5; } .product-view dd { height: 46px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .product-view dd .k-widget, .product-view dd .k-textbox { font-size: 14px; } .k-listview { border-width: 1px 0 0; padding: 0; overflow: hidden; min-height: 298px; } .edit-buttons { position: absolute; bottom: 0; left: 0; right: 0; text-align: right; padding: 5px; background-color: rgba(0,0,0,0.1); } .k-pager-wrap { border-top: 0; } span.k-invalid-msg { position: absolute; margin-left: 6px; } .k-add-button { margin-bottom: 2em; } @media only screen and (max-width : 620px) { .product-view { width: 100%; } .product-view:nth-child(even) { border-left-width: 1px; } }

Custom data source

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo