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

ComboBox with Server FIltering Not Working

3 Answers 647 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Carrie
Top achievements
Rank 1
Carrie asked on 12 Sep 2013, 05:23 PM
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

3 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 13 Sep 2013, 08:34 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Carrie
Top achievements
Rank 1
answered on 13 Sep 2013, 10:43 AM
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
0
Accepted
Carrie
Top achievements
Rank 1
answered on 13 Sep 2013, 11:19 AM
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>

Tags
ComboBox
Asked by
Carrie
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Carrie
Top achievements
Rank 1
Share this question
or