Unable to Parse a CompositeFilterDescriptor Object generated by an Angular [Filter] Component on the Server side

[Ahmed]

Hi there,

While working with the Filter Component I was able to export an CompositeFilterDescriptor object on the client side before sending it to the server, the backend is a .net core API.

Unfortunately I tried to use Telerik.Datasource DLL in order to utilize the JSON parsing functionality inside however it seems like they are from two different worlds !

On the Angular side the CompositeFilterDescriptor looks like this 

{
    "logic": "or", 
    "filters": [ 
       {
           "field" : "unitId",
           "operator" : "eq", 
            "value" : "1005"
       }
     ]
}

On the .NET side the CompositeFilterDescriptor it is expecting something like this

{
  "logicalOperator": 1,
  "filterDescriptors": [
      {
        "member": "unitId", 
        "operator": 2 , 
        "value" : "1005"
      }
  ]
}

Summary of Differences

1- Field names are different and hence not parsed properly ( i.e. logicalOperator vs logic, member vs field)

2- Enumerations are sent as strings from Angular but parsed as Integers from Telerik.Datasource 

 

I feel a little bit confused here, is there any library provided by Telerik that I can use to capture the Angular CompositeFilterDescriptor JSON Object received from the client app inside a Web API ?

 

[Alexander]

Hi Ahmed,

Indeed there is a standalone Telerik.DataSource package, distributed via the Telerik NuGet feed. It was created mainly for the use with Blazor UI.

In the context of your scenario, the Kendo UI for Angular has examples of an integration scenario with UI for ASP.NET Core which relies heavily on the autonomous "Telerik UI for ASP.NET Core" package, rather than the separate Telerik.DataSource package, due to the model binding features provided by the framework. You can find details and examples on the following resource:

• Kendo UI for Angular - Integration with UI for ASP.NET Core

Please let me know if the aforementioned link proves helpful.

Kind Regards,
Alexander
Progress Telerik

[Ahmed]

Hi Alexandre, 

I m delighted that you answered my inquiry 😍.

I just checked the example provided and it shows the standard functionality of Grid Component State Change event.

Well that example looks good if you are going to use the Grid (Paging, Sorting, Filtering) functionality as it is, However if I would like a more complex filtering behavior I would be using the Filter Component instead .

https://www.telerik.com/kendo-angular-ui/components/filter/

 

The Filter Component works separately from the Grid Component and returns a separate CompositeFilterDescriptor object.

If you can find me an example that would link an Angular Filter control to a Web API I would be grateful .

Please check the example hereunder with an external filtering capability, the example use local filtering, so how can I perform such filtering on the server through and API call.

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/external-filtering/

 

[Yanmario]

Hi Ahmed,

My name is Yanmario from the Kendo UI for Angular support team and I will be answering your question regarding the Filter component.

Generally, our Filter components help construct the CompositeFilterDescriptor using UI elements. From there, the developer can send that descriptor to the server and use its information to filter the data and return it to the client. How the data will be filtered is entirely up to the developer, as our component only constructs the filter parameters that will be used in the backend for the filtering logic.

Regarding the example, I'm afraid there isn't one, as the Filter component was created after the standalone examples. In the future, the examples might be updated with additional components if there is demand for them.

I hope this helps. Do let me know if you have any further questions regarding Kendo UI for Angular library.

Regards,
Yanmario
Progress Telerik