Get the dropdownlist on the event ValueMapper of Virtual functionality

[Dan]

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"))
      .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

 

[Dimitar]

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

[Dan]

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.

[Dimitar]

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