Post
Ask Question

ASP.NET MVC 5 - Kendo UI - How To Group The MultiColumnComboBox values And Working With Events

Introduction

 
In my last article, we discussed how to work with MultiColumnComboBox and now, we very well know that Kendo Multicolumn combo box control is used to display the data in multi-column Views within the combo box. In this article, we are going to see how to do the grouping and work with events in KendoMultiColumnComboBox. Before moving to the grouping and events customization, let's add a few more records in the database to get a clear view.
 
 
 
Execute the below query to get the same records.
  1. USE [CSharpCorner]  
  2. GO  
  3. SET IDENTITY_INSERT [dbo].[Employee] ON  
  4. GO  
  5. INSERT [dbo].[Employee] ([ID], [Name], [Country], [Role], [ImageName]) VALUES (1, N'Gnanavel Sekar', N'India', N'Sr. Software Engineer', N'gnanavelsekar')  
  6. GO  
  7. INSERT [dbo].[Employee] ([ID], [Name], [Country], [Role], [ImageName]) VALUES (2, N'Gokul', N'UK', N'Sr. Software Engineer', N'ManIcon')  
  8. GO  
  9. INSERT [dbo].[Employee] ([ID], [Name], [Country], [Role], [ImageName]) VALUES (3, N'Ramar', N'India', N'Technical Lead', N'ManIcon')  
  10. GO  
  11. INSERT [dbo].[Employee] ([ID], [Name], [Country], [Role], [ImageName]) VALUES (10002, N'Subash', N'India', N'Software Developer', N'ManIcon')  
  12. GO  
  13. INSERT [dbo].[Employee] ([ID], [Name], [Country], [Role], [ImageName]) VALUES (10003, N'Ananad', N'USA', N'Software Developer', N'ManIcon')  
  14. GO  
  15. INSERT [dbo].[Employee] ([ID], [Name], [Country], [Role], [ImageName]) VALUES (10004, N'Robert', N'China', N'Sr.Software Engineer', N'ManIcon')  
  16. GO  
  17. INSERT [dbo].[Employee] ([ID], [Name], [Country], [Role], [ImageName]) VALUES (10005, N'Pandi', N'China', N'Sr.Software Engineer', N'ManIcon')  
  18. GO  
  19. INSERT [dbo].[Employee] ([ID], [Name], [Country], [Role], [ImageName]) VALUES (10006, N'Kaviarasan', N'Japan', N'Sr.Software Engineer', N'ManIcon')  
  20. GO  
  21. INSERT [dbo].[Employee] ([ID], [Name], [Country], [Role], [ImageName]) VALUES (10007, N'Karthik', N'USA', N'Software Engineer', N'ManIcon')  
  22. GO  
  23. SET IDENTITY_INSERT [dbo].[Employee] OFF  
  24. GO  
Run your application.
 
  
 
In the above image, you can see that we have got the list of employee data but it looks somewhat weird, right? 
 

MultiColumnComboBox Grouping

 
Now, let's work on grouping by the employee's country. For that, we have to use the below syntax.
 
Syntax
  1. group: { field: "columnname" }   
Now, we shall mention our column is country. We just need to apply this group to our data source as below.
  1. dataSource = new kendo.data.DataSource({  
  2.     transport: {  
  3.         read: {  
  4.             url: "/KendoUI/LoadEmployee",  
  5.             dataType: "json",  
  6.         }  
  7.     },  
  8.     group: {  
  9.         field: "Country"  
  10.     }  
  11. });  
For a clear view:
 
 
 
Run your application. In the below image, you can see that the employees have been grouped by their respective country.
 
 
 

Working with MultiColumnComboBox events

 
Here, we will get the selected row values using an onSelect event. For that, let's write a custom function as below. 
  1. function onSelect(e) {  
  2.     if (e.dataItem) {  
  3.         var dataItem = e.dataItem;  
  4.         alert("Name:" + dataItem.Name + " ,Country:" + dataItem.Country + ", Role: " + dataItem.Role + ", Id: " + dataItem.ID);  
  5.     }  
  6. };  
Now, let us call this onSelect custom function in our multiCoumnComboBox.
  1. $("#employees").kendoMultiColumnComboBox({  
  2.     dataTextField: "Name",  
  3.     dataValueField: "ID",  
  4.     height: 400,  
  5.     columns: [{  
  6.             field: "ContactName",  
  7.             title: "Emp Name",  
  8.             template: "<div class='customer-photo'" + "style='background-image: url(../Content/Images/#:data.ImageName#.jpg);'></div>" + "<span class='customer-name'>#: Name #</span>",  
  9.             width: 170  
  10.         },  
  11.         //{ field: "Name", title: "Name", width: 120 },  
  12.         {  
  13.             field: "Role",  
  14.             title: "Role",  
  15.             width: 160  
  16.         }, {  
  17.             field: "Country",  
  18.             title: "Country",  
  19.             width: 90  
  20.         }  
  21.     ],  
  22.     footerTemplate: 'Total #: instance.dataSource.total() # items found',  
  23.     filter: "contains",  
  24.     filterFields: ["Name", "Country", "Role"],  
  25.     dataSource: dataSource,  
  26.     select: onSelect,  
  27. });  
Run your application. In the below image, we get the selected row details using select event. Similarly, we can perform multiple operations using Change, Close, Open, Filtering, and databound events.
 
 
 
Complete View
  1. @ {  
  2.     ViewBag.Title = "Index";  
  3.     Layout = "~/Views/Shared/_Layout.cshtml";  
  4. } < link rel = "stylesheet"  
  5. href = "https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" / > < link rel = "stylesheet"  
  6. href = "https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" / > < link rel = "stylesheet"  
  7. href = "https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" / > < script src = "https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js" > < /script> < script src = "https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js" > < /script> < br / > < div id = "example"  
  8. class = "col-lg-3" > < div class = "demo-section k-content" > < input id = "employees"  
  9. style = "width: 100%;" / > < /div> < /div> < style type = "text/css" > .customer - photo {  
  10. display: inline - block;  
  11. box - shadow: inset 0 0 1 px #999, inset 0 0 10px rgba(0,0,0,.2);  
  12. margin: 0 10px 0;  
  13. width: 20px;  
  14. height: 20px;  
  15. border-radius: 50%;  
  16. background-size: 100%;  
  17. background-repeat: no-repeat;  
  18. vertical-align: middle;  
  19. }  
  20. </style>  
  21. <script>  
  22. $(document).ready(function () {  
  23. dataSource = new kendo.data.DataSource({  
  24.     transport: {  
  25.         read: {  
  26.             url: "/KendoUI/LoadEmployee",  
  27.             dataType: "json",  
  28.         }  
  29.     },  
  30.     group: {  
  31.         field: "Country"  
  32.     }  
  33. });  
  34. $("#employees").kendoMultiColumnComboBox({  
  35.     dataTextField: "Name",  
  36.     dataValueField: "ID",  
  37.     height: 400,  
  38.     columns: [{  
  39.             field: "ContactName",  
  40.             title: "Emp Name",  
  41.             template: "<div class='customer-photo'" + "style='background-image: url(../Content/Images/#:data.ImageName#.jpg);'></div>" + "<span class='customer-name'>#: Name #</span>",  
  42.             width: 170  
  43.         },  
  44.         //{ field: "Name", title: "Name", width: 120 },  
  45.         {  
  46.             field: "Role",  
  47.             title: "Role",  
  48.             width: 160  
  49.         }, {  
  50.             field: "Country",  
  51.             title: "Country",  
  52.             width: 90  
  53.         }  
  54.     ],  
  55.     footerTemplate: 'Total #: instance.dataSource.total() # items found',  
  56.     filter: "contains",  
  57.     filterFields: ["Name", "Country", "Role"],  
  58.     dataSource: dataSource,  
  59.     select: onSelect,  
  60. });  
  61.   
  62. function onSelect(e) {  
  63.     if (e.dataItem) {  
  64.         var dataItem = e.dataItem;  
  65.         alert("Name:" + dataItem.Name + " ,Country:" + dataItem.Country + ", Role: " + dataItem.Role + ", Id: " + dataItem.ID);  
  66.     }  
  67. };  
  68. });   
  69. < /script>  
Refer to the attached project for reference. I have attached the demonstrated project without a package.
 

Summary

 
In this article, we have seen how to group the MultiColumnComboBox values and work with events in ASP.NET MVC5 using Kendo UI and EF.
 
I hope it helps you out. Your valuable feedback and comments about this article are always welcome.


Similar Articles