Heirachy Grid editing set dependent row values

4 posts, 0 answers
  1. Chris
    Chris avatar
    5 posts
    Member since:
    Sep 2014

    Posted 16 Sep 2014 Link to this post

    I have a Heirachy Grid where there are columns in the sub-grid that have dependencies on each other. So for I have done these as a set of Cascading DropDownLists. This is using EditorTemplates for each of the DropDownLists as they need to get their content via an Ajax Read. I am using Inline editing on the grids.

    However the last item in the cascade will only ever have one value available so it would be better just to make this a non-editable/readonly column and set this when the other selections have been made.

    I have looked at the following example that uses the Select event of the drop down list then sets other columns in the same grid however I don't know the grid name (highlighted). How can this work with a Heirachy grid.

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

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











  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 18 Sep 2014 Link to this post

    Hello Chris,

    You can use just the same approach as you did for the row.

    var grid = this.element.closest(".k-grid")


    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Chris
    Chris avatar
    5 posts
    Member since:
    Sep 2014

    Posted 19 Sep 2014 in reply to Petur Subev Link to this post

    Thank you for the information. 

    The value however would not set/update the grid. We have now changed to using In Cell mode of editing and I have now got it working with the code below.

        function Selected(e) {
            var grid = this.element.closest(".k-grid").data("kendoGrid");
            var model = grid.dataItem(this.element.closest("tr"));
            var newValue = this.dataItem(e.item.index());
            var filter = {
                filter1: model["Item1"],
                filter2: newValue.Value
            };
            $.ajax({
                url: "@Url.Action("GetItem3", "Home")",
                data: filter,
                type: 'POST',
                success: function (data)
                {
                    model.Item3 = data;
                    grid.refresh();
                }
            });
        }

    However if I leave out the highlighted line (grid.refresh();) the data model is updated but the displayed value does not change, if I include it the data model and displayed value changes BUT I loose the edited indicator on all other cells in the grid.

    How can I have dependent cells correctly update and not loose the 'dirty' markers.




  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 22 Sep 2014 Link to this post

    Hello Chris,

    I am afraid it is not possible to keep the dirty indicator out-of-the-box, the Grid/DataSource does not save any information what property is marked as dirty - the Grid simply adds it after it closes the cell that was in edit mode. The only work-around would be to integrate some kind of a work-around into your case like this one:

    http://www.telerik.com/support/code-library/preserve-the-dirty-indicator-in-incell-editing-and-client-operations

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top