Tips for displaying the sort and filter icons in an ag-grid when loading with pre-filtered and sorted data

I am facing an issue with my application that involves persisting sorting and filtering criteria for an ag-grid control. We are utilizing server-side sorting and filtering, so once the sort and filter criteria are loaded, the grid data is then loaded accordingly.

Upon initial loading of the grid, the displayed row data is correct based on the persisted sort and filter data. However, there is no indication in the grid, such as sort or filter icons, to show that the sort/filter is in place. How can I make sure these indicators are displayed when the data is initially loaded?

I attempted using the gridOptions.api.setFilterModel() method, but encountered issues where calling it before the data load resulted in an exception. Calling it after the data was loaded caused the data to reload, leading to an infinite loop.

I managed to set the "sort" property on the columnDef during grid initialization but have been unsuccessful in doing the same with the filter data.

It's worth mentioning that we are also using an Angular 2 filter component (implementing AgFilterComponent) with a "filterFramework" property set in the columnDef.

Thanks, Stuart.

angulartypescriptag-grid

Answer №1

At the beginning of our process, I ensure that each filter icon's status is initialized correctly by calling the setFilterActive method.

Below is an illustration of how this can be accomplished:

gridOptions.isExternalFilterPresent = () => {
    let isFilterActive = myExternalFiler.ColumnFilters.length > 0
    if (isFilterActive) {
        //used at init time to show the filter icon correctly
        for (let colFilter of myExternalFiler.ColumnFilters) {
            if (!gridOptions.columnApi.getColumn(colFilter.ColumnId).isFilterActive()) {
                gridOptions.columnApi.getColumn(colFilter.ColumnId).setFilterActive(true)
            }
        }
    }         
    return isFilterActive;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method to utilize the Escape Key in Angular to dismiss a mat-dialog?

I am currently utilizing angular version 15.0 and I am interested in how to close a mat-dialog using two different methods. The first method involves clicking on one of the two buttons (submit / cancel) that are specified in the actions section of the dial ...

angulartypescript

Running the npm install command will eliminate any external JS or CSS files that are being

For my project, I incorporated jquery-datatimepicker by including jquery.datetimepicker.min.css and jquery.datetimepicker.full.min.js in angular.json and placed them within the node_modules/datetimepick directory. Here is a snippet of my angular.json conf ...

javascriptnode.jsangularnpm

Please indicate the Extended class type in the return of the child Class method using TypeScript 2.4

I'm currently in the process of upgrading from TypeScript version 2.3.2 to 2.4.2. In the previous version (2.3), this piece of code functioned without any issues: class Records { public save(): Records { return this; } } class User extends ...

typescriptmigrationparent-childtypescript2.4

What is the process for declaring a module in order to perform named imports?

Currently, I am utilizing graphql-tag in my project. The structure of my files is as follows: ./operation.graphql Query User { ... } ./test.ts import { User } from './operation.graphql'; /// Module ''*.graphql'' has no ...

typescriptmodulegraphqlgraphql-tag

challenges encountered while integrating an external library into Angular 8

I am currently experimenting with implementing a profitWell script in my angular application. Here is the script I am working with: <script id="profitwell-js" data-pw-auth="XXX"> (function(i,s,o,g,r,a,m){i[o]=i[o]||function(){(i[o].q=i[o].q| ...

angular

Angular noticed a shift in the expression once it was verified

Whenever I try to invoke a service within the (change) action method, I encounter this issue: ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Cur ...

javascripthtmlangulartypescript

What is the best way to show the User from useContext in typescript?

Currently, I am working on implementing useContext in a typescript project. Specifically, I am aiming to utilize Usercontext within one of my child components. Below is the code snippet for my root app component: export type UserC = { readonly user: strin ...

reactjstypescript

No GraphQL type definitions were discovered for the specified pointers: src/**/*.graphql

I am utilizing the @graphql-codegen/cli tool to automatically generate TypeScript types from my GraphQL server. Below is the content of my codegen.yml: overwrite: true schema: "http://localhost:3001/graphql" documents: "src/**/*.graphql" generates: src/ ...

typescriptgraphqlcode-generationgraphql-codegen

Guide on transforming an Angular 6 project into a Progressive Web Application (PWA)

Currently, my Angular 6 project is up and running smoothly. However, I am looking to integrate PWA into my existing application. When I execute the following command: ng add @angular/pwa The output displays: + @angular/<a href="/cdn-cgi/l/email-protec ...

angularangular6progressive-web-apps

The functionality of the String prototype is operational in web browsers, but it encounters issues

Version: 8.1.0 The prototype I am working with is as follows: String.prototype.toSlug = function () { return (<string>this) .trim() .toLowerCase() .replace(/\s+/g, '-') .replace(/[^\w\-]+/g, '') ...

javascriptnode.jsregextypescript

Prevent the function from affecting type deduction

I am working with a type similar to this: interface Test<R, T> { inputType: R; transformer: (input: R extends any ? R : never) => T; } // function for inferring type function inferTest<T extends Test<any, any>>(t: T): T { ...

typescripttypescript-generics

Problem: When trying to access the property 'completed' of an object in Angular 2, an error is

My understanding is that by using @Input(), this component should be able to bind <experiment [experiment]="experiment.completed"></experiment>. Here is the hierarchy: https://i.stack.imgur.com/6UwHt.png experiment.detail.component.ts import ...

angular

What is the best way to create a fixed array of unchangeable objects?

I am trying to create a class that requires an array of objects as one of its constructor parameters, with the condition that neither the array nor the objects in it can be modified. My current approach involves using the readonly modifier along with the g ...

typescript

The type checkbox cannot be converted to type number

Currently, the TodoApp is utilizing the Inquirer.js module for questioning purposes. However, an issue has arisen with the error message stating type checkbox is not assignable to type number. function promptComplete(): void{ console.clear(); inq ...

typescript

Encountering issues with MediaSession.setPositionState() and seekto functionalities not functioning properly

Having trouble with MediaSession.setPositionState() not displaying the audio time and seekbar not behaving as expected. const sound= document.querySelector('sound'); function updatePositionState() { if ('setPositionState' in navigato ...

javascripttypescriptnavigatorandroid-music-playermediasession

Breaking down links in Angular4

Currently, I am working with Angular4 on the MEAN Stack and retrieving data from Mongo DB in the form of a list of hyperlinks. However, when I click on each link in the UI, they are opening as a combined link instead of separate links. To address this issu ...

htmlcssjsonangularmean-stack

Using Typescript to prevent the usage of await with Tslint

Can Tslint be utilized to restrict the usage of Typescript's await feature? If not, are there alternative linters available for this purpose? ...

typescriptasync-awaittslint

There is an implicit 'any' type error binding element 'currency' in Graphql React Typescript

I am facing an issue with my code. I want to use the EXCHANGE_RATES in renderedExchangeRates, but I am receiving an error message saying "Error Message: Binding element 'currency' implicitly has an 'any' type." I understand that this is ...

reactjstypescriptgraphqlreact-typescript

Updating the host's CSS styles directly from a component

Currently, I am experimenting with the concept of incorporating a unique background image into my Angular 5 app's Bootstrap 3 login page. My objective is to alter the body CSS solely for the index.html page when the login page is accessed. Despite my ...

angularangular-components

Issue with the compatibility between Angular Material version 11.0.3 and Tailwind CSS causing functionality problems

Currently, I am utilizing Angular CLI 11.0.6 on NodeJS 14.15.4 to develop a web application for expanding my knowledge of Angular (11.0.7) in conjunction with TailwindCSS 2.0.2. Following a tutorial to install Tailwind, I had previously integrated Angular ...

angulartypescriptwebpackangular-materialtailwind-css