This is a migrated thread and some comments may be shown as answers.

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

1 Answer 28 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Web Support
Top achievements
Rank 1
Web Support asked on 29 Apr 2014, 01:00 PM
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!

1 Answer, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 01 May 2014, 06:39 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Web Support
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Share this question
or