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

Kendo dropdownlist search filter is not accepting special characters in javascript

1 Answer 1149 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Kendo
Top achievements
Rank 1
Kendo asked on 06 Jun 2019, 01:14 PM

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();
            }
        });

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 10 Jun 2019, 11:39 AM
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.
Tags
DropDownList
Asked by
Kendo
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or