kendo multi column Combobox in MVC

Updated : Oct 28, 2019 in Articles

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

kendo multi column Combobox in MVC
kendo multi column Combobox in MVC

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

kendo multi column Combobox in MVC
kendo multi column Combobox in MVC

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

Add Ado.Net entity data  Model
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..

Like
Like Love Haha Wow Sad Angry

Subscribe
Notify of
guest
13 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Freebies Stuff
January 28, 2020 4:03 am

As I web site possessor I believe the content matter here is rattling excellent , appreciate it for your efforts. You should keep it up forever! Good Luck.

Ajay
Ajay
February 19, 2020 9:57 am

I do not even understand how I ended up here, however I assumed this publish used to be great. I don’t understand who you might be but definitely you’re going to a well-known blogger if you are not already 😉 Cheers!

Google
March 19, 2020 7:41 pm

Usually posts some extremely interesting stuff like this.

Al Loughry
April 2, 2020 3:13 pm

Bookmarked!, I really like your web site!

Google
April 4, 2020 7:06 am

Here is a superb Blog You might Obtain Fascinating that we encourage you to visit.

Coy Bestwick
April 9, 2020 1:29 pm

First time visiting your website, I love your blog!

Angeline Mciff
April 10, 2020 8:22 pm

Bookmarked!, I like your blog!

Rickey Vogelsberg
April 16, 2020 8:25 pm

Bookmarked!, I enjoy your web site!

Google
April 18, 2020 5:18 am

One of our guests lately advised the following website.

Eliseo Mccombs
April 18, 2020 4:58 pm

First time visiting your website, I love it!

Albert Jovanovich
April 19, 2020 2:55 am

tҺe website іѕ really good, I love your website!

Google
April 30, 2020 7:26 am

Usually posts some quite fascinating stuff like this

Google
April 30, 2020 9:06 am

Here are a number of the sites we recommend for our visitors.

13
0
Would love your thoughts, please comment.x
()
x