Working with kendo multi column Combobox in MVC

In this article, we will discuss how to working with kendo multi column Combobox in MVC with SQL server we will implementing this example

Steps For Implementing multi column Combobox

1. Create a new Asp.Net MVC Project
2. Create a new table in SQL Server
3. Add entity Framework
4. implementing the control and view

Create a new Asp.net MVC Project

Go to the visual studio ⭢ file ⭢ new ⭢ project ⭢ select Asp.net web Application and enter a name like multicolumnCombobox ⭢ ok

Create a new table in SQL server

Go to SQL server create a table name like product following given query

CREATE TABLE [dbo].[Product](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[ProductName] [nvarchar](50) NOT NULL,
	[SupplierId] [int] NOT NULL,
	[UnitPrice] [decimal](12, 2) NULL,
	[IsDiscontinued] [bit] NOT NULL
) ON [PRIMARY]
GO

insert some dummy data in the product table

insert into Product (ProductName,SupplierId,UnitPrice,IsDiscontinued)values('Uncle Bobs Organic Dried Pears',3,30.00,0)
insert into Product (ProductName,SupplierId,UnitPrice,IsDiscontinued)values('Northwoods Cranberry Sauce',3,40.00,0)
insert into Product (ProductName,SupplierId,UnitPrice,IsDiscontinued)values('Mishi Kobe Niku',4,97.00,1)
insert into Product (ProductName,SupplierId,UnitPrice,IsDiscontinued)values('Ikura',4,31.00,0)

Add entity Framework

Go to visual studio Add Ado.Net entity data Model

Implementing the control and view

In Homecontroller by using ProductDBEntities context we will return the product result as JSON format to view

 public class HomeController : Controller
    {
        private ProductDBEntities objproductDBEntities;
        public HomeController()
        {
            objproductDBEntities = new ProductDBEntities();
        }
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetAllProducts()
        {
            return Json(objproductDBEntities.Products.ToList(), JsonRequestBehavior.AllowGet);
        }
    }

products JSON results we will bind the kendo grid data source by using jquery, we want to require some external CDN’s for implementing kendo multi column Combobox in MVC

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" 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>

View Implementing

@{
    ViewBag.Title = "Index";
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" 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 />
<script type="text/javascript">
    $(document).ready(function () {
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Home/GetAllProducts",
                    dataType: "json"
                }
            }
        });

        $("#divproducts").change(function () {
            alert($("#divproducts").val());
        });

        $("#divproducts").kendoMultiColumnComboBox({
            dataTextField: "ProductName",
            dataValueField: "Id",
            height: 450,
            columns: [
                {
                    field: "ProductName",
                    title: "ProductName",
                    width: 150
                },
                {
                    field: "SupplierId",
                    title: "SupplierId",
                    width: 150
                },
                {
                    field: "UnitPrice",
                    title: "UnitPrice",
                    width: 150
                }
            ],
            filter: "contains",
            filterFields: ["ProductName", "SupplierId", "UnitPrice"],
            dataSource: dataSource
        });

    });

</script>
<h2>MultiColumn Dropdown List</h2>
<div class="col-md-3">
    <div id="divproducts" style="width: 100%">
    </div>
</div>

Run the Application Thanks..

• Author
• Recent Posts

DuttaluruVijayakumar

hello ! my name is Duttaluru Vijay.i am working in Microsoft .net technologies since 2016.
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more

Latest posts by DuttaluruVijayakumar (see all)

• How to create dynamic form fields using jQuery - January 4, 2021
• What is CTS (Common Type System) in .Net - October 16, 2020
• What is main method in c# - October 13, 2020