Set other row cells values based on selected DropDownListItem in one cell

[Bernard]

Hi,

I'm trying to make a backoffice order editor using catalog with referenced products.

Basically i've a Grid with severals columns
- Product Picture
- Product Code
- Description
- Quantity
- Unit Amount
- VAT Rate
- Total Amount

Product Code editor is a DropDownList on which we can select the desired product.
After selecting product i need to set all others cells values on this row but i've no idea how to do that.

VAT Rate is a ForeingKey Column (DropDownList Editor)

Any help on this ?

Thanks in advance,
Best Regards.

[Alexander Valchev]

Hi Bernard,

To achieve this you should hook up to the change event of the DropDownList editor and use dataItem (grid), closest (jQuery) and set (model) methods. For example:

change: function() {
    var grid = $("#grid").data("kendoGrid"),
        model = grid.dataItem(this.element.closest("tr"));

    model.set("ProductName", "changed");
}

For your convenience I prepared a runnable sample which demonstrates the approach in action:

• http://jsbin.com/iZaSUMi/2/edit
  
  

Regards,
Alexander Valchev
Telerik

[Bernard]

Hi Alexander,

Thank you very well for you sample, it helps me a lot.

However, it seems to update only the first column of the first row, whatever i change the selected value of the dropdown in another row.

Maybe a problem with :

model = grid.dataItem(this.element.closest("tr"));

Thanks.

[Alexander Valchev]

Hi Bernard,

The problem occurs due to timing issues. At the time when change event handler is executed, the editable cell is already closed and associated HTML elements are not part of the DOM tree anymore.

I can suggest you another similar approach which I believe will fit in your needs. Instead of to the change event you may hook up to the select event. Also instead of set method, you should use the standard "=" operator to change the values.

select: function() {
    var grid = $("#grid").data("kendoGrid"),
        model = grid.dataItem(this.element.closest("tr"));

    model.ProductName = "changed";
    model.UnitPrice = 100;
}

For your convenience I updated previous sample:

• http://jsbin.com/iZaSUMi/7/edit
  
  

Regards,
Alexander Valchev
Telerik

[David]

Hello,

This solution has helped me greatly. Although I am running into a slight issue with this. After setting the changes to the model dataItem, the Kendo UI Grid does not display the changed values as per the sample.

The changed values will only display once I manually re-filter/re-sort a column. Do you have any ideas what might be causing this?

I am using Kendo UI for ASP.NET MVC for the dropdownlist, but using the same Jquery as the above.

Thank you.

[Boyan Dimitrov]

Hello David,

Updating a data item (model in the code snippet) using dot "." instead of set method will not refresh the Kendo UI Grid. The method refresh of the Kendo UI Grid should be called in order to render all table rows using the current data items.

Regards,
Boyan Dimitrov
Telerik by Progress