Dropdown list was not loading for Inline Editable Kendo Grid

[Ashok]

Hi,

I want load dropdown list in a editable grid, I have used below approach. But List was not loading instead I am getting [object object] in textbox.

Can you please help me to find fault. 

I ma using Kendo 2025.3.825 version and it should compile with CSP.

ASP.NET MVC Grid Custom Editing Demo | Telerik UI for ASP.NET MVC

[Nikolay]

Hello Ashok,

The product chosen for this forum thread is Kendo UI for jQuery, however, the link point to the Telerik for ASP.NET MV. Which product are you using?

To help you resolve the issue with your DropDownList not loading correctly in the editable Kendo Grid and displaying [object Object] instead of the expected values, I need a bit more detail about your implementation. Please provide:

• The full configuration of your Kendo Grid, especially the dataSource and columns sections.
• A sample of the JSON data returned by your API for both the grid and the dropdown data.
• The code for your DropDownList editor function.

Based on the context and common causes, here are the main troubleshooting steps and recommendations:

1. DropDownList Configuration

• Ensure that dataTextField and dataValueField in the DropDownList editor match the properties of your dropdown data objects. For example, if your API returns:

  [
    { "PriceCodeID": 1436, "ShortCode": "REF3" },
    ...
  ]
  

  Use:

  dataTextField: "ShortCode",
  dataValueField: "PriceCodeID"
  

• Set valuePrimitive: true if your grid field holds only the primitive value (e.g., PriceCodeID). If your grid field holds the whole object, set valuePrimitive: false.

2. Grid DataSource Field Type

• If your grid’s data model field is defined as a primitive, like:

  ShortCode: { type: "number", defaultValue: null }
  

  Use valuePrimitive: true.
• If it holds an object:

  ShortCode: { defaultValue: { PriceCodeID: 1436, ShortCode: "REF3" } }
  

  Use valuePrimitive: false.

3. Correct DataSource Type

• Do not set type: "json" for the grid or dropdown dataSource. If you need to specify the transport type, use dataType: "json" instead.

4. CSP Compliance

• Ensure all scripts are in external files or use script blocks with a nonce. Avoid inline event handlers and eval-like code.

5. Grid Visibility When Data Is Empty

• With toolbar: ["create"], the grid should appear even if the initial data is empty, allowing you to add new records.

Example: DropDownList Editor Function

function shortcodeDropDownEditor(container, options) {
    $('<input required data-text-field="ShortCode" data-value-field="PriceCodeID" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: {
                transport: {
                    read: {
                        url: "http://localhost:53786/api/pricecodes/unique",
                        dataType: "json"
                    }
                }
            },
            dataTextField: "ShortCode",
            dataValueField: "PriceCodeID",
            valuePrimitive: true // Set according to your grid field type
        });
}

Regards,
Nikolay
Progress Telerik

[Ashok]

Thank you for response.

I am using Telerik for ASP.MVC,Actually we are migrating Telerik version 2021 to Telerik 2025. In old version we have implemented the dropdown template using below approach. 
ASP.NET MVC Grid Custom Editing Demo | Telerik UI for ASP.NET MVC

After upgrading to 2025 Telerik version the drop down was loading [object object] without any errors. 

Can you please help if I am missing something here. And also my code should not be CSP compliance(configured script-src: 'self').

Code snips:

 

 columns.Bound(p => p.Categories).ClientTemplate("#=Categories.Name# ");

 

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("CategoryId")
        .DataTextField("Name")
        .BindTo((System.Collections.IEnumerable)ViewData["categories"])
) 

 

[Nikolay]

Hi Ashok,

Here are some suggestions you can try.

Grid column (read‑only display)

- If Categories is a single object: 

keep ClientTemplate("#=Categories.Name#")

- If Categories is a list:

 ClientTemplate("#= Categories ? Categories.map(function(c){return c.Name;}).join(', ') : '' #")

- Use Deferred scripts for CSP.

Editor DropDownList (selecting a category)
- Use primitive binding to avoid [object Object]:

@(Html.Kendo().DropDownListFor(m => m.CategoryId)
    .DataTextField("Name")
    .DataValueField("CategoryId")
    .ValuePrimitive(true)
    .BindTo((IEnumerable<CategoryVm>)ViewData["categories"])
    .Deferred() // per-component defer (or global)
)
``

Feel free to share (or in a private support thread) the model, the Grid and DropDownList ediro declarations, and a sample response so I can have a better understanding of the case and advise further.

Regards,

Nikolay