Dropdown list in grid cell

2 Answers 5382 Views
Grid
Gary
Top achievements
Rank 1
Gary asked on 15 Dec 2015, 07:56 PM
Hello,
I am looking for information on how to add a dropdown box to an MVC specific grid control. I need the box to display in a cell and show when the grid is rendered. Do you know of a sample or have example code available?

Thanks 

2 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 16 Dec 2015, 03:17 PM
Hello Gary,

Check out the following online example that illustrates how you can have a custom editor in the grid widget.


Also, the article below describes using custom editor in more detail:



Regards,
Viktor Tachev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Randy
Top achievements
Rank 1
commented on 04 May 2017, 09:35 PM

Victor,

 

Can you give me the link to the GitHub repo? I'm trying to solve the same problem, and I'm not having any luck. 

Randy
Top achievements
Rank 1
commented on 25 Sep 2017, 04:14 PM

Hello Viktor, 

I've circle back around to this issue as I have never been able to resolve it. Currently I am attempting to stuff a different dropdown list per row item in the grid. Is this possible? For example, imagine Grid A, has 2 rows.

Imagine Row 1, has student Jim Beam. Jim Beam has order magazine "zz". Magazine "zz" has a default quantity of 12, but Jim would like to order 36, the maximum allowed for magazine "zz".

Now, Row 2, has the same Student, but this time Jim wants to order magazine "qq". Jim has only ordered 1 of these, but he would like to order 49 more, the maximum allow for this magazine. 

As you can see, I have a one (student) to many(the types of magazines) to many(the different quantities ) relationship. With this in mind is it possible to create a grid that allows this relationship?

The documentation and the code examples provided work under the assumption that the user will be using the same "categories" over and over again. 

 

Thanks.

Viktor Tachev
Telerik team
commented on 27 Sep 2017, 02:17 PM

Hi Randy,

In order to implement the behavior you can use an approach similar to the following. Bind the first Grid column to a field called Name for example. The second column will be bound to the field Magazine that can hold the magazine associated to the current record. There can be a Magazines field in the model containing all magazine types. The last field can be Quantity containing the number of ordered magazines. 

Essentially the second column would be configured like Category in the example linked below:


As for the quantity - you can use custom validation and implement logic like in the following example.
 


Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Randy
Top achievements
Rank 1
commented on 27 Sep 2017, 05:31 PM

This doesn't work. I need to be able to put a List<int> or a List<SelectListItem>. Is this possible? bear in mind that this cannot be done on page load because each of the aforementioned are tied to an id. So the binding happens on the Read().

 

Thanks. 

Viktor Tachev
Telerik team
commented on 29 Sep 2017, 10:31 AM

Hello Randy,

The DataSource component was designed to work with flat data. Thus, if you would like to bind some of the columns to a collection of items I would recommend using a custom editor and binding it as illustrated in the custom editor demo

The Category field in the model from the example is decorated with UIHint attribute. This attribute points to the custom editor that would be used for the field. 


[UIHint("ClientCategory")]
public CategoryViewModel Category
{
    get;
    set;
}


The ClientCategory editor is a partial view located in the /Views/EditorTemplates folder. It looks like below:


@model Kendo.Mvc.Examples.Models.CategoryViewModel
 
@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("CategoryID")
        .DataTextField("CategoryName")
        .BindTo((System.Collections.IEnumerable)ViewData["categories"])
)


However, you can configure the editor to request the data from a remote service. The dropdown editor configuration would be similar to the one in the following example.



Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Viktor Tachev
Telerik team
answered on 09 May 2017, 08:59 AM
Hello Randy,

There is a GitHub repository with examples for various scenarios for the components. If you would like an example for using custom editors you would find the one linked below interesting. Note that it also illustrates how you can define a custom popup editor.



Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Gary
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or