How to force a read

4 posts, 0 answers
  1. Rui
    Rui avatar
    17 posts
    Member since:
    Jun 2017

    Posted 13 Oct Link to this post

    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?

     

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    621 posts

    Posted 17 Oct Link to this post

    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.
  3. Rui
    Rui avatar
    17 posts
    Member since:
    Jun 2017

    Posted 19 Oct Link to this post

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

        }

      });

    };

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    621 posts

    Posted 23 Oct Link to this post

    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.
Back to Top