Include Current Item in Server Side Filter

[co-logic]

I got a problem with the Kendo UI MVC DropDownList. I want to do server side filtering. When I click on the control, the list gets populated. This works fine if the current selected item is in the populated list.

But what if I have an address book and the current selected name is "Zorro". I have thousands of names before and when I click on the list, only the first 10 names starting with "A" are shown.

How do I include the currently selected item in the DataSource, so it remains selected if I click on the dropdownlist?

Here is my code:

Razor:

@(Html.Kendo().DropDownListFor(m => m.Id)
        .DataValueField("Id")
        .DataTextField("DisplayName")
        .Filter("contains")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("PopulateNames", "PhoneBook");
                read.Type(HttpVerbs.Post);
            })
            .ServerFiltering(true);
        })
)

Controller:

[HttpPost]
public ActionResult PopulateNames(string text)
{
    var q = TblName.Query(n => n.ClientId.IsEqualTo(Manager.One.ClientId), n => n.DisplayName.Asc());
    if (text != null && text.Length > 2) q.Filter(n => n.c.DisplayName.IsLike(text));
    q.Top(10);

    var rows = q.FetchList<NameLookupViewModel>();
   rows.Insert(0, NameLookupViewModel.Default);

    return Json(rows);
}

[Georgi Krustev]

Hello,

In "filter" mode the DropDownList will keep the selected value. Once the filter is cleared (on popup open), however, the selected data should be returned.

One possible option to do that is to send the selected value along with the filter text to the server. Thus you will be able to find the selected data item and return it with the filter result. To do that you will need to use DataSource.Read callback, as it is shown in our cascading online demo:

http://demos.telerik.com/aspnet-mvc/dropdownlist/cascadingdropdownlist
(notice the Data callback)

The code for your case should like something like this:

function idDataCallback() {
  var ddl = $("#@Html.IdFor(m => m.Id)").data("kendoDropDownList");

  return {
     text: ddl.filterInput.val(),
     selectedValue: ddl.value()
  };
}

Back on the server, you will get the selected value like this:

...
public ActionResult PopulateNames(string text, string selectedValue)
...

(choose the correct type of the selectedValue argument).

Regards,
Georgi Krustev
Telerik by Progress

 

 

[co-logic]

Hello Georgi,

thanks for your help. Unfortunately this does not work, maybe because I didn't mention an important information: The Dropdownlist relies in a Grid. Therefore it is only created on demand if I click on the cell. When the Dropdownlist is shown, no item is selected (because its not in the list). Then, when idDataCallback is called,  the return value is empty.

Can I send the current selected Person.Id from the Grids Datasource to idDataCallback when populating the Dropdownlist?

 

Info: The Dropdownlist is shown because of a UIHint in the ViewModel:

ViewModel:

[UIHint("NameLookup")]
public NameLookupViewModel Name { get; set; }

 

[Georgi Krustev]

Hello,

Indeed, in this case the given solution will not work.

What you will need to do is to access the DropDownList widget in edit event handler and pre-populate the widget and set the selected value manually. The code should look smth like this:

function edit(e) {
  var ddl = e.container.find("[selector]").getKendoDropDownList();

  ddl.one("change", function() {
     ddl.value(e.model['value here']);
  });

  ddl.dataSource.read({
      "first param": "value",
      "second param": "value"
     //etc
  });
}

This is needed, because of the first result does not contain the selected data item and the selected value is accessible during the first request.

Regards,
Georgi Krustev
Telerik by Progress