Autocomplete Hangs when i click on clear

[Rajesh]

I  Created a simple  employee auto complete inside a grid i have the following code 

in grid

@(Html.Kendo().Grid<DI_IPMS_KENDO.Models.AdminViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.EmployeeName).EditorTemplateName("AdminEmp");
        columns.Bound(p => p.Team).Width(100);
        columns.Bound(p => p.Notification).Width(100);
        columns.Bound(p => p.Approval).Width(100);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.AdminInfoID))
        .Create(update => update.Action("Admin_Create", "Home"))
        .Read(read => read.Action("Admin_Read", "Home"))
        .Update(update => update.Action("Admin_Update", "Home"))
        .Destroy(update => update.Action("Admin_Destroy", "Home"))
    )
)

editor template has 

                                                

@model string;

<script src="https://cdn.kendostatic.com/2023.2.606/js/jquery.min.js"></script>

<script>



    function onAdditionalData(e) {


            return {

                Empltext: e.filter.filters[0].value

            }


        }




</script>
<div>
    @(Html.Kendo().AutoComplete()
      .Name("EmployeeName")
        .Filter("startswith")
        .MinLength(4)
        .Placeholder("Search for Employee")
        .DataTextField("FullName")             
        .HtmlAttributes(new { style = "width:50%" })
        .DataSource(source =>
        {
            source
            .Read(read =>
            {
                read.Action("EmpSearchData", "Home")
            .Data("onAdditionalData");
            })
            .ServerFiltering(true);
        })
        )


</div>

 

The problem is autoserach works great when i serach but when i click on  'x' clear then it hangs :(. What  am i doing wrong

 

 

 

 

 

[Alexander]

Hi Rajesh,

Thank you for taking the time to share the relevant code implementation for both the AutoComplete Editor and Grid HtmlHelper that is currently consumed within your application.

Upon my initial observations, my suppositions are that the reported unorthodox behavior would most notoriously be caused by the fact that upon clearing the AutoComplete's input, the "e.filter.filters" array would be treated as undefined. Thus, this will falter the supplementation of the filter to the query string upon re-reading the AutoComplete's data.

Further producing the following error within the console:

Thus, I would recommend substituting the underlying logic with a ternary operator evaluation instead:

<script>
    function onAdditionalData(e) {
        return {
            Empltext: e.filter.filters.length == 0? "": e.filter.filters[0].value
        }
     }
</script>

And on the server side alter the logic, so that it handles an empty string scenario:

public IActionResult EmpSearchData(string Empltext)
{
    var data; // Retrieve the required data.

    if (Empltext != "")
    {
       // Filter out the data.
    }

    return Json(data);
}

Please give the aforementioned suggestions a try and let me know how it works out for you.

Kind Regards,
Alexander
Progress Telerik

[Rajesh]

awesoem .Thank You