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

How to find id of Kendo DropDownList in event handler

11 Answers 1136 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
york
Top achievements
Rank 1
york asked on 17 Oct 2015, 05:48 AM

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.

‚Äč


11 Answers, 1 is accepted

Sort by
0
Accepted
Nencho
Telerik team
answered on 20 Oct 2015, 11:32 AM
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
0
york
Top achievements
Rank 1
answered on 20 Oct 2015, 11:43 PM

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.

0
Plamen Lazarov
Telerik team
answered on 23 Oct 2015, 06:32 AM

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
0
york
Top achievements
Rank 1
answered on 24 Oct 2015, 12:29 AM

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?

0
Boyan Dimitrov
Telerik team
answered on 27 Oct 2015, 04:37 PM

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
0
york
Top achievements
Rank 1
answered on 27 Oct 2015, 10:02 PM

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.

0
Boyan Dimitrov
Telerik team
answered on 29 Oct 2015, 10:14 AM

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
0
york
Top achievements
Rank 1
answered on 29 Oct 2015, 07:45 PM

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.

0
Boyan Dimitrov
Telerik team
answered on 02 Nov 2015, 04:12 PM

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
0
york
Top achievements
Rank 1
answered on 02 Nov 2015, 10:18 PM

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.

0
Boyan Dimitrov
Telerik team
answered on 04 Nov 2015, 02:37 PM

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
Tags
DropDownList
Asked by
york
Top achievements
Rank 1
Answers by
Nencho
Telerik team
york
Top achievements
Rank 1
Plamen Lazarov
Telerik team
Boyan Dimitrov
Telerik team
Share this question
or