Post
Ask Question

Custom Editor With Dropdown List In Kendo Grid

Introduction

This article tells you how to use the drop-down list as a custom editor in Kendo Grid with remote data.

Content

  • Remote Data Source for Kendo Grid
  • Building a Kendo Grid with remote datasource
  • Custom Editor in Kendo Grid

Remote Data Source for Kendo Grid

I’m using my existing ASP.NET Core API application which I used in my last article. You can go through my previous article to know how to create an ASP.NET Core API.

Model Class- TechnologyList.cs

  1. public class TechnologyList    
  2.    {    
  3.        public TechnologyList(int value, string text)    
  4.        {    
  5.     
  6.            this.value = value;    
  7.            this.text = text;    
  8.        }    
  9.        public TechnologyList(int value, string text,Category category)    
  10.        {    
  11.     
  12.            this.value = value;    
  13.            this.text = text;    
  14.            this.Category = category;    
  15.        }    
  16.        public int value { get; set; }    
  17.        public string text { get; set; }    
  18.     
  19.        public Category Category { get; set; }    
  20.    }    
  21.     
  22.    public class Category    
  23.    {    
  24.        public int CategoryID { get; set; }    
  25.        public string CategoryName { get; set; }    
  26.    }    
Controller- TechologiesController.cs
  1. [HttpGet]  
  2.        [Route("GetTechList")]  
  3.   
  4.        public List<TechnologyList> GetTech()  
  5.        {  
  6.            try  
  7.            {  
  8.                List<TechnologyList> _TechList = new List<TechnologyList>();  
  9.   
  10.                _TechList.Add(new TechnologyList(1, "C#", new Category { CategoryID = 1, CategoryName = "Programming" }));  
  11.                _TechList.Add(new TechnologyList(2, "F#", new Category { CategoryID = 2, CategoryName = "Programming" }));  
  12.                _TechList.Add(new TechnologyList(3, "HTML", new Category { CategoryID = 3, CategoryName = "Web Technology" }));  
  13.                _TechList.Add(new TechnologyList(4, "JavaScript", new Category { CategoryID = 4, CategoryName = "Client Side Scripting" }));  
  14.                _TechList.Add(new TechnologyList(5, "Azure", new Category { CategoryID = 5, CategoryName = "Cloud" }));  
  15.                return _TechList;  
  16.            }  
  17.            catch (Exception ex)  
  18.            {  
  19.                List<TechnologyList> _Tech = null;  
  20.                return _Tech;  
  21.            }  
  22.        }  
  23.   
  24.        [HttpGet]  
  25.        [Route("GetCategory")]  
  26.   
  27.        public List<Category> GetCategories()  
  28.        {  
  29.            try  
  30.            {  
  31.                List<Category> categories = new List<Category>();  
  32.                categories.Add(new Category { CategoryID = 1, CategoryName = "Programming" });  
  33.                categories.Add(new Category { CategoryID = 2, CategoryName = "Web Technology" });  
  34.                categories.Add(new Category { CategoryID = 3, CategoryName = "Client Side Scripting" });  
  35.                categories.Add(new Category { CategoryID = 4, CategoryName = "Cloud" });  
  36.                return categories;  
  37.            }  
  38.            catch (Exception ex)  
  39.            {  
  40.                List<Category> categories = null;  
  41.                return categories;  
  42.            }  
  43.        }  

GetTech() Action is used to return a datasource for the grid. GetCategories() Action is used to return a datasource for the dropdownlist.

I am going to use the below API response to construct my remote data source for Kendo Grid:

  • API - /api/Technologies/TechList
  • Type - GET.

Test the APIs using POSTMAN.

 

The below API response is used to build datasource for drop-down list in Grid.

  • API - /api/Technologies/GetCategory
  • Type - GET

Test the APIs using POSTMAN.

 

Build a Kendo Grid with remote datasource

Create a new HTML page. In my case, I named it as KendoGridDropDown.html.

 KendoGridDropDown.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.       
  5.     <style>  
  6.         html {  
  7.             font-size: 14px;  
  8.             font-family: Arial, Helvetica, sans-serif;  
  9.         }  
  10.     </style>  
  11.     <title></title>  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />  
  14.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />  
  15.   
  16.     <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>  
  17.     <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>  
  18.   
  19.   
  20. </head>  
  21. <body>  
  22.   
  23.     <h4>Kendo Grid</h4>  
  24.     <div id="example">  
  25.         <div id="grid"></div>  
  26.   
  27.         <script>  
  28.   
  29.                 $(document).ready(function() {  
  30.   
  31.   
  32.                     var grid = $("#grid").kendoGrid({  
  33.                         dataSource: {  
  34.                             type: "json",  
  35.                             transport: {  
  36.                                 read: "/api/Technologies/GetTechList"  
  37.   
  38.                             },  
  39.                             schema: {  
  40.                                 model: {  
  41.                                     fields: {  
  42.                                         value: { type: "number" },  
  43.                                        
  44.                                         text: { type: "string" },  
  45.   
  46.                                     }  
  47.                                 }  
  48.                             },  
  49.                            pageSize: 20,  
  50.   
  51.                         },  
  52.                          editable:true,  
  53.                         pageable: {  
  54.                             refresh: true,  
  55.                             pageSizes: [20, 40, 60, 80,100],  
  56.   
  57.                         },  
  58.                        height: 500,  
  59.                         columns: [  
  60.   
  61.                             { field: "value", title: "S No", width: "130px" },  
  62.                             
  63.                             { field: "text", title: "Technology", width: "130px" },  
  64.   
  65.                         ]  
  66.                     }).data("kendoGrid");  
  67.   
  68.   
  69.                 });  
  70.                   
  71.  
  72.         </script>  
  73.   
  74.   
  75.     </div>  
  76.   
  77.   
  78. </body>  
  79. </html>    

From the above code, you can notice that the Kendo Grid is constructed based on our remote datasource which is built from the API.

Result in Browser
 
Custom Editor in Kendo Grid

Now, let’s add a custom editor which is a dropdown list in the Kendo Grid using editor attribute in column definition of Kendo Grid.

KendoGridDropDown.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.       
  5.     <style>  
  6.         html {  
  7.             font-size: 14px;  
  8.             font-family: Arial, Helvetica, sans-serif;  
  9.         }  
  10.     </style>  
  11.     <title></title>  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />  
  14.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />  
  15.   
  16.     <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>  
  17.     <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>  
  18.   
  19.   
  20. </head>  
  21. <body>  
  22.   
  23.     <h4>Kendo Grid with Custom Editor</h4>  
  24.     <div id="example">  
  25.         <div id="grid"></div>  
  26.   
  27.         <script>  
  28.   
  29.                 $(document).ready(function() {  
  30.   
  31.   
  32.                     var grid = $("#grid").kendoGrid({  
  33.                         dataSource: {  
  34.                             type: "json",  
  35.                             transport: {  
  36.                                 read: "/api/Technologies/GetTechList"  
  37.   
  38.                             },  
  39.                             schema: {  
  40.                                 model: {  
  41.                                     fields: {  
  42.                                         value: { type: "number" },  
  43.                                         category: { defaultValue: { categoryID: 1, categoryName: "Programming"} },  
  44.                                         text: { type: "string" },  
  45.   
  46.                                     }  
  47.                                 }  
  48.                             },  
  49.                            pageSize: 20,  
  50.   
  51.                         },  
  52.                          editable:true,  
  53.                         pageable: {  
  54.                             refresh: true,  
  55.                             pageSizes: [20, 40, 60, 80,100],  
  56.   
  57.                         },  
  58.                        height: 500,  
  59.                         columns: [  
  60.   
  61.                             { field: "value", title: "S No", width: "130px" },  
  62.                             { field: "category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=category.categoryName#" },  
  63.                             { field: "text", title: "Technology", width: "130px" },  
  64.   
  65.                         ]  
  66.                     }).data("kendoGrid");  
  67.   
  68.   
  69.                 });  
  70.                   
  71.  function categoryDropDownEditor(container, options) {  
  72.                     $('<input required name="' + options.field + '"/>')  
  73.                         .appendTo(container)  
  74.                         .kendoDropDownList({  
  75.   
  76.                             dataTextField: "categoryName",  
  77.                             dataValueField: "categoryID",  
  78.                             dataSource: {  
  79.                                 type: "json",  
  80.                                 transport: {  
  81.                                     read: "/api/Technologies/GetCategory"  
  82.                                 }  
  83.                             }  
  84.   
  85.                         });  
  86.                 }  
  87.         </script>  
  88.   
  89.   
  90.     </div>  
  91.   
  92.   
  93. </body>  
  94. </html>    

categoryDropDownEditor editor function is used to load the datasource for Kendo dropdownlist.

Reference

https://demos.telerik.com/kendo-ui/grid/editing-custom 

I hope you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome.

Source code -GitHub Repo


Similar Articles