Popup editing with dropdownlist not working properly

[Mathew]

The dropdown value when reflected back from the popup edit is showing [Object][Object]
Following shows the code
  http://jsbin.com/eyebub/4/edit

[Nikolay Rusev]

Hello Mathew,

The column field is TypeValue, but the model is defined as Type instead of TypeValue. This is the reason for the behavior.

Here is an updated sample:
http://jsbin.com/eyebub/8/edit

Regards,
Nikolay Rusev
the Telerik team

[Tinju]

Thanks for help 
But i have another question
On the code u send when i replaced 
<input name="TypeValue" 
data-bind="value:TypeValue" 
data-value-field="TypeValue" 
data-text-field="TypeValue" 
data-source="dropDownDataSource" 
data-role="dropdownlist" />
with this
<input name="TypeValue" 
data-bind="value:Value" 

I was able to get  
grid.dataItem(grid.select()).Value.TypeValue with the same value on save 

How is this working as Value is not a feild in the grid and in the model or source of the grid?

[Nikolay Rusev]

Hello Tinju,

Setting the following attribute: data-bind="value:Value" means that the DOM will populate from the value of Value field in the model and the same field will be updated on change of the DOM element.
 

All the best,
Nikolay Rusev
the Telerik team

[Ruben]

This example only works when dropdown has same text and value. In real life they different.

    var datavalue = [];
    datavalue.push({ TypeValue: "1", TypeText: "New" });
    datavalue.push({ TypeValue: "2", TypeText: "Important" });
    datavalue.push({ TypeValue: "3", TypeText: "Remark" });
    datavalue.push({ TypeValue: "4", TypeText: "Complaint" }); 

Do you know how to handle this case?

Thank you.

http://jsbin.com/tobucicuci/edit?html,output​

[Nikolay Rusev]

Hello Ruben,

 

There are various ways to implement this, however as both fields TypeValue and TypeText are part of the Grid data item you could do the following - track for changes in TypeValue field and update the other TypeText field.

 

Example - http://dojo.telerik.com/@rusev/EWEJe

 

Important bits from edit event handler:

 edit: function (e) {            
            var typeValueDropDown = $("[name=TypeValue]").data("kendoDropDownList");
            
            e.model.bind("set", function(e) {
              if (e.field == "TypeValue") {
                this.set("TypeText", typeValueDropDown.text());
              }
            });
},

 

 

Regards,
Nikolay Rusev
Telerik

 

 

[Ruben]

Thank you, Nikolay. It works like a charm.