Custom Filter menu in KendoGrid using jQuery in ASP.Net MVC

Hi,

Custom filter values are not clearing once i filter values even though i have clicked on clear filter option.

I have grid under that for ship name i am trying to implement custom filter where it improves performance.

i have found one issue after clicking of clear option in filter ship name value is not clearing.

<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: { url: "/Home/GetCustomers" },
                    },
                    schema: {
                        model: {
                            fields: {
                                City: { type: "string" },
                                Title: { type: "string" },
                                BirthDate: { type: "date" }
                            }
                        }
                    },
                    pageSize: 15
                },
                height: 550,
                scrollable: true,
                filterable: {
                    extra: false,
                    operators: {
                        string: {
                            startswith: "Starts with",
                            eq: "Is equal to",
                            neq: "Is not equal to"
                        }
                    }
                },
                pageable: true,
                columns: [
                    {
                        title: "Name",
                        width: 160,
                        filterable: false,
                        template: "#=FirstName# #=LastName#"
                    },
                    {
                        field: "City",
                        width: 130,
                        filterable: {
                            ui: cityFilter
                        }
                    },
                    {
                        field: "ShipName",
                        filterable: {
                            ui: shipNameFilter
                        }
                    },
                    {
                        title: "Ship City",
                        width: 160,
                        filterable: false,
                        template: "#=ShipCity# #=ShipCity#"
                    },

                ]
            });
        });


        function shipNameFilter(element) {
            element.kendoDropDownList({
                dataTextField: "ShipName",
                dataValueField: "ShipName",
                filter: "contains",
                virtual: {
                    itemHeight: 26,
                    valueMapper: function (options) {
                        $.ajax({
                            url: "@Url.Action("ValueMapper", "Grid")",
                            type: "GET",
                            dataType: "json",
                            data: convertValues(options.value),
                            success: function (data) {
                                options.success(data);
                            }
                        })
                    }
                },
                height: 520,
                dataSource: {
                    transport: {
                        read: "/home/GetShipNameList",
                        contentType: 'application/json',
                        dataType: 'json',
                        type: 'GET',
                    },
                    schema: {
                        data: 'data',
                        total: 'total',
                        fields: [
                            { field: 'ShipName', type: 'string' },
                            { field: 'OrderID', type: 'number' },
                        ]
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverFiltering: true
                }
            });
        }


    function convertValues(value) {
        var data = {};
        value = $.isArray(value) ? value : [value];
        for (var idx = 0; idx < value.length; idx++) {
            data["values[" + idx + "]"] = value[idx];
        }

        return data;
    }
    </script>
</div>

public ActionResult ValueMapper(int?[] values)
{
    var indices = new List<int>();
    if (values != null && values.Any())
    {
        var index = 0;
        foreach (var order in GetList())
        {
            if (values.Contains(order.Id))
            {
                indices.Add(index);
            }
  
            index += 1;
        }
    }
  
    return Json(indices,JsonRequestBehavior.AllowGet);
}

public List<Customer> CustomersData()
{
    var result = Enumerable.Range(0, 100).Select(i => new Customer
    {
        OrderID = i,
 
        FirstName = "FirstName" + i,
        LastaName= "LastaName" + i,
        City= "LastaName" + i,
        ShipName = "ShipName" + i,
        ShipCity = "ShipCity" + i,
 
    });
    return result.ToList();
}
public JsonResult GetCustomers()
{
    return Json(CustomersData(),JsonRequestBehavior.AllowGet)
}
public ActionResult GetShipNameList()
{
    int pageSize = Convert.ToInt32(Request.Params.Get("pageSize"));
    int skip = Convert.ToInt32(Request.Params.Get("skip"));
    string search = Request.Params.Get("filter[filters][0][value]");
    var dataEnteredList = CustomersData();
    var total = dataEnteredList.Count();
    var data = dataEnteredList.Skip(skip).Take(pageSize).ToList();
      
    return Json(new { total = total, data = data }, JsonRequestBehavior.AllowGet);
}