To date for most of my maintenance tables I'm currently using a variant of the following:
https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/
It's working quite well as far as the add/edit/delete functions however I have situations often where I'm implementing the kendoGridCellTemplate to replace a GUID with the name its associated with (assuming the given column has a dropdown list for editing). I'd like to be able to provide the end user with the ability to filter on the name values and, if possible, sort alphabetically on them.
I did see that there was a tutorial for reusable filters at the bottom of this page:
https://www.telerik.com/kendo-angular-ui/components/grid/filtering/built-in-template/
The kendo-multiselect looks like it could suffice for my needs but I notice that the demos for the filterChange all work from the premise that the grid is being supplied by public gridData: any[]. The pattern I'm using is public view: Observable<GridDataResult> which filterBy doesn't seem to take.
Do you have any suggestions on how I could integrate this approach with a grid based in 'view | async' data? I've thought about using the this.xservice.map(data => process(data.filter(x), this gridstate)) but I'm not sure how I'd phrase the connection between the filterService and the data.filter option. Also assuming I may have more than one column where I need to perform data substitutions this approach could get tricky.
9 Answers, 1 is accepted
Depending on whether all required data to perform the filtering is available on the data item objects the Grid is bound to (for example the data item has a Category property that contains an object with separate CategoryID and CategoryName fields), or the Grid data contains a foreign key ID only and further lookups are necessary to obtain the corresponding text, the approach may vary.
Another thing that the approach depends on is whether you are using local data operations or server-side ones. For example, if you are using server-side operations, you can perform a request, based on the incoming Grid state, process the data on the server in accordance with your custom logic, and bind the Grid to the processed data in the response via the async operator (no further processing will be required on the client).
If on the other hand you are receiving the whole data set on the client and then process it locally, you can use the custom filter descriptors to filter the data after the server response is received and before it is bound to the Grid. The filterBy function expects an array of items and a filter descriptor, while the process function expects an array of data and a state object, so you can map the incoming server response to produce a GridDataResult object, based on the processed data, e.g.:
this.http.get(...).pipe({ map(res => { data: process(res, state), // assuming the response is an array of data items total: ... })})I hope this helps, but if I am missing something, please describe the scenario in further details, ideally illustrating it with an isolated runnable project or a Plunker/StackBlitz sample that best demonstrates the current setup, so I can try to provide the most suitable suggestion based on the specific use case.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Iron
Iron
Dimiter,
Let me know if the attached helps explain the situation.
stg-maintenence-component-ts is an example that follows the second scenario you outlined, ie. client-side filtering, where the replacements I have are a Yes/No for true false in the second column of the grid and three string options replacing 0, 1, and 2 values in the third column (both of these are public arrays in the component). The main thing I'm trying to figure out is what syntax I would use to handle multiple columns with custom grid values and how I'd send these values back through the filterChange to the process statement.
The provided code suggests that the filterChange and dataStateChange event are handled separately. This is typically not recommended as the dataStateChange will be triggered each time the filterChange is triggered and thus the data will be (unnecessary) processed twice.
When multiple data operations are used simultaneously, the recommended approach is to use the dataStateChange event only. The new Grid state, including the new filter descriptors (updated automatically when the filterService.filter() method is called) is available in the DataStateChange event handler so you can update the state object accordingly (as you seem to already do) and thus when the process() function is called after the data service read() method is called should process the incoming array of data in accordance with the new state.
The Grid data operations should be working as expected looking at the provide code snippets (after removing the unnecessary handling of the filterChange event).
On a side note, using MultiSelect components for filtering simple boolean values also seems like an unnecessary overhead - the built-in Grid boolean filter should do. You can customize the True/False text via the Grid custom messages component:
https://plnkr.co/edit/8wVVIZnzDmyKxACQhldL?p=preview // Discontinued field
If the Grid data contains a complex object with a text and value, you can either restructure the data such that a primitive boolean value is used instead (and use a Cell template to show Yes/Now as opposed to True/False), or bind the respective Grid column field directly to the nested boolean value property, e.g.:
https://plnkr.co/edit/yC7wYpAUUyBvojLjnQEI?p=preview
Also, a DropDownList as opposed to a MultiSelect seems better suited for the second custom filter.
To sum up, the overall workflow should follow this pattern:
1) After all data comes from the remote server call, the response should be mapped in the Observable (either via pipe(map(...)) or just map() depending on the RxJS version in use):
2) When filters are changed in the custom filter menu template, the Grid state filters are updated accordingly:
3) When the "Filter" (or "Clear") button is pressed, the dataStateChange event is fired and the state.filter object contains the latest filter descriptors. We are updating the state object the Grid is bound to, and call the data service read method:
The filterChange event does not need to be handled (and will cause issues if used like in the provided code snippets, as when we assign this.view with the result of the filterBy function, this is no longer an Observable, but a regular array).
Let me know if you have further questions or some remaining issues.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Iron
Iron
Dimiter,
I pulled out the filterchange() references and it works with one particular caveat.
What I noticed is that kendo-multiselect will work and I was able to get that up and running, however when I try this with kendo-dropdownlist as you recommended I get sent out to http://localhost:12345/#. It looks like the [valuePrimitive]="true",[value]="categoryFilters(filter)", and (valueChange)="categoryChange($event, filterService)" are all still needed, however there seems to be a difference in how the multiselect and dropdown list handle when they're set in the context of kendoGridFilterMenuTemplate.
Let me know if you have any particular thoughts on what might be happening there. If not I'll just go ahead and use multiselect wherever I need this kind of filtering.
Indeed, there is a difference between the emitted objects of the valueChange event of the MultiSelect and of the DropDownList. The DropDownList's value can be of the primitive (string, numbers) or of the complex (objects) type, whereas the MultiSelect's value has to be an array. Check the following example demonstrating this:
https://stackblitz.com/edit/angular-ugzrvg?file=app/app.component.ts
This is why, we need to implement a different custom logic for handling the valueChange event of the MultiSelect and of the DropDownList.
I hope this points you in the right direction of achieving the desired custom filter.
Regards,
Svetlin
Progress Telerik
Rank 1
Iron
Iron
Svetlin,
That is good information to be aware of. The only thing I'm not quite sure I follow on, in the case of the multiselect being used as a filter you would use [value]="exampleFilters(filter)" and (valueChange)="exampleChange($event, filterService)". How would these statements be impacted when filtering a similar object array with kendo-dropdownlist?
Also something of a side note, this thread seems like it could be helpful for those users who will be creating a lot of maintenance tables for clients (my guess is this will be a common theme) and they'll want their client to be able to find information easily/conveniently which would in some cases make a dropdownlist in the filter menu more appropriate than a search input box. That brings a small side question - is it currently possible to use the kendo-dropdownlist in the filter menu to return column values directly? There may be, for example, a large body of information that's headed under less than 10 category names and in such cases a dropdownlist would make the most sense. I did experiment with selecting [data]="dataItem.exampletext" but that didn't do the trick. Is it possible to inject a .map() statement into this line to extract unique values?
Straight to your questions:
> How would these statements be impacted when filtering a similar object array with kendo-dropdownlist?
The syntax of the statements should be the same. The functions themselves should be able to handle array parameters (for the setter) and return an array (for the getter).
> Is it currently possible to use the kendo-dropdownlist in the filter menu to return column values directly?
I am afraid that I could not completely understand what you mean. The custom filter menu that is shown in the documentation adds the distinct items for a column. Is that the described use-case? If not, can you please provide an example of how the end result should look like?
Regards,
Alex Gyoshev
Progress Telerik
Rank 1
Iron
Iron
The described behavior is most likely caused by the fact that the filtering icon is wrapped in an anchor element (<a ...>) with a "#" href attribute. This is the default Grid rendering. However it has not caused any known issues like the described one so far. You can check out some of our sample applications that involve integrating an Angular application with a Grid in it in a .NET Core project:
https://www.telerik.com/kendo-angular-ui/components/dataquery/mvc-integration/
https://www.telerik.com/kendo-angular-ui/components/installation/dotnet-core/
Please compare them to your implementation and apply the necessary adjustments (if any) if the issue persists, please send us a similar isolated runnable project where it can be observed, so we can inspect it further, determine what is causing it, and suggest a solution that is most suitable to the specific use case. Thank you in advance.
Regards,
Dimiter Topalov
Progress Telerik