Kendo dropdownlist search filter is not accepting special characters in javascript

2 posts, 0 answers
  1. Kendo
    Kendo avatar
    1 posts
    Member since:
    Jun 2018

    Posted 06 Jun Link to this post

    I am using Kendo dropdownlist with server side filtering using jquery in mvc,i'm facing one issue like when i type any special character like ? &  ‘  - ..etc,the filter is not working

    I have tried to debug the code in backend, in Request.Params.Get("filter[filters][0][value]") the value is getting null 

    is there any setting to filter special characters in search filter? please let me know 

    below is the code that i have used.

    $('#kendodrop').kendoMultiSelect({
                placeholder: "Select",
                dataTextField: "Text",
                dataValueField: "Id",
                filter: "contains",
                filtering: function (e) {
                    var filter = e.filter;

                    if (filter != undefined && !filter.value) {
                        //prevent filtering if the filter does not value
                        e.preventDefault();
                    }
                },
                noDataTemplate: 'No Data!',
                height: 290,
                virtual: {
                    itemHeight: 26,
                    valueMapper: function (options) {
                        $.ajax({
                            url: '../controller/valueMapper',
                            type: "GET",
                            dataType: "jsonp",
                            success: function (data) {
                                options.success(data);
                            }
                        })
                    }
                },
                dataSource: {
                    transport: {
                        read: {
                            type: "POST",
                            url: "../controller/getdata",
                            dataType: "json",
                        },
                        parameterMap: function (options) {
                            return options;
                        }
                    },
                    schema: {
                        data: 'data',
                        total: 'total',
                        fields: [
                            { field: 'Id', type: 'number' },
                            { field: 'Text', type: 'string' }

                        ]
                    },
                    pageSize: 44,
                    serverPaging: true,
                    serverFiltering: true
                },
                dataBound: function (e) {
                    //prevent the click event for disabled ones
                    $(".optiondisable").parent().click(false);
                    $(".optiondisable").parent().css("background-color", "#E4E6E9");
                    //var listContainer = e.sender.list.closest(".k-list-container");
                    //listContainer.width(listContainer.width() + kendo.support.scrollbar());
                    e.sender.list.find("li").addClass("k_advautowrap");
                    deffered.resolve();
                }
            });

  2. Dimitar
    Admin
    Dimitar avatar
    677 posts

    Posted 10 Jun Link to this post

    Hello,

    In general, you should be able to filter with the specified special characters with the following configuration:
    <script>
        $(document).ready(function () {
            $("#products").kendoDropDownList({
                filter: "startswith",
                dataTextField: "CategoryName",
                dataValueField: "CategoryId",
                dataSource: {
                    serverFiltering: true,
                    transport: {
                        read: {
                            url: "/Home/ReadCategories",
                            data: function (e) {
                                var filterText = $("#products").getKendoDropDownList().filterInput.val();
     
                                return { text: filterText }
                            }
                        }
                    }
                }
            });
        });
    </script>

    The transport.read.data() method passes an additional parameter "text" with each request. Thus, you could filter based on the received value in the remote end-point as follows:
    public ActionResult ReadCategories(string text)
    {
      var categories = GetCategories().Where(c => c.CategoryName.Contains(text));
     
      return Json(categories, JsonRequestBehavior.AllowGet);
    }

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top