I
have this autocomplete in my application.
@(Html.Kendo().AutoComplete()
.Name("Name")
.Placeholder("Please select something...")
.Delay(300)
.MinLength(2)
.DataTextField("Field")
.DataSource(source => source
.Read(read => read
.Action("SomeAction", "SomeController")
.Data("SomeData"))
.ServerFiltering(true))
.Events(x => x
.Select("onSelect")
.DataBound("onDataBound ")
.Change("onChange "))
)
It retrieves elements from a table that match a certain condition. On select, in the backend, I change that condition and add the selected element to a grid, which means that that element will not show up in the autocomplete from now on.
@(Html.Kendo().Grid<ViewModel>()
.Name("Name")
.Deferred()
.ClientRowTemplate(Html.Partial("RowTemplate").ToHtmlString())
.TableHtmlAttributes(new
{ @class = "table table-stripped" })
.Events(e => e.Change("onChange").DataBound("onDataBound"))
.Resizable(res => res.Columns(true))
.Columns(columns =>
{
columns.Bound(e => e.Code);
columns.Bound(e => e.Title);
})
.Filterable()
.Sortable()
.Selectable()
.Pageable(x =>
{
x.ButtonCount(3);
x.Enabled(true);
x.PageSizes(new[] { "10", "20", "30" });
x.Refresh(true);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("SomeAction", " SomeController "))
.ServerOperation(true)
))
When I select it
in the grid, it restores the condition, which means that element can show up in
the autocomplete results again.
This works
fine. The problem is that once I change the condition for an element, if I do
the same search again, the read action won’t be called, so I won’t get modified
elements from the table.
For example, if I do a search on “Doc”, I will get Doc1, Doc2 and Doc3, and if
I select Doc1, it will show up in the grid. Now it should not be available as a
result in the autocomplete since it no longer matches the initial condition.
If I search “Doc” again, I will get the same result. Doc1 is still there, but if I search “Doc1”, since there was actually a read, it won’t be in the results, which is expected.
So, how can I force an actual read every time I do a search to prevent this situation?
3 Answers, 1 is accepted
Attached you will find a simplified MVC solution based on the AutoComplete configuration from your post. What I have done is to handle the change event of the widget, send an AJAX request to the server and remove the selected item from the AutoComplete list. Then, when I mark the selected value and type again the same text as previously typed, the Read action is triggered again and the updated list of values is returned to the drop-down of the widget.
May I ask you to modify (if needed) the attached and describe the steps needed to reproduce the issue observed at your end? This way we will be able to troubleshoot the problem locally and to provide you with the most appropriate assistance for this case.
Regards,
Veselin Tsvetanov
Progress Telerik
Rank 1
Hi. Tks for your answer. I tried
to make it work, but to no avail.
But it did get me to think of other possibilities.
I did come up with a solution that works, without the need for a new read. It's
done client side.
On Databound event of the autocomplete, I call a method that checks whether any of e.sender.dataSource.data() exists in the grid. If so, I remove it.
private static onDataBound(e) {
$.map(e.sender.dataSource.data(), (value) => {
const grid =
GetGrid(e);
if (value && grid.dataSource.data().map(el
=> el.Id).indexOf(value.Id) !== -1)
{
e.sender.dataSource.remove(value);
}
});
};
I believe, that the client-side approach is an appropriate one for your scenario. Reducing the server calls is clearly an advantage of the suggested.
Regards,
Veselin Tsvetanov
Progress Telerik