Remote Binding of ListView in Kendo UI using EntityFramework and Web API

Before going through this article ensure that you have a basic Knowledge of MVC Architecture and ASP.NET Web API.

Let we start with creating a REST service using WEB API.

Just create a WEB API project in Visual Studio as shown in Figures 1 and 2:


                                                                           Figure 1


                                             Figure 2 

Creating a Model Classes

Right-click on the model folder and create a class, in my case I named it Product.

Write the following code in the Product.cs model class. 
  1. public class Product {  
  2.     [Key]  
  3.     [DatabaseGenerated(DatabaseGeneratedOption.Identity)]  
  4.     public int ProductID {  
  5.         get;  
  6.         set;  
  7.     }  
  8.     [Required]  
  9.     public string ProductName {  
  10.         get;  
  11.         set;  
  12.     }  
  13.     [Required]  
  14.     public string UnitPrice {  
  15.         get;  
  16.         set;  
  17.     }  
  18. }  

Here I am using Entity Framework Code first technique so we need to create the context class.

Right-click on the model folder and create one more class, in my case I named it ProductContext.

Write the following code in ProductContext class. 

  1. public class ProductContext: DbContext {  
  2.     public ProductContext(): base("name=TestConnection") {}  
  3.     public DbSet < Product > Products {  
  4.         get;  
  5.         set;  
  6.     }  
  7. }  
Scaffolding the WEB API Controller Class

Note: Before doing Scaffolding build your application once.

Right-click on Controller folder then selelct Add--> Controller and create a WEB API class as shown in 3 and 4.
 

                                                                           Figure 3 
 
  
                                                                     Figure 4 

The preceding procedure will scaffold the REST full service in the ProductsController.cs.

You will get some pre-defined HTTP GET, POST, PUT and DELETE requests/responses in the products Controller. Modify the code based on your application requirements. For this example I didn't modify the code.

Now the REST services are created , it's time to create a Kendo UI List View to consume the services.

Before implementing the service in the Kendo UI once check that  in Postman / Fiddler.

Creating a Kendo List View with Remote Binding

Create a HMTL page in your project, in my case I named it KendoList.html.

Desgin in KendoList.html

  1. <html  
  2.     xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  5.         <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  6.         <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  7.         <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  8.         <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  9.         <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  10.         <title></title>  
  11.     </head>  
  12.     <body>  
  13.         <style>  
  14.   
  15.             .product-view {  
  16.   
  17.                 float: left;  
  18.   
  19.                 width: 50%;  
  20.   
  21.                 height: 300px;  
  22.   
  23.                 box-sizing: border-box;  
  24.   
  25.                 border-top: 0;  
  26.   
  27.                 position: relative;  
  28.   
  29.             }  
  30.   
  31.             .product-view:nth-child(even) {  
  32.   
  33.                 border-left-width: 0;  
  34.   
  35.             }  
  36.   
  37.             .product-view dl {  
  38.   
  39.                 margin: 10px 10px 0;  
  40.   
  41.                 padding: 0;  
  42.   
  43.                 overflow: hidden;  
  44.   
  45.             }  
  46.   
  47.             .product-view dt, dd {  
  48.   
  49.                 margin: 0;  
  50.   
  51.                 padding: 0;  
  52.   
  53.                 width: 100%;  
  54.   
  55.                 line-height: 24px;  
  56.   
  57.                 font-size: 18px;  
  58.   
  59.             }  
  60.   
  61.             .product-view dt {  
  62.   
  63.                 font-size: 11px;  
  64.   
  65.                 height: 16px;  
  66.   
  67.                 line-height: 16px;  
  68.   
  69.                 text-transform: uppercase;  
  70.   
  71.                 opacity: 0.5;  
  72.   
  73.             }  
  74.   
  75.             .product-view dd {  
  76.   
  77.                 height: 46px;  
  78.   
  79.                 overflow: hidden;  
  80.   
  81.                 white-space: nowrap;  
  82.   
  83.                 text-overflow: ellipsis;  
  84.   
  85.             }  
  86.   
  87.             .product-view dd .k-widget,  
  88.   
  89.             .product-view dd .k-textbox {  
  90.   
  91.                 font-size: 14px;  
  92.   
  93.             }  
  94.   
  95.             .k-listview {  
  96.   
  97.                 border-width: 1px 1px 1px 0;  
  98.   
  99.                 padding: 0;  
  100.   
  101.                 overflow: hidden;  
  102.   
  103.                 min-height: 298px;  
  104.   
  105.             }  
  106.   
  107.             .edit-buttons {  
  108.   
  109.                 position: absolute;  
  110.   
  111.                 bottom: 0;  
  112.   
  113.                 left: 0;  
  114.   
  115.                 right: 0;  
  116.   
  117.                 text-align: right;  
  118.   
  119.                 padding: 5px;  
  120.   
  121.                 background-color: rgba(0,0,0,0.1);  
  122.   
  123.             }  
  124.   
  125.             span.k-invalid-msg {  
  126.   
  127.                 position: absolute;  
  128.   
  129.                 margin-left: 6px;  
  130.   
  131.             }  
  132.   
  133.             .k-add-button {  
  134.   
  135.                 margin-bottom: 2em;  
  136.   
  137.             }  
  138.   
  139.             @media only screen and (max-width : 620px) {  
  140.   
  141.                 .product-view {  
  142.   
  143.                     width: 100%;  
  144.   
  145.                 }  
  146.   
  147.                 .product-view:nth-child(even) {  
  148.   
  149.                     border-left-width: 1px;  
  150.   
  151.                 }  
  152.   
  153.             }  
  154.   
  155. </style>  
  156.         <div id="example">  
  157.             <div class="demo-section k-header wide">  
  158.                 <div class="container">  
  159.                     <div class="row">  
  160.                         <div class="col-md-3">  
  161.                             <label>Product Name</label>  
  162.                         </div>  
  163.                         <div class="col-md-3">  
  164.                             <input type="text" id="ProductName" data-bind="value:ProductName" class="k-textbox" />  
  165.                         </div>  
  166.                     </div>  
  167.                     <div class="row">  
  168.                         <div class="col-md-3">  
  169.                             <label>Unit Cost</label>  
  170.                         </div>  
  171.                         <div class="col-md-3">  
  172.                             <input type="text" id="UnitPrice" class="k-textbox" data-bind="value:UnitPrice" />  
  173.                         </div>  
  174.                     </div>  
  175.                     <br/>  
  176.                     <br/>  
  177.                     <div class="row">  
  178.                         <button data-role="button"  
  179.   
  180.                         data-sprite-css-class="k-icon k-edit"  
  181.   
  182.                         data-bind="events: { click: InsertProduct }"  
  183.   
  184.                         style="width: 180px">  
  185.   
  186.                         Submit  
  187.   
  188.                     </button>  
  189.                     </div>  
  190.                 </div>  
  191.                 <div>  
  192.                     <h4>Kendo List</h4>  
  193.                     <div data-role="listview"  
  194.   
  195.                         data-template="template"  
  196.   
  197.                         data-bind="source: products,  
  198.   
  199.                         visible: isVisible"  
  200.   
  201.                         style="height: 300px; overflow: auto"></div>  
  202.                     </div>  
  203.                 </div>  
  204.             <script type="text/x-kendo-tmpl" id="template">  
  205.                 <div class="product-view k-widget">  
  206.                     <dl>  
  207.                         <dt>Product Name</dt>  
  208.                         <dd>#:ProductName#</dd>  
  209.                         <dt>Unit Price</dt>  
  210.                         <dd>#:kendo.toString(UnitPrice, "c")#</dd>  
  211.                     </dl>  
  212.                 </div>  
  213.             </script>  
  214.         </div>  
JavaScipt with MVVM Model

  1. $(document).ready(function() {  
  2.     var viewModel = kendo.observable({  
  3.         isVisible: true,  
  4.         ProductName: '',  
  5.         UnitPrice: '',  
  6.         products: new kendo.data.DataSource({  
  7.             batch: true,  
  8.             transport: {  
  9.                 read: {  
  10.                     url: "api/Products",  
  11.                     dataType: "json"  
  12.                 },  
  13.                 parameterMap: function(options, operation) {  
  14.                     if (operation !== "read" && options.models) {  
  15.                         return {  
  16.                             models: kendo.stringify(options.models)  
  17.                         };  
  18.                     }  
  19.                 }  
  20.             },  
  21.             schema: {  
  22.                 model: {  
  23.                     id: "ProductID",  
  24.                 }  
  25.             },  
  26.         }),  
  27.         InsertProduct: function(e) {  
  28.             e.preventDefault()  
  29.             $.ajax({  
  30.                 type: "POST",  
  31.                 url: 'api/Products',  
  32.                 data: {  
  33.                     ProductName: $("#ProductName").val(),  
  34.                     UnitPrice: $("#UnitPrice").val()  
  35.                 },  
  36.             })  
  37.         }  
  38.     });  
  39.     kendo.bind($("#example"), viewModel);  
  40. })  
Result in a browser


                                                                                    Figure 5

To show the structure of the Kendo list I already inserted one product into it.

We will start to add one more new product as shown in 6 and 7.

   
                                                                                    Figure 6 
 

                                                                           Figure 7

Check the table in your SQL database:
 
    

Yes, the records are inserted into the table.

That's it, I hope you have enjoyed this article, thank you.

Happy Coding.