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

Get the dropdownlist on the event ValueMapper of Virtual functionality

3 Answers 348 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Dan asked on 27 Apr 2018, 08:18 AM

I have a dropdown list that has a source where multiple items have to be displayed based on a parameter. I have activated the virtualization and a method of ValueMapper has to be provided.

@(Html.Kendo()
      .DropDownListFor(model => model.<UnknownProperty>)
      .DataTextField("Name")
       .DataValueField("Id")
       .Filter(FilterType.Contains)
       .DataSource(source =>
       {
         source.Ajax().Read("Action", "Controller", new { id = Model.Id }).PageSize(100);
       })
       .Virtual(v => v.ItemHeight(26).ValueMapper("valuemapper"))

                                                    // I amtr

       .HtmlAttributes(new { @class = "form-control", data_mapperurl = Url.Action("OtherAction", "Controller", new { id = Model.Id }) })
)

 

On this javascript function I have to call again using ajax but I have to send also the datasource parameter.

function manufacturerMapper(options) {
  var url;
  // url = ?.data('mapperurl');
  $.ajax({
        url: url,
        data: convertValues(options.value),
        success: function (data) {
            options.success(data);
        }
    });
}

 

Is there a way from the ValueMapper function to get to the dropdownlist? I do not want to know the name of the dropdownlist because this functionality should be used by multiple dropdownlists.

I tried to get to the dropdownlist from the this object but it seems that the function is called in the context of some kind of virtual object and not the dropdownlist

 

3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 02 May 2018, 07:51 AM
Hello Dan,

You should be able to get a reference to the DropDownList instance and then retrieve the custom attribute as follows:
<script>
  function valueMapper(options) {
    var ddl = $("#products").getKendoDropDownList();
    var mapperUrl = ddl.element.data("mapperurl");
 
    $.ajax({
      url: mapperUrl,
      data: convertValues(options.value),
      success: function (data) {
        options.success(data);
      }
    });
  }
</script>

Also, when the DropDownList is initialized through the [WidgetName]For() method, the name and id of the widget are set to the specified model property (e.g (Html.Kendo().DropDownList(m => m.products)). Refer to the following section of the documentation for additional information and examples on the topic.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 02 May 2018, 08:07 AM

Hi Dimitar,

Like I said in the question I already knew the solution you provided. I needed a way to access the dropdownlist from the options object or from the "this" context.

Anyway I had added some special class on the dropdownlist and I am quering for it instead of the dropdownlist id.

0
Dimitar
Telerik team
answered on 02 May 2018, 10:48 AM
Hi Dan,

The event data that is being passed (options) does not provide the required information to identify the widget. Therefore, the described approach with retrieving the widget based on a unique class should do the trick.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
DropDownList
Asked by
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Dimitar
Telerik team
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or