Item change on row needs to update another control on that same row

[Web Support]

Hi,

I have two drop downs on a row in the Kendo UI grid, the user is only allowed to have one selected at a time. Therefore I need to handle a change event on either of the drop downs to - 

1) Identify which drop down the event is coming from
2) Alter the data/dom of the other drop down to be empty. 

I've had a few attempts and can't come up with anything clean. I think my ideal solution would be to update the grid datamodel on the client side and get it to rebind. I've trying altering it on the ajax update call but that means reading the entire contents again (or does it?)

Anyway I hope you get the drift, here is how my grid looks at the moment - 

@(Html.Kendo().Grid<Forth.AE.Web.ModelViews.Step6MV>()
                            .Name("Grid")
                //.ClientEvents(events => events.OnEdit("Grid_onEdit"))
                            .Columns(columns =>
                            {
                                columns.Bound(p => p.MyID).Title("MyID").Visible(false);
                                columns.Bound(p => p.DropDown1).ClientTemplate("#=ModelItem1.DropDown#").Width(250);
                                columns.Bound(p => p.DropDown2).ClientTemplate("#=ModelItem2.DropDown#").Width(250);
                            })
                            .Editable(editable => editable.Mode(GridEditMode.InCell))
                            .Sortable()
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .AutoSync(true)
                                .Batch(true)
                                .PageSize(200)
                                .ServerOperation(false)
                                .Events(events => { events.Change("onChange"); })
                                .Events(events => events.Error("error_handler"))
                                .Model(model =>
                                {
                                    model.Id(p => p.MyID);
                                    model.Field(p => p.DropDown1).DefaultValue(
                                        ViewData["defaultDD"] as Forth.AE.Web.ModelViews.DDModel);
                                    model.Field(p => p.DropDown2).DefaultValue(
                                        ViewData["defaultDD"] as Forth.AE.Web.ModelViews.DDModel);
                                })
                                .Read(read => read.Action("Grid_Read", "Grid"))
                                .Update(update => update.Action("Grid_Update", "Grid"))
                             )
        )

and I'm using this EditorTemplate - 

@model Forth.AE.Web.ModelViews.DDModel

@(Html.Kendo().DropDownListFor(m => m)
            .DataValueField("ID")
            .DataTextField("DropDown")
            .BindTo((System.Collections.IEnumerable)ViewData["myValues"])
            .Events(e =>
            {
                e.Change("Change");
            })
            .Events(e =>
            {
                e.Select("Select");
            })
)

As you can see I'm trying to hook up to the Change or Select events but the information that is passed through to the javascript function looks like I need to traverse the DOM and start hacking at it. 

Is there a cleaner way I can do what is needed? Any suggestions mooooore than welcome!

[Atanas Korchev]

Hello Phil,

You can either update the DOM via jQuery or get the data item to which the grid row is bound to and update it.

Here is how you can do the latter:

functino onChange(e) {
   var dropdown = this;
   var currentGridTableRow = this.element.closest("tr");
   var grid = $("#Grid").data("kendoGrid");
   var currentDataItem = grid.dataItem(tr);
   currentDataItem.set("Property", "NewValue");
}

Regards,
Atanas Korchev
Telerik