Dropdown list in grid cell

8 posts, 0 answers
  1. Gary
    Gary avatar
    4 posts
    Member since:
    Oct 2014

    Posted 15 Dec 2015 Link to this post

    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. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2480 posts

    Posted 16 Dec 2015 Link to this post

    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
  3. Randy
    Randy avatar
    12 posts
    Member since:
    Sep 2016

    Posted 04 May 2017 in reply to Viktor Tachev Link to this post

    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. 

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2480 posts

    Posted 09 May 2017 Link to this post

    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.
  5. Randy
    Randy avatar
    12 posts
    Member since:
    Sep 2016

    Posted 25 Sep 2017 in reply to Viktor Tachev Link to this post

    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.

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2480 posts

    Posted 27 Sep 2017 Link to this post

    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.
  7. Randy
    Randy avatar
    12 posts
    Member since:
    Sep 2016

    Posted 27 Sep 2017 in reply to Viktor Tachev Link to this post

    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. 

  8. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2480 posts

    Posted 29 Sep 2017 Link to this post

    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.
Back to Top