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

 

[Ashok]

My model is something like below.
public class StudentModel
 {
     public StudentModel()
     {
         this.Departments = new DepartmentsViewModel();
     }

     public StudentModel(QueueNumber queue)
     {
         this.Id = queue.Id;
         this.Name = queue.Name;
         this.Address = queue.Address;
         this.DepartmentsTable = new DepartmentsViewModel(queue.DepartmentsTable);

     }

     public int Id { get; set; }
     public string Name { get; set; }

     public string Address { get; set; }     
     public DepartmentsViewModel DepartmentsTable { get; set; }
 }

 [Serializable]
 public class DepartmentsViewModel
 {
     public DepartmentsViewModel()
     {
         DeptId = 0;
         DeptName = string.Empty;
     }

     public DepartmentsViewModel(DepartmentsTable departments) : this()
     {
         if (departments == null) return;
         DeptId = departments.DeptId;
         DeptName = departments.Name;
     }

     public int DeptId { get; set; }
     public string DeptName { get; set; }
 }

 

 

Can you please help on this.

             

[Nikolay]

Hi Ashok,

Based on your model structure and the migration to Telerik UI for ASP.NET MVC 2025, here’s how you can properly configure the Kendo Grid to use a DropDownList for editing the DepartmentsTable property and avoid issues like displaying [object Object]. I will also address CSP compliance and clarify the mapping between the selected department and your model.

1. Grid Column Configuration
Make sure the grid column is bound to the nested object, and use a custom editor template for editing:

columns.Bound(p => p.DepartmentsTable)
    .Title("Department")
    .EditorTemplateName("DepartmentDropDownEditor")
    .ClientTemplate("#=DepartmentsTable.DeptName#");

The ClientTemplate ensures the department name is displayed in read-only mode, not [object Object].

2. Editor Template Setup

Create an Editor Template at Views/Shared/EditorTemplates/DepartmentDropDownEditor.cshtml:

@model YourNamespace.DepartmentsViewModel

@(Html.Kendo().DropDownListFor(m => m.DeptId)
    .DataTextField("DeptName")
    .DataValueField("DeptId")
    .BindTo((IEnumerable<YourNamespace.DepartmentsViewModel>)ViewData["DepartmentsList"])
    .OptionLabel("- Select Department -")
    .ValuePrimitive(true) // Ensures only DeptId is bound
)

The ValuePrimitive(true) setting ensures that only the primitive value (DeptId) is bound, which prevents [object Object] display issues.
Make sure ViewData["DepartmentsList"] contains a flat list of DepartmentsViewModel objects.

3. Controller Preparation
Pass the department list to the view:

ViewData["DepartmentsList"] = GetDepartments(); // Returns IEnumerable<DepartmentsViewModel>

Ensure GetDepartments() returns objects with correct DeptId and DeptName properties.

4. Model Binding Clarification

When the user selects a department from the dropdown, only the DeptId property of DepartmentsTable will be updated. To map the selected DeptId back to a full DepartmentsViewModel object in your grid model, use a custom mapping in your controller after postback, for example:

// On postback, map DeptId to DepartmentsTable
student.DepartmentsTable = departmentsList.FirstOrDefault(d => d.DeptId == student.DepartmentsTable.DeptId);

5. Troubleshooting [object Object] Issue

If you still see [object Object], double-check:
- The ClientTemplate references the correct property (DeptName).
- The dropdown is configured with DataTextField and DataValueField matching your data.
- Use ValuePrimitive(true) if you want only the DeptId bound, or ValuePrimitive(false) if you want the whole object (rarely needed).

Regards,

Nikolay