Combox in Kendo grid

[Guest10]

I am new to Kendo UI and wanted to use Kendo grid inline editing .

 

Couple of columns in my grid  needs to have Combo box  for new record or update. I did not find any clear example on this.

Can you  please direct me to proper link or give an example on how to  use  combo box for inline editing.

 

Thanks for your help

[Eyup]

Hi,

The grid provides 2 ways of using combo/dropdown element in editing mode
1. ForeignKeyColumn
http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn
2. EditorTemplate
http://demos.telerik.com/aspnet-mvc/grid/editing-custom

If you want to use it in view mode, you can use ClientTemplate as demonstrated in the following section:
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-to-use-kendo-ui-widgets-inside-grid-client-column-templates

Now, let's explain the ForeignColumn when implementing dropdown editing for the grid component:
http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

Here is a sample:

Copy Code

Copy Code

columns.ForeignKey(p => p.ProductCategoryId,
    (System.Collections.IEnumerable)ViewData["ProductCategories"], "ProductCategoryId",
    "CategoryName").Title("Category").Width("300px");

The ViewData["categories"] or ViewBag.categories collection should hold the Data Source for the generated dropdown component in edit mode. This collection should be filled in the server with fields/properties/columns named exactly the same way for the corresponding Value and Text values. For example, they might be Code and Description (CategoryID and CategoryName).

The combo is loaded using the data coming from the ViewData or ViewBag collection. These collections are being popularized in the corresponding Controller action.

I hope this will prove helpful.

Regards,
Eyup
Telerik by Progress

[Guest10]

Thanks very much for the reply

[Guest10]

Eyup,

 

Thanks for the reply.

I do have some follow up questions on this

--------------------------------------------------------

In Custom Editor mode, You have the following code for  category.

.Model(model =>{ model.Id(p => p.ProductID); model.Field(p => p.ProductID).Editable(false); model.Field(p => p.Category).DefaultValue(ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);})

 

How does the values show up in edit mode. I don't' see any reference of  'categories' in the view file

I mean data is retrieved  in controller and stored in ViewData["categories"] = categories , but where does this get refered or bind happens

Also where is  Editing_Custom() called from

-------------------------------------------------------------

In Foreignkey column example. Do you expect  CategoryID to be defined as Foriegnkey column in productviewmodel.

columns.Bound(p => p.ProductName); columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName").Title("Category").Width(200); columns.Bound(p => p.UnitPrice).Width(200);

 

Thanks very much for your help

[Eyup]

Hi,

You will need to add the UIHint attribute in your model. This is explained in the last section here (Step 5):
http://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates

That should do the trick.

Regards,
Eyup
Telerik by Progress

[Guest10]

Eyup

Thanks for the reply.

Example you refered asks to create new view for dropdown field

Does it connects with Foreignkey attribute column. Can you refer to me example.

 

Thank you very much.

[Eyup]

Hi,

For foreignkey column you can check the following live sample:
http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

Also, you can check the View, Controller and Model corresponding to the Index page in the attached web site sample.

Regards,
Eyup
Telerik by Progress