How to find id of Kendo DropDownList in event handler

[york]

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.

​

[Nencho]

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

[york]

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.

[Plamen Lazarov]

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

[york]

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?

[Boyan Dimitrov]

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

[york]

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.

[Boyan Dimitrov]

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

[york]

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.

[Boyan Dimitrov]

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

[york]

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.

[Boyan Dimitrov]

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

[Kiran]

I figured out this in another way, how can we get read action calling control dynamic ID:

 

 .DataSource(source => source.Read(read => read.Action("ActionName", "ControllerName", new { area = "AreaName", dropdownId = Model.DropDownListDynamicId})
                    .Data("filterJavaScriptActionMethod"))
                    .ServerFiltering(true))

 

JavaScript:

function filterJavaScriptActionMethod(e){

 var _ctrlComponentModelSuffixKey = this.url.split('?')[1].split('&')[0].split('=')[1];
    return {
        productType: $('#ddlProductType' + _ctrlComponentModelSuffixKey ).val(),
        timeTick: new Date().getTime()
    };

}

 

if there is any other alternative way please share with me.

 

 

[Eyup]

Hi Kiran,

Thank you for sharing your specific solution with our community.

I hope it will prove to other developers as well.