Grid DropDownList column - values in cell 'undefined' until I click on a cell

[Brian]

Hi - I'm just trying to include a dropdownlist as a column in my grid.  However, each field for ddl contactId is initially displayed as 'undefined' in the grid - as soon as I click on a contactId cell the correct contact is displayed, and as soon as I leave the cell the data reverts back to 'undefined' - I've looked at all the examples and in the forums - not sure what the problem is...any suggestions greatly appreciated 

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"
                        }
                    }           
                });
    }

[Vladimir Iliev]

Hi Brian,

 
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.

Kind Regards,
Vladimir Iliev
Telerik

[Brian]

Hi Vladimir

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? 

[Brian]

The Foreign Keys example here is better in the sense that the data for categories is separate from products, but it is still a local array rather than remote data being called...and when using the values option for the dropdownlist grid column, it seems that the key/value pairs must be named  'value'/'text'.  I want to have a separate dataSource with values of contactId and FullName to fill the dropdownlist...

[Vladimir Iliev]

Hi Brian,

 
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)

Kind Regards,
Vladimir Iliev
Telerik

[Brian]

OK both of these examples are again using arrays that you have already provided.  The foreign keys example (or using the values column option) requires an array in the form of 'value':'xxx', 'text:xxx'.  

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?

[Petur Subev]

Hello Brian,

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

[AppDev]

This demo is broken. The dropdown column no longer works AND you don't even include the damn template file in the example.

[Dimo]

Hello Travis,

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

[Neil]

 

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

[Silviya Stoyanova]

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

[Neil]

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.