TreeList filtering data issues

[Abram]

When I filter out data on tree list I am running into 2 issues:

 1) the number of pages doesn't reflect the number of items shown in the list

 2) the child items will remain in the list even if filtered out

My expectation is that when filter is applied, it would only show Carla and have 1 page on paging bar.  Strangely if I execute $("#AttendeeGrid").data("kendoTreeList").dataSource.read(); again after filtering through browser console the children are then removed.

View

<script type="text/javascript">
    var filter = false;

    function toggleFilter() {
        filter = !filter;
        $("#AttendeeGrid").data("kendoTreeList").dataSource.read();
        $("#AttendeeGrid").data("kendoTreeList").dataSource.page(1);
    }

    function attendeeParams() {
        return {
            myFilter: filter
        }
    }
</script>
@(Html.Kendo().TreeList<AttendeeItem>()
            .Name("AttendeeGrid")
            .Columns(columns =>
            {
                columns.Add().Field(x => x.firstName).Title("First");
            })
        .Sortable()
        .DataSource(dataSource => dataSource
        .ServerOperation(false)
        .Read(read => read.Action("attendee_Read", "Home").Data("attendeeParams"))
        .Model(m => {
            m.Id(x => x.primaryRegistrationId);
            m.ParentId(x => x.parentRegistrationId);
            m.Expanded(true);
        })
        )
        .Pageable(p => p.PageSize(5))
        .Scrollable(false)
      )
<button onclick="toggleFilter()">Toggle filter</button>

 

Controller

...
public IActionResult attendee_Read([DataSourceRequest] DataSourceRequest request, GetAttendeesParams getAttendeesParams)
        {
            AttendeeItem[] items;
            if (getAttendeesParams.myFilter)
            {
                items = new[]
                {
                    new AttendeeItem
                    {
                        primaryRegistrationId = 1,
                        firstName = "Carla",
                        parentRegistrationId = null
                    }
                };
            }
            else
            {
                items = new[]
                {
                    new AttendeeItem
                    {
                        primaryRegistrationId = 1,
                        firstName = "Carla",
                        parentRegistrationId = null
                    },
                    new AttendeeItem
                    {
                        primaryRegistrationId = 2,
                        firstName = "Roger",
                        parentRegistrationId = null
                    },
                    new AttendeeItem
                    {
                        primaryRegistrationId = 3,
                        firstName = "Katy",
                        parentRegistrationId = null
                    },
                    new AttendeeItem
                    {
                        primaryRegistrationId = 4,
                        firstName = "Bob",
                        parentRegistrationId = null
                    },
                    new AttendeeItem
                    {
                        primaryRegistrationId = 5,
                        firstName = "Avni",
                        parentRegistrationId = 1
                    },
                    new AttendeeItem
                    {
                        primaryRegistrationId = 6,
                        firstName = "George",
                        parentRegistrationId = null
                    },
                };

            }

            return Json(items.ToTreeDataSourceResult(request));
        }
    }

    public class AttendeeItem
    {
        public string firstName { get; set; }
        public int primaryRegistrationId { get; set; }
        public int? parentRegistrationId { get; set; }
    }

    public class GetAttendeesParams
    {
        public bool myFilter { get; set; }
    }

[Tsvetomir]

Hi Abram,

I have investigated the provided code snippets and I have noticed that the data source does not have the PageSize() option set. 

Also, the filtering mechanism would be working on the client-side only. What essentially happens is that the item which matches the filter expression is shown. Along with all of its parent items. The child elements are not supposed to be shown.

If you would like to filter the treelist's data source programmatically, I would suggest using the filter() method. Simply pass the field and the value as function parameters. More information could be found here:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/filter

I hope you find this helpful.

 

Kind regards,
Tsvetomir
Progress Telerik

[Abram]

Adding pagesize to the datasource didn't make any difference. I would like to perform server side filtering instead of client side filtering with the addition of having the results paged, so I don't think the filter method will help with that.  I found if I execute $("#AttendeeGrid").data("kendoTreeList").dataSource.sync(); from the console both the children update and the number of pages update as I would expect.  I tried adding this to the databound event, but that has the problem of calling itself making an endless loop.

[Abram]

Solved item 2 had to reverse lines in toggle filter method to:

$("#AttendeeGrid").data("kendoTreeList").dataSource.page(1);
$("#AttendeeGrid").data("kendoTreeList").dataSource.read();

[Abram]

1) Seems to work if I call setDataSource instead of calling read. Would still like to know if there is a solution for that pages to update just using the read function vs updating the dataSource manually.

function getData()
    {
        $.post('/Home/attendee_read',attendeeParams())
            .done(function(result) {
                var ds = new kendo.data.TreeListDataSource({
                         data: result.Data,
                          schema: {
                              model: {
                                  id: "primaryRegistrationId",
                                  parentId: "parentRegistrationId",
                                  fields:{
                                    primaryRegistrationId: { type: "number"},
                                    parentRegistrationId: { type: "number", nullable:true }
                                  },
                                  expanded: true
                              }
                          },
                          pageSize:5
                       });
                       $("#AttendeeGrid").data("kendoTreeList").setDataSource(ds);
            });
    }

    function toggleFilter() {
            filter = !filter;
            $("#AttendeeGrid").data("kendoTreeList").dataSource.page(1);
            getData();
            //$("#AttendeeGrid").data("kendoTreeList").dataSource.read();

        }

[Tsvetomir]

Hi Abram,

The Kendo UI TreeList widget supports only client-side paging. Therefore, it would make its calculations based on the Total property returned from the server-side. That is why there might be a difference between the data that was sent and the pager information.

Since it is not recommended to mix the server-side and client-side functionalities, I would recommend executing all of them on the client-side. Otherwise, unexpected behavior is observed. Can you try switching to client-side filtering and see if it makes a difference? So that we can conclude where the issue stems from.

Looking forward to your reply.

 

Best regards,
Tsvetomir
Progress Telerik