Adding dropdown list to a grid column

[Stanley]

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?

[Chris]

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]

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.

[Rosen]

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

[Todd]

@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]

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

[chris]

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]

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

[chris]

Thanks Rosen,

All working now :-)

[freeTheCode]

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]

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]

Can I get an MVC razor example of this?

[freeTheCode]

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]

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]

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

[zia]

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]

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]

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