How to find id of Kendo DropDownList in event handler

12 posts, 1 answers
  1. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 17 Oct 2015 Link to this post

    Hi,

    I have a Kendo DropDownList as follow:

                     Html.Kendo().DropDownList()
                    .Name("ddl_" + filter.ReportProcedureId.ToString())
                    .Items(i => i.Add().Text(filter.DefaultValue).Value(filter.DefaultValue))
                    .SelectedIndex(0)
                    .HtmlAttributes(new
                    {
                        style = "display:none;"
                    })
                    .Events(e => e
                        .DataBound("onDropDownBinding")).Render();  

     In the old Telerik MVC extension it is done in onDropDownBinding() like

        function onDropDownBinding(e)
        {
            var isValid = true;
            var reportProcedureId = e.currentTarget.id.replace('ddl_', '');

            ......

        }
    Now I want to do it in Kendo. How to do it? Thanks.


  2. Answer
    Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 20 Oct 2015 Link to this post

    Hello York,

    You can easily acquire the ID of the control that triggered the event in the following manner:
    function onDropDownBinding(e) {
                var id = this.element.attr("id");
              }

    Regards,
    Nencho
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 20 Oct 2015 in reply to Nencho Link to this post

    Hi Nencho,

    Thanks, your code is working. However, I have run into other problems. The Kendo DropDownList is as follow:

                                Html.Kendo().DropDownList()
                                    .Name("ddl_" + filter.ReportProcedureId.ToString())
                                    .Items(i => i.Add().Text(filter.DefaultValue).Value(filter.DefaultID).Selected(true))
                                    .DataTextField("Description")
                                    .DataValueField("Id")
                                    .AutoBind(true)
                                    .DataSource(dataSource =>
                                    {
                                        dataSource.Read(read =>
                                        {
                                            read.Action("ReportParameterAjax", "Shared", new { defaultID = filter.DefaultID, storedProcedureName = filter.StoredProcedureName })
                                                .Data("onDropDownBinding");
                                        });
                                    })
                                    .Events(e => e
                                        .Change("onDropDownClosed")
                                        //.DataBound("onDropDownBinding")
                                        )
                                    .Render();   

    "onDropDownBinding" is called after Read Action for it is in DataBound Event. I want it to be called before Read Action and so I put it in read.Action.Data as shown in above code. But var id = this.element.attr("id") fails probably because DropDownlist has yet to be created. In the old Telerik MVC extension it is done in onDataBinding Event. How to do this in Kendo? Thanks.

  5. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 23 Oct 2015 Link to this post

    Hello York,

    Please accept my apologies for the delayed reply. 

    Based on the provided code snippet, I assume that you want to send an additional parameter to the server. This is documented at: 

    http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/dropdownlist/overview#send-parameters-to-the-server

    On the other hand, the var id = this.element.attr("id") statement fails because the onDropDownBinding function context is different when the function is called as a dataBinding handler, and when it is called to provide parameters for the Read action. In the latter case, the DropDownList cannot be accessed via the this keyword. My recommendation is to obtain a reference to the widget first, then use the aforementioned line of code. For example: 

    function onDropDownBinding() {
        var ddl = $("#YourID").data("kendoDropDownList");
        var id = ddl.element.attr("id");
    }

    Regards,
    Plamen Lazarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 23 Oct 2015 in reply to Plamen Lazarov Link to this post

    Hi Plamen,

    The problem is that id is stored in DropDownList. So how to get it in Read action. I think there should be a way to do it because in old Telerik MVC extension there is a onDataBinding event which occurs before initialization of DropDownList is completed. But what is the event in Kendo for it?

  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 27 Oct 2015 Link to this post

    Hello york,

     

    Indeed the available events for the DropDownList widget will be fired after the request for reading the data. My suggestion is to send the additional data as shown below: 

     

    read.Action("ReportParameterAjax", "Shared", new { defaultID = filter.DefaultID, filter.StoredProcedureName })

     

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 27 Oct 2015 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    I already use the code as shown in the previous post. The problem is how to find the id (or Name field) of DropDownList in read.Action.Data, more specifically, in onDropDownBinding(e). We can not use "var id = this.element.attr("id")", but should find it from e or else.

  9. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 29 Oct 2015 Link to this post

    Hello york,

     

    Since there is no event that is fired before the read.Action.Data handler, the only way to use the id value is to use the same pattern used for generating the Name value:

    .Name("ddl_" + filter.ReportProcedureId.ToString())


     

     

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 29 Oct 2015 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    But the problem is in event handler, how to know "ddl_" + filter.ReportProcedureId.ToString()? It should be contained somewhere in e I think.

  11. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 02 Nov 2015 Link to this post

    Hello york,

     

    The Kendo UI DataSource does not know anything about the widget, which is bound to ( including the id of the DropDownList widget). 

     

    This is the reason why my suggestion was to define the parameter set for the read action method. 

     

    All DropDownList events ( including DataBound event) is fired after the data function of the read action. So this approach will not work for your requirement. 

     

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 02 Nov 2015 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    In the old Telerik MVC Extension, there is an event onDataBinding that is fired before the request for reading the data. The Kendo should be able to have similar functionality. I can not believe that Kendo is degraded from the previous version.

  13. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 04 Nov 2015 Link to this post

    Hello york,

     

    The reason for this behavior is that Kendo UI DataSource is completely separate and it does not know anything for the DropDownList. My suggestion is not to use the event of the DropDownList or data function for the read action. 

     

    My suggestion is to use the DropDownList id value in the read action as shown below: 

    read.Action("ReportParameterAjax", "Shared", new { dropdownId= "ddl_" filter.ReportProcedureId.ToString() })

     

     

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready