This is a migrated thread and some comments may be shown as answers.

How to force a read

3 Answers 83 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Rui
Top achievements
Rank 1
Rui asked on 13 Oct 2017, 12:25 PM

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

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 17 Oct 2017, 11:23 AM
Hello Rui,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rui
Top achievements
Rank 1
answered on 19 Oct 2017, 12:45 PM

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);

    }

  });

};

0
Veselin Tsvetanov
Telerik team
answered on 23 Oct 2017, 07:20 AM
Hi Rui,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
AutoComplete
Asked by
Rui
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Rui
Top achievements
Rank 1
Share this question
or