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

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

5 Answers 228 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Spirent
Top achievements
Rank 1
Spirent asked on 10 Nov 2014, 05:11 PM
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?

5 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 12 Nov 2014, 01:05 PM
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
 

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.

 
0
Spirent
Top achievements
Rank 1
answered on 13 Nov 2014, 10:16 PM
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.
0
Alexander Popov
Telerik team
answered on 17 Nov 2014, 01:10 PM
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
 

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.

 
0
Claudia
Top achievements
Rank 1
answered on 18 Dec 2014, 03:35 PM
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
0
Alexander Popov
Telerik team
answered on 22 Dec 2014, 10:01 AM
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
 

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.

 
Tags
DropDownList
Asked by
Spirent
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Spirent
Top achievements
Rank 1
Claudia
Top achievements
Rank 1
Share this question
or