DataSource with Grid or ListView - Working with Nested Data Structures

[Adrian]

Right now our application has two pages, ProjectHome and ProjectInfo.

ProjectHome provides a list of all the Projects in the database. ProjectInfo provides information specific to the selected Project.

Each Project has several types of data connected to it, each provided through a DataSource, and displayed in a Grid.

I am working on a Filter panel on the ProjectHome page that will allow a user to filter through the list of Projects by targeting specific fields and searching for specific values. So far, this has proven "easy" (lots of manual filter management code required, but not difficult to construct) for flat fields like "Title" and "Size". It is not so simple, however, for complex data connected to the Projects themselves, such as "Team Members". On the ProjectInfo page for a given Project, the Team Members DataSource contains several fields: "Last Name", "First Name", and "Role". Each Project may have multiple Team Members attached to it.

I need to be able to filter through Projects from the ProjectHome page by passing values through the KendoUI DataSource filter() method, which works fine for flat fields, as I said, but does not appear to work for nested data. As a result, I find myself unable to filter Projects by Team Member on the ProjectHome page, because if I provide the ProjectList DataSource with the contents of the TeamMember DataSource within a single column, it creates a complex nested data structure. I can flatten this out to some kind of comma-separated list using the parse() method on the ProjectList DataSource, but then filtering becomes overly complex for the TeamMember field (since it contains three subfields).

Is there any supported way which would allow me to filter through the ProjectList DataSource while looking through the nested data of the Projects' TeamMember DataSource(s)?

[Alexander Valchev]

Hello Adrian,

The dataSource component is designed and intended to work with flat data and does not support complex (hierarchical) data structures. In order to use the build-in filtering functionality I would advise you to load flat data structures. If that is not possible you may consider using a custom filter operator - thus way you would be able to loop through the array of field values. Here is the syntax:

$("#grid").data("kendoGrid")
    .dataSource.filter({
        field: "FieldName",
        operator: function(fieldValue, filterValue) {
            //return true or false
        },
        value: true
    });

Regards,
Alexander Valchev
the Telerik team

[Adrian]

Thanks for the note and the advice, Alexander.  After reviewing the fact that the Kendo dataSource is not designed to work with nested data, we eventually decided to move filtering to the server side. We are now creating a custom filter string and passing it through the dataSource filter() method to the server, where the filtering magic happens (and can be considerably more complex than before). It's an unfortunate tradeoff, but necessary in this case, as it has the added benefit of saving us from pushing several thousand projects, complete with full data, to the front-end upon page load (though with server-side paging, it would only be 12 at a time, but each project still has an uncomfortably large amount of data which would need to be filtered through or converted to a flatter format on the front-end). It saves us some work and provides fewer possible points of failure for the time being. We will be making more server calls during filtering operations, but will be simplifying the overall code, passing less data in each call, and providing fewer possible points of failure, so I see it as an acceptable exchange.