ComboBox with Server FIltering Not Working

4 posts, 1 answers
  1. Carrie
    Carrie avatar
    27 posts
    Member since:
    Aug 2013

    Posted 12 Sep 2013 Link to this post

    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

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 13 Sep 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Carrie
    Carrie avatar
    27 posts
    Member since:
    Aug 2013

    Posted 13 Sep 2013 Link to this post

    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
  5. Answer
    Carrie
    Carrie avatar
    27 posts
    Member since:
    Aug 2013

    Posted 13 Sep 2013 Link to this post

    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>

Back to Top
UI for ASP.NET MVC is VS 2017 Ready