Adding dropdown list to a grid column

2 Answers 4662 Views
Grid
This question is locked. New answers and comments are not allowed.
Stanley
Top achievements
Rank 1
Stanley asked on 27 Aug 2012, 07:55 PM
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 Answers, 1 is accepted

Sort by
0
Chris
Top achievements
Rank 1
answered on 27 Aug 2012, 08:37 PM

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"
         });
};
Stanley
Top achievements
Rank 1
commented on 28 Aug 2012, 11:33 AM

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.
0
Rosen
Telerik team
answered on 31 Aug 2012, 06:59 AM
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!
Todd
Top achievements
Rank 1
commented on 31 Aug 2012, 09:21 PM

@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.
Rosen
Telerik team
commented on 04 Sep 2012, 07:22 AM

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!
chris
Top achievements
Rank 1
commented on 11 Sep 2012, 11:58 AM

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
Rosen
Telerik team
commented on 12 Sep 2012, 11:36 AM

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!
chris
Top achievements
Rank 1
commented on 12 Sep 2012, 05:09 PM

Thanks Rosen,

All working now :-)
freeTheCode
Top achievements
Rank 1
commented on 12 Oct 2012, 01:22 PM

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.
Mike Kacos
Top achievements
Rank 1
commented on 15 Oct 2012, 01:21 PM

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.
jonathan
Top achievements
Rank 1
commented on 16 Oct 2012, 07:49 PM

Can I get an MVC razor example of this?
freeTheCode
Top achievements
Rank 1
commented on 16 Oct 2012, 08:01 PM

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
James
Top achievements
Rank 1
commented on 20 Feb 2013, 05:51 PM

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 ...
Rosen
Telerik team
commented on 21 Feb 2013, 10:11 AM

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!
zia
Top achievements
Rank 1
commented on 21 Mar 2013, 01:10 PM

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.

quoc huy
Top achievements
Rank 1
commented on 26 Dec 2014, 09:12 AM

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 ??????????
T. Tsonev
Telerik team
commented on 30 Dec 2014, 04:28 PM

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!
 
Tags
Grid
Asked by
Stanley
Top achievements
Rank 1
Answers by
Chris
Top achievements
Rank 1
Rosen
Telerik team
Share this question
or