I have a common auto complete control that I use on two different pages. The AutoComplete control is populated with the same data set as a Kendo Grid on the page. Both pages have filters by which users can filter the data in the Kendo Grid (using built in Kendo Filter functionality). We don't want superfluous results to show up in the AutoComplete therefore we reset the AutoComplete dataset to match the newly filtered dataset of the Kendo Grid. To accomplish this we use the .setDataSource method of the AutoComplete control (see code below). The AutoComplete control works well within page A after the new data source is set. However, the AutoComplete does not work within Page B. When a user types in criteria into the AutoComplete in Page B the popup never shows, not even to say "NO DATA FOUND". No error is shown within the Browser Developer tools either. When I interrogate the control I see that the data set is in fact applied correctly. I see the correct number of items. In fact after typing in some value to the AutoComplete control on Page B when I interrogate the dataSource I see that the view property of the dataSource is populated with the correct filtered items (i.e. if I type in "asse" into the AutoComplete then I see only two items in the view with "Asset" in their name). However, the pop up still doesn't show up. When I interrogate the popup I see nothing in its view. It seems like the pop up is just lying dead in the water for Page B. I have tried many things to figure out why. Does anyone have a suggestion for something to look into?
//prepare Kendo Filters for Kendo Grid
var siteFilters = buildSiteMenuFilters(result.data);
//apply Kendo Filters to Kendo Grid
menuGridDataSource = $("#MenuGrid").data("kendoGrid").dataSource;
menuGridDataSource.filter(siteFilters);
//get filtered dataset from Kendo Grid
var allData = menuGridDataSource.data();
var query = new kendo.data.Query(allData);
//create variable to store filtered results
saveMenu = [];
//convert filtered dataset from Kendo Grid into an array of objects that match the AutoComplete control Instantiation
filteredList = query.filter(siteFilters).data;
filteredListLength = filteredList.length;
for (var i = 0; i < filteredListLength; i++) {
saveMenu.push({ Id: filteredList[i].Id, Name: filteredList[i].Name, LongName: filteredList [i].LongName, uid: filteredList[i].LongName })
}
//set the AutoComplete control data source to match the new filtered list
var menuSearchAutoComplete = $("#menuSearch").data("kendoAutoComplete");
menuSearchAutoComplete.setDataSource(removeHtmlTags(saveMenu));
4 Answers, 1 is accepted
Hello Sally,
Can you provide a simple project that demonstrates the problem encountered? With the description provided I am unable to properly define how the same AutoComplete is being used in two different pages (Page A an d Page B). Also what is the exact use case of two AutoComplete widgets with shared DataSource in different pages.
Regards,
Ianko
Progress Telerik
Rank 1
I have struggled to isolate the difference between the pages or even reproduce it within Dojo. This tells me that it is something different within the code for that page B. However, page B doesn't have unique code for the autocomplete control. So at this point I am conducting tests just to gather information and compare the different pages and hoping that yields some further insight.
I conducted a test that yielded some interesting results. However, I don't know how to interpret it. Here I will explain how I conducted the test and also the results. I hope this might yield some ideas/suggestions:
Test Steps:
1. Opened Page B (flawed page) for the initial time and the AutoComplete control functions as expected. Within my browser developer tools I documented the properties of the AutoComplete control
2. Using Page B I open my browser developer tools I manually call the .setDataSource for the AutoComplete control setting the datasource to be the exact same as it currently was at the time. After doing so I see that the Auto Complete is no longer populating the pop up list when a value is applied. Within my browser developer tools I documented the properties of the AutoComplete control.
Results: You can see "Auto Complete Experiment Page B" for more detail but it suffices to say that all else equal for the AutoComplete control on Page B I found the following differences after I called .setDataSource:
- _events.close: had an Array with one item after .setDataSource was called whereas it was an empty array before
- _clear: had an additional class "k-loading-hidden" applied after .setDataSource was called whereas it was not present before
- _open: was set to true whereas it was set to "false before
Please keep in mind that I conducted this exact same test on page A which is working well even after .setDataSource is called. I saw absolutely no difference within the properties of the AC control on Page when comparing it before and after calling .setDataSource. You can see the file "Auto Complete Experiment Page A" for more detail.
This tells me that the differences I am finding for page B are significant. I don't know what they mean and I don't know why they are happening. I have conducted an exhaustive search for even the smallest differences and have found nothing concrete. Therefore I am hoping this additional detail will provide some insight from an expert eye.
Hi Sally,
I am afraid the described findings illustrate the end result of a not bound AutoComplete. However, without providing the actual setup of the AutoComplete and the exact programmatic changes and/or interaction with widget I can only make guesses what the exact problem might be and how to fix it.
Like suggested, try to create a sample that would enable me to reproduce the problem so that I can debug it locally.
Regards,
Ianko
Progress Telerik
Rank 1
I resolved the issue. I chose to no longer use AutoComplete.setDataSource(dataList) to change the data source. Instead I am using AutoComplete.dataSource.data(dataList); and it works just fine now for both Page A and Page B.
I don't really have any clue why .setDataSource would work on Page A but not Page B but that is water under the bridge at this point.