This is a migrated thread and some comments may be shown as answers.

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

11 Answers 449 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 26 Jul 2013, 02:25 PM
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"
                        }
                    }           
                });
    }

11 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 30 Jul 2013, 02:01 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
answered on 30 Jul 2013, 07:15 PM
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? 
0
Brian
Top achievements
Rank 1
answered on 31 Jul 2013, 12:28 PM
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...
0
Vladimir Iliev
Telerik team
answered on 01 Aug 2013, 09:08 AM
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:


Kind Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
answered on 01 Aug 2013, 06:51 PM
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?
0
Petur Subev
Telerik team
answered on 05 Aug 2013, 02:30 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
AppDev
Top achievements
Rank 1
answered on 16 Nov 2016, 12:42 PM
This demo is broken. The dropdown column no longer works AND you don't even include the damn template file in the example.
0
Dimo
Telerik team
answered on 17 Nov 2016, 04:19 PM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Neil
Top achievements
Rank 1
answered on 27 Feb 2020, 10:56 AM

 

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

0
Silviya Stoyanova
Telerik team
answered on 02 Mar 2020, 01:29 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Neil
Top achievements
Rank 1
answered on 03 Mar 2020, 04:16 AM

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.

Tags
Grid
Asked by
Brian
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Brian
Top achievements
Rank 1
Petur Subev
Telerik team
AppDev
Top achievements
Rank 1
Dimo
Telerik team
Neil
Top achievements
Rank 1
Silviya Stoyanova
Telerik team
Share this question
or