pass filter fields with values preserving order to url

[kva]

I would like to store filter's state in url. The url should be formed by pressing apply button. When the page with url containing filter information is opened, the filter should consume this information and display on the page.

[Alexander]

Hi,

Please allow me to address some topics in a more decoupled manner.

Support Service

Before proceeding with this case, I noticed that you have no active license associated with your account. As stated in a previous discussion of ours, this limits our provided support service. 

Nevertheless, I have noticed that some of my colleagues have provided complimentary support, as they want to help you during your endeavors. I understand this is a delicate matter, but my personal appeal would be to consider the option of acquiring a license, as this would enable you to get timely and broader support.

I will be more than happy to put you in contact with our respective sales representatives, as they may sort out any further details.

That said, this does not mean I don't want to help you during your ventures. However, any alterations or subsequent inquiries regarding the approach would be subjected to the developer implementing them as per his requirements.

Approach

Generally, the Telerik UI for ASP.NET Core Filter component is designed to operate in a symbiotical manner with an existing DataSource mediator used for further processing the filters and respectively applying them to the underlying data.

Additionally, the component is considered a strongly typed one, as it revolves around building a predicate filtering abstraction.

A possible recommendation would be to create a filtering model processed on the server-side based on the existing client-side structure:

public class FilterModel
{
    public string Field { get; set; }
    public string Value { get; set; }
    public string Operator { get; set; }

    public string Logic { get; set; }
    public List<FilterModel> Filters { get; set; }
}

And beforehand, make an asynchronous request that will supplement the established client-side filters:

<script>
    $("#submitFilters").on("click", function (){
        
        var filter = $("#filter").data("kendoFilter"); // Obtain an object reference of the filter component.
        var filters = filter.filterModel.filters; // Gather the created filters.
        if(filters.length > 0){

            var mappedFilters = filters.toJSON(); // Sanitize the existing object to include only the relevant fields that will be processed on the server-side.

            $.ajax({ // Make an asynchronous request.
                url: "@Url.Action("Get_Filters", "Home")",
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(mappedFilters) // Pass the mapped filters.
            })

        }
        else{
            alert("No filters are applied");
        }
    })
</script>

This should then allow you to intercept the request body arguments in the following manner:

I hope this helps.

Kind Regards,
Alexander
Progress Telerik