DropDownList in Grid EditorTemplate with ajax datasource data method not working in firefox

[Spirent]

I have a dropdownlist in a grid EditorTemplate:

@(Html.Kendo().DropDownList()
    .Name("EnvironmentID")
    .DataValueField("EnvironmentID")
    .DataTextField("Name")
    .DataSource(d =>
    {
        d.Read(r => r.Action("GetEnvironmentsJsonResult", "Home").Data("getCustomerID()")).ServerFiltering(true);
    }
    )
    .OptionLabel("Environment")
)

getCustomerID is:

function getCustomerID() {
        var row = $(event.currentTarget).closest("tr");
        var grid = $(event.currentTarget).closest("[data-role=grid]").data("kendoGrid");
        var dataItem = grid.dataItem(row);
        return { customerID: dataItem.CustomerID };
    }

this works in chrome, because the event is there, but not in firefox. I've tried passing this and event to the method, but that doesn't seem to work because this isn't a click and an event doesn't exist? How do get the customerID from the row the ddl is in?

[Alexander Popov]

Hi,

This could be achieved by using a selector matching the DropDownList. For example: 

function getCustomerID() {
        var row = $("#EnvironmentID").closest("tr");
        var grid = $("#EnvironmentID").closest("[data-role=grid]").data("kendoGrid");
        var dataItem = grid.dataItem(row);
        return { customerID: dataItem.CustomerID };
    }

Regards,
Alexander Popov
Telerik

 

 

[Spirent]

The only problem I see with that is I have multiple of the same grid, and it is possible that they are editing/adding to more than one grid at the same time.

[Alexander Popov]

Having multiple widgets with the same name/id should be avoided, because the initialization code generated by the wrappers will always select the first element with that ID. This means that there will always be only one widget initialized - the rest will remain simple HTML elements. That being said, there is another possible solution - use the Grid's edit event handler to get the DropDownList instance and call its DataSource's read method passing the required parameters.

Regards,
Alexander Popov
Telerik

 

 

[Claudia]

Hello,

How I do this?
I have the same problem, I have four grids with the same dropdowntemplate:

@(Html.Kendo().DropDownListFor(m => m)
                .Name("Value")
                .DataTextField("Name")
                .DataValueField("Id")
                .DataSource(ds => ds
                        .Read(read => read.Action("method", "controller")
                                .Data("getParentId"))
                )
)

<script>
 function getParentId(evt) {

        var element;
        if (window.event) {
            element = window.event.srcElement;
        }
        else {
            element = evt.target;
        }
        var row = $(element).closest("tr");

        // row.closest("[data-role=grid]").data("kendoGrid") is undefined in Firefox
        var dataItem = row.closest("[data-role=grid]").data("kendoGrid").dataItem(row);

        return { Id: dataItem.Id };
    }
<script/>

How i can do to work that code?

Regards

[Alexander Popov]

Hello Claudia,

In the current scenario I would recommend you to ensure that only one Grid is being edited at a time. The edit event and cancelRow or closeCell methods could be utilized.

Regards,
Alexander Popov
Telerik