ComboBox with Server FIltering Not Working

[Carrie]

Hello,

I have a combobox that I want to implement server filtering on - I have followed the example in the demo but I cannot get the filter to work, the items bind correctly upon selecting the dropdown but the autocomplete filter doesn't filter.   The filter works perfectly clientside but not when I implement serverfiltering.   Am I missing something on the controller end?

My View Code:

@(Html.Kendo().ComboBoxFor(model => model.AffectedUser)
      .Placeholder("Choose One...")
      .DataTextField("Text")
      .DataValueField("Value")
      .Filter(FilterType.Contains)
      .AutoBind(false)
      .DataSource(dataSource => dataSource
              .Read(read => read.Action("GetUserList", "User"))
              .ServerFiltering(true)
      ))

My Controller Code:

public class UserController : Controller

    {

        public JsonResult GetUserList(string group, string filter)

        {

            var items = new List<SelectListItem>();


            for (int i = 1; i <= 500; i++)

            {

                items.Add(new SelectListItem { Value = i.ToString(), Text = "John"});

            }

 

            items.Add(new SelectListItem { Value = "Jane", Text = "Jane" });

 

            return Json(items.AsEnumerable(), JsonRequestBehavior.AllowGet);

        }

    }


Thanks,
Carrie

[Georgi Krustev]

Hello Carrie,

 
Based on the given widget declaration the server filtering is enabled, which means that the filtration needs to be done on the server. The DataSource will not query the data if the server operation is enabled.
I noticed two things in the code snippet:

1. filter parameter will not be populated, as the widget is not setup to sent filter value as filter paramter. Check how to done this here. 
2. The returned data has never been filtered, as the filter paramer is never used in the code. You can perform filtration usign LINQ: 

   items.AsQueryable().Where(i => i.Text.Contains(filter));

Regards,

Georgi Krustev
Telerik

[Carrie]

Thank you, however can you tell me how I get the filter text inside the controller?    I see the variable "filter" but how is that passed into the controller action ?

I have updated my code like this but nothing is sent to the controller:

@(Html.Kendo().ComboBoxFor(model => model.AffectedUser)
                          .Placeholder("Choose One...")
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .Filter(FilterType.Contains)
                          .AutoBind(false)
                          .DataSource(dataSource => dataSource
                                  .Read(read => read.Action("GetUserList", "User")
                                      .Data("filterUsers"))
                                  .ServerFiltering(true)
                          ))

<script>
    function filterUsers() {
        return {
            userFilter: $("#AffectedUser").val()
        };
    }
</script>

Controller:

public JsonResult GetUserList(string userFilter)
        {
            var items = new List<SelectListItem>();

            for (int i = 1; i <= 500; i++)
            {
                items.Add(new SelectListItem { Value = i.ToString(), Text = "John " });
            }

            items.Add(new SelectListItem { Value = "Jane", Text = "Jane" });

            if (!String.IsNullOrEmpty(userFilter))
                return Json(items.AsEnumerable().Where(i => i.Text.Contains(userFilter)), JsonRequestBehavior.AllowGet);

            return Json(items.AsEnumerable().Take(100), JsonRequestBehavior.AllowGet);
        }

Thanks,
Carrie

[Carrie]

Sorry for the multiple posts here but just trying to figure it out :)    So I do have it working to an extent now.    However the behavior is odd, when the script function below is called it is returning the previous value of the input box even though I have entered more text.

So when I enter "Jan" it returns a value of null, if I then add an "e" to make it "Jane" it then returns the value of "Jan".

This only happens when I am binding the ComboBox to the Model using the ComboBoxFor - using the regular helper everything works as it should.

Any help is appreciated.

<script>
    function filterUsers() {
        return {
            userFilter: $("#AffectedUser").val()
        };
    }
</script>

UPDATE - got it working by changing this to:

<script>
    function filterUsers() {
        return {
            userFilter: $("#AffectedUser").data("kendoComboBox").input.val()
        };
    }
</script>