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

6 posts, 0 answers
  1. Spirent
    Spirent avatar
    13 posts
    Member since:
    Apr 2012

    Posted 10 Nov 2014 Link to this post

    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?
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 12 Nov 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Spirent
    Spirent avatar
    13 posts
    Member since:
    Apr 2012

    Posted 13 Nov 2014 in reply to Alexander Popov Link to this post

    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.
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 17 Nov 2014 Link to this post

    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.

     
  6. Claudia
    Claudia avatar
    1 posts
    Member since:
    Oct 2014

    Posted 18 Dec 2014 in reply to Alexander Popov Link to this post

    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
  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 22 Dec 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready