Adding dropdown list to a grid column

Thread is closed for posting
18 posts, 0 answers
  1. Stanley
    Stanley avatar
    11 posts
    Member since:
    Aug 2012

    Posted 27 Aug 2012 Link to this post

    I need to add a dropdown list to a grid that gets populated with data not in the data set the grid itself is being bound to.   I've been through the samples and forums and have yet to find anything that actually works.   Can a column that is independent of the data source being used to populate the rest of the grid be included in the grid?
  2. Chris
    Chris avatar
    2 posts
    Member since:
    May 2012

    Posted 27 Aug 2012 Link to this post

    Have you tried defining a second dataset for the dropdown?

    var gridDataSource = new kendo.data.DataSource ({
             ......
    });
     
    var dropdownDataSource = new.kendo.data.DataSource({
          ...........
    )};
     
    $('griddiv').kendoGrid({
         dataSource: gridDataSource,
        ...
     
    });
     
    function dropDownEditor(container, options) {
    $('<input data-text-field="Description" data-value-field="ID" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
               .kendoDropDownList ({
                      dataSource: dropdownDataSource,
                      dataTextField: "Description",
                      dataValueField:"ID"
             });
    };
  3. Kendo UI is VS 2017 Ready
  4. Stanley
    Stanley avatar
    11 posts
    Member since:
    Aug 2012

    Posted 28 Aug 2012 Link to this post

    Sorry, but the documentation for Kendo is insufficient to allow me to understand your response.   I don't understand what the javascript function you wrote does, or where I would even call it from.

    I have tried loading a second data source from the controller (using MVC4) into a drop down defined in a template, but that did nothing - showed no content.     But it did work when I configured a dropdown the same way externally to the grid.
  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 31 Aug 2012 Link to this post

    Hi Stanley,

    Please refer to this online demo which demonstrates how to use a KendoUI DropDownList widget as custom editor. Note that the DropDownList widget has a separate DataSource.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Todd
    Todd avatar
    26 posts
    Member since:
    Sep 2012

    Posted 31 Aug 2012 Link to this post

    @Telerik - The demo you keep posting to for dropdowns in a grid cell is a terrible example.  The dropdown items don't have an "ID"  like most every real-world scenario....the data-text AND data-value fields both point to the text/description.  This is silly.  How about showing how we could show the text in the cell, but keep track of the ID and send back the ID to the server for inserts/updates; which is the real-world scenario for dropdowns.
  7. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 04 Sep 2012 Link to this post

    Hi Todd,

    You can use the same approach as shown in the demo when using the ID. However, you will need to use a template for the column in order to display the actual text value when not in edit mode. Here you can find simple test page.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. chris
    chris avatar
    11 posts
    Member since:
    Nov 2011

    Posted 11 Sep 2012 Link to this post

    Hi Rosen

    I under stand the test page you posted.  But how do i bind to a json call data?

    $('<input name="LocationName" data-bind="value:' + options.field + '"/>')
                            .appendTo(container)
                            .kendoDropDownList({
                                dataTextField: "LocationName",
                                dataValueField: "LocationId",
                                autoBind: false,
                                optionLabel: "Select Location",
                                dataSource: new kendo.data.DataSource({
                                    transport: {
                                        read: {
                                            url: "/api/location/GetLocationList",
                                            dataType: "json"
                                        },
                                        schema: {
                                            model: {
                                                id: "LocationId",
                                                value: "LocationName"
                                            }
                                        }
                                    }
                                })
                            });
                    }

    i have the following in the column value 

    { field: "LocationId", width: "150px",  title: "Location", editor: onDrpLocation },

    and in the model

     LocationId: { editable: true, nullable: false, validation: { required: true } },

    It works fine apart from the id is displayed when not editing, i need to display the location name.

    Can i use a template , to look this value up.?

    kind regards chris
  9. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 12 Sep 2012 Link to this post

    Hello chris,

    In this case you should retrieve the data prior binding the Grid. Here is a modified version of the previous sample.

    Greetings,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. chris
    chris avatar
    11 posts
    Member since:
    Nov 2011

    Posted 12 Sep 2012 Link to this post

    Thanks Rosen,

    All working now :-)
  11. freeTheCode
    freeTheCode avatar
    4 posts
    Member since:
    Jan 2012

    Posted 12 Oct 2012 Link to this post

    The posted example clearly does not match the source code being displayed for this particular GRID example
    http://demos.kendoui.com/web/grid/editing-custom.html

    When you select the CSHTML source file, the displayed code is simply nothing to do with the displayed example.
    I'm trying to use a DropDown column in the Grid inline edit and so far can't find a good example.

    Common guys, if you are going to post examples,  the least you could do is post the actual code.
  12. Mike Kacos
    Mike Kacos avatar
    28 posts
    Member since:
    Sep 2009

    Posted 15 Oct 2012 Link to this post

    freeTheCode is correct.  The example for the CSHTML source (The only one I'm interested in) doesn't match the example above it.  The poor documentation on Kendo is making our development team seriously question whether we should go forward on a project using it.
  13. jonathan
    jonathan avatar
    8 posts
    Member since:
    May 2012

    Posted 16 Oct 2012 Link to this post

    Can I get an MVC razor example of this?
  14. freeTheCode
    freeTheCode avatar
    4 posts
    Member since:
    Jan 2012

    Posted 16 Oct 2012 Link to this post

    Another user replied on a different forum posting that the example is complete when you download the MVC example code.
    If like me, you were stuck without any useful info, I found that looking through the example code downloaded, shows a lot on how to do this.

    Bottomline is it is a bit involved but straightforward. I think looking at the example code not the hosted site example offers the best insight. Hope that helps.

    http://www.kendoui.com/forums/mvc/grid/how-to-use-combobox-in-a-grid-cell.aspx
  15. James
    James avatar
    5 posts
    Member since:
    Jan 2013

    Posted 20 Feb 2013 Link to this post

    TELERIK ...

    THIS IS TOTALLY UNACCEPTABEL!!!!

    You were told in OCTOBER 2012 that this code demo is fundamentally wrong, the code does not match the demo it's now nearly MARCH 2013 and that code demo is STILL online and thorough broken ...

    In fact your documentation is frankly shocking at the best of times but this frankly takes the biscuit.

    FIX IT, my company has paid a LOT of money for your controls and UI bits ...
  16. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 21 Feb 2013 Link to this post

    Hi James,

    Indeed, the versions of the example code for the separate technologies in this demos does not match to each other. This is due to the fact that the ASP.NET MVC and JSP code is taken from the corresponding offline demos. Which can be found in the distributions of KendoUI for ASP.NET MVC and KendoUI for JSP. Although, we are trying to make demos for different technologies as close as possible (and currently working on consolidating the examples), in some cases this is not possible as different approach is required depending on the toolset at hand.

    Thus, in order to get more detailed view of this demo's ASP.NET MVC version, please refer to the offline demos accompanying the product, as well as this help article on Editor templates.

    Greetings,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. zia
    zia avatar
    1 posts
    Member since:
    Feb 2013

    Posted 21 Mar 2013 Link to this post

    my grid is unable to show me neither selected value nor selected text of dropdownlist but it displays [object Object]. I have done all you guys have posted in examples and updated contents. please guide me how i  can bind selected items text to grid cell and selected value in its associated foreign key column.

    I stringify the javascript object '[object Object]' it was some thing like this.
    {"GroupId":2,"GroupName":"Group1","GroupDescription":null}

    field defenition in Schema model is here
    GroupId: { field: "GroupId", defaultValue: 1 }

    here is dropdown in editor

                    { field: "GroupId", title: "Report Group"
                        ,editor: function (container, options) {
                            $('<input id="Group" data-text-field="GroupName" data-value-field="GroupId" data-bind="value:' + options.field + '"/>')
                            .appendTo(container)
                            .kendoDropDownList({
                                dataTextField: "GroupName",
                                dataValueField: "GroupId",
                                dataSource:{
                                    transport: {
                                        read: "http://localhost:18254/api/User/GetReportGroup"
                                    }
                                }
                            })
                        }
                       , template: "#=ReportGroupId#"
                    }
    Thanks in advance.

  18. quoc huy
    quoc huy avatar
    1 posts
    Member since:
    Dec 2014

    Posted 26 Dec 2014 Link to this post

    I also, I need to add a button ("new") in header dropdownlist to a grid.   I've been
    through the samples and forums and have yet to find anything that
    actually works. When I click buttoon -> show one popup, i cant insert one new item of dropdownlist. After dropdownlist will reload this item in grid.
    But when I click button Update on grid then grid not loaded this item.

    Can you help me ??????????
  19. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 30 Dec 2014 Link to this post

    Hi,

    Can you please elaborate on the issues that you're facing in a separate forum thread?
    This will help keeping the discussion focused.

    We'll appreciate code samples or a running snippet in the Kendo Dojo.

    Happy holidays!

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready