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

6 posts, 0 answers
  1. Bernard
    Bernard avatar
    9 posts
    Member since:
    Jan 2012

    Posted 29 Aug 2013 Link to this post

    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.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 02 Sep 2013 Link to this post

    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:

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Bernard
    Bernard avatar
    9 posts
    Member since:
    Jan 2012

    Posted 04 Sep 2013 Link to this post

    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.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Sep 2013 Link to this post

    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:

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. David
    David avatar
    1 posts
    Member since:
    Jul 2016

    Posted 10 Aug in reply to Alexander Valchev Link to this post

    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.

  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 12 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready