Thanks a lot
initGrid: function (eventId) {
$("#gridInvitations").kendoGrid({
autoBind: true,
editable: true,
columns:
[{ field: 'invitationId', title: 'invitationId', width: "100px", hidden: false },
{ field: 'eventId', title: 'eventId', hidden: false },
{
field: "contactId",
title: "Contact",
width: "225px",
editor: INV.contactDropDownEditor,
template: "#=contactId.FullName#"
},
{ field: 'inviteSentDate', title: 'Invitation Sent', format: "{0: yyyy-MM-dd HH:mm:ss}" },
{ field: 'rsvpStatus', title: 'RSVP', hidden: false },
{ field: 'rsvpDate', title: 'RSVP Date', format: "{0: yyyy-MM-dd HH:mm:ss}" },
{ field: 'rsvpComments', title: 'RSVP Comments' }
],
dataSource: INV.createGridDataSource()
});
},
createGridDataSource: function (eventId) {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/invitations/invitations.svc/tblInvitations",
dataType: "json"
}
},
schema: {
data: "d"
}
});
return dataSource;
},
contactDropDownEditor: function (container, options) {
$('<input name="contactId" required data-text-field="FullName" data-value-field="contactId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
transport: {
read: {
url: "/contact/contacts.svc/contacts_getList",
dataType: "json"
}
},
schema: {
data: "d"
}
}
});
}
11 Answers, 1 is accepted
Could you please provide some sample data that is returned from the server for the Grid and the DropDownList? This would help us pinpoint the exact reason for this behavior.
Also I would suggest to check this demo as it demonstrates the exact same scenario.
Vladimir Iliev
Telerik

I have viewed the example you suggested and it's really not structured in the best way...the data option in the DataSource is set to an array which contains a second array for Category:
var products = [{
ProductID : 1,
ProductName : "Chai",
SupplierID : 1,
CategoryID : 1,
QuantityPerUnit : "10 boxes x 20 bags",
UnitPrice : 18.0000,
UnitsInStock : 39,
UnitsOnOrder : 0,
ReorderLevel : 10,
Discontinued : false,
Category : {
CategoryID : 1,
CategoryName : "Beverages",
Description : "Soft drinks, coffees, teas, beers, and ales"
}
}
This doesn't really reflect how data will be normally retrieved, especially using ADO.NET Entity Data Model and WCF Data Services. In my case the data that I want for the contact field (contactId and a concatenation of LastName, FirstName and MiddleName as FullName) is not included in the dataSource to be used for the grid - I want to have a second DataSource that calls a stored procedure to create the list to be used.
Can you explain how I would do this?

Basically the values in the ForeignKeyColumn demo can be get from remote source using Ajax request and then you can use them to supply the dataSource of the editor as well. For convenience I created two small jsBin demos based on the provided information which you can use as a baseline to achieve the desired behavior:
- The model contains nested object that should be updated by the DropDownList
- The model contains only the "contactId" field (ForeignKeyColumn)
Vladimir Iliev
Telerik

Elsewhere on my page I have a dataSource that contains the same data that the column should contain - a list of contacts with the structure 'contactId': 'xxx', 'FullName': 'xxx'
var dataSourceContacts = new kendo.data.DataSource({
transport: {
read: {
url: "/contact/contacts.svc/contacts_getList",
dataType: "json"
}
},
schema: {
data: "d"
}
}
});
I use it to populate a combo box as follows:
$('#ddlCombo').kendoComboBox({
autoBind: false,
dataTextField: "FullName",
dataValueField: "contactId",
type: "odata",
dataSource: dataSourceContacts
}
I would like to use the same dataSource and structure for the drop down grid column, but the only way I can figure out how to show the FullNames in the grid column is to return a second dataSource in the structure 'value':'xxx', 'text:xxx' and assign it to the values option:
$("#gridInvitations").kendoGrid({
autoBind: true,
editable: true,
toolbar: [
{ name: "create" },
{ name: "save" },
{ name: "cancel" }
],
columns:
[{ field: 'invitationId', title: 'invitationId', width: "100px" },
{ field: 'eventId', title: 'eventId' },
{
field: "contactId",
title: "Contact",
width: "225px",
values: CON.getContactsArray(), <--Here is where I get and return data formatted as {value:contactId, text: FullName}
hidden: false
},
.
.
.
I don't think that I should have to have provide two separate dataSources and structures to provide the same list of data to two different components...is there any way to display the FullName in place of the contactId value in the grid using only the first dataSource that provides the array contactId:xxx, FullName:xxx rather than value:xxx, text;xxx?
I am afraid this is not possible using shared dataSource - you will need at least two different dataSources (you can use common array object to initialize them).
This is needed because if using shared dataSource the change event of the dataSource will be triggered each time you open the DropDownList and thus the Grid will react and rebind itself which will cause the DropDownList editor to disappear.
Kind Regards,
Petur Subev
Telerik

This forum thread links to three different examples of using a DropDownList editor inside a Grid. It is not clear which one you are referring to as not working.
On the other hand, your support history suggests that you are using UI for ASP.NET MVC. From this point of view, the relevant examples are the following:
http://demos.telerik.com/aspnet-mvc/grid/editing-custom
http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn
I tested both of them and confirm they work as expected. Indeed, the editor template file is not showcased, but you can inspect it by running the offline MVC demos locally. The demo site is part of the UI for ASP.NET MVC installer and the editor template file for the Custom Editor demo is Views/grid/EditorTemplates/ClientCategory.cshtml
@model Kendo.Mvc.Examples.Models.CategoryViewModel
@(Html.Kendo().DropDownListFor(m => m)
.DataValueField(
"CategoryID"
)
.DataTextField(
"CategoryName"
)
.BindTo((System.Collections.IEnumerable)ViewData[
"categories"
])
)
The DropDownList editor for the Foreign Key Column is autogenerated and there is no specific template for it.
In case you need more information or assistance, please open a new forum thread or support ticket targeted specifically at UI for ASP.NET MVC. Thank you.
Regards,
Dimo
Telerik by Progress

Following this demo, i still have mine 'undefined'.. but when i click the Edit button, the row is filled with the Text.
https://demos.telerik.com/kendo-ui/grid/editing-custom
Hello Neil,
The reason for receiving "undefined" for cells that use a drop-down list could be used property that doesn't exist. For your convenience, I slightly modified the dojo example below by changing the name of the column template to "CategoryNameNotExisting". You could notice that this way on initial load the cells are filled with "undefined" items. On the other hand, the categoryDropDownEditor has its own dataSource and this is why on edit mode the cells get data items.
https://dojo.telerik.com/@Silvia/AxeyuvEd
You could also find the following documentation helpful:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.template
https://docs.telerik.com/kendo-ui/controls/data-management/grid/editing/editing#defining-fields-through-schema
If the issue you have described still persists could you please provide us with a runnable dojo example or modify the above for further investigation.
Thank you,
Regards, Silviya Stoyanova Progress Telerik

I figured out why is that so. I thought the #=Category.CategoryName# refers to the dataTextField of the dropdownlist, where it should come from the model(with reference to the demo example).. I refactored my viewmodel, so that it would display the "CategoryName" properly. Thanks.