Update the Kendo UI page when kendoAutoComplete is selected

Question

I've added in a kendoAutoComplete widget to a template Kendo UI. The widget is linked to the employee names from employees-list.json and suggesting names correctly.

<p>Search Member: <input id="member-auto-complete" /></p>

<script>
  $('#member-auto-complete').kendoAutoComplete({
    dataTextField: "EmployeeName",
    dataSource: {
      transport: {
        read: {
          url: './content/employees-list.json',
          crossDomain: true,
          dataType: "jsonp",
          jsonp: false,
          jsonpCallback: "callback_el",
        }
      },
    },
    change: onCriteriaChange,
  });
</script>

I'm now unsure how to make the page update when a suggested name is clicked on, the way that it does when you just click on the employee from the side list menu.

I think it is related to the employee variable not updating in the onCriteriaChange function

function onCriteriaChange() {
            var employeeList = $("#employees-list").data("kendoListView"),
            
                employee = employeeList.dataSource.getByUid(employeeList.select().attr("data-uid")),
                employeeQuarterSales = $("#employee-quarter-sales").data("kendoChart"),
                employeeAverageSales = $("#employee-average-sales").data("kendoChart"),
                teamSales = $("#team-sales").data("kendoChart"),
                employeeSales = $("#employee-sales").data("kendoScheduler"),
                startDate = $("#start-date").data("kendoDatePicker"),
                endDate = $("#end-date").data("kendoDatePicker"),
                filter = {
                    EmployeeID: employee.EmployeeID,
                    startDate: kendo.format("{0:MM/dd/yyyy hh:mm:ss}", startDate.value()),
                    endDate: kendo.format("{0:MM/dd/yyyy hh:mm:ss}", endDate.value())
                },
                template = kendo.template($("#employeeBioTemplate").html());
            console.log(employee)
            $("#employeeBio").html(template(employee));

            employeeSales.dataSource.filter({
                field: "EmployeeID",
                operator: "eq",
                value: employee.EmployeeID
            });

            teamSales.dataSource.read(filter);
            employeeQuarterSales.dataSource.read(filter);
            employeeAverageSales.dataSource.read(filter);
        }

Here's the github repo https://github.com/frankli-n/Kendo-UI-for-jQuery/blob/main/apptemplates/dashboard/index.html

Update the Kendo UI page when kendoAutoComplete is selected

0 Answers0