Get data from database to combobox using KendoUI for MVC3

Question

I'm using MVC3 with KendoUI.

I can retrieve the data by passing values to combobox manually, and could see the values in the combobox when executed.

This is by passing values manually

            $("#input").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                        { text: "Cotton", value: "1" },
                        { text: "Polyester", value: "2" },
                        { text: "Cotton/Polyester", value: "3" },
                        { text: "Rib Knit", value: "4" }
                    ],
                filter: "contains",
                suggest: true,
                index: 3
            });

Now I need to retrieve data from SQL Server 2008.

Say my Table name is Products

---

Product Name <-- This is my column Name followed by the values in it. abc def ghi

How can I do this ?

I'm very new to this KendoUI and also to MVC.

Please Help

Thanks,

Answer 1

Yo mate,

The client side configuration of the combobox should be very similar to this one. http://demos.kendoui.com/web/combobox/remotedatasource.html

eg

<script>
  jQuery("#products").kendoComboBox({
    "dataSource": {
        "transport": {
            "read": {
                "url": "/razor/web/Home/GetProducts",
                "data": function() {
                    return kendo.ui.ComboBox.requestData("#products");
                }
            }
        },
        "serverFiltering": true,
        "filter": [],
        "schema": {
            "errors": "Errors"
        }
    },
    "dataTextField": "ProductName",
    "dataValueField": "ProductID",
    "filter": "contains"
});​
</script>

With such configuration from the sever method you need to create an action method which returns JsonResult and the most important part is that each object in the collection should include properties with names ProductName and ProductID representing the name and id used for the Combo.

public JsonResult GetProducts(string text)
    {
        var northwind = new NorthwindDataContext();


        var products = northwind.Products.Select(product => new ProductViewModel
        {
            ProductID = product.ProductID,
            ProductName = product.ProductName,
            UnitPrice = product.UnitPrice ?? 0,
            UnitsInStock = product.UnitsInStock ?? 0,
            UnitsOnOrder = product.UnitsOnOrder ?? 0,
            Discontinued = product.Discontinued
        });

        if (!string.IsNullOrEmpty(text))
        {
            products = products.Where(p => p.ProductName.Contains(text));
        }

        return Json(products, JsonRequestBehavior.AllowGet);
    }