Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – serverSideDataSource triggering twice in ag-grid

serverSideDataSource triggering twice in ag-grid, When the filter set on session and reloading the window. The below method triggering twice

 serverSideDataSource(count: number) {
        return {
          getRows: (params) => {
            //add sortModel for dynamically created columns
            params.request.sortModel.forEach((sortItem) => {
              if (sortItem.colId.split('&').length > 1) {
                const sortModelObj = {};
                sortItem.colId.split('&').forEach((subCol) => (sortModelObj[subCol] = { ...sortItem, colId: subCol }));
                params.request.sortModel = Object.values(sortModelObj);
              }
            });
            const sortModel = Object.keys(params.request.sortModel);
            let where = this.whereBy;
            if (this.filterStateWhere.length !== 0) {
              where = [...this.whereBy, ...this.filterStateWhere];
              const mainFilterModel = this.gridApi.getFilterModel();
              const filterStateModel = JSON.parse(this.cacheSvc.getState('session', `${this.viewType}/${'FilterState'}`));
              params.request.filterModel = { ...mainFilterModel, ...filterStateModel };
            }
            const filterModel = Object.keys(params.request.filterModel) as string[];
            this.payload = getDefaultPayload({
              params,
              gridOptions: this.gridOptions,
              order: this.orderBy,
              where,
              select: this.selectBy
            });
            this.payload.limit = this.gridOptions.paginationPageSize;
            // main server request
            if (filterModel.length !== 0) {
              this.filterChecks(params, filterModel, sortModel);
            } else {
              if (sortModel.length !== 0) {
                this.payload.offset = this.gridApi.paginationGetCurrentPage() > 0 ? params.request.startRow : 0;
                this.payload = this.applySortPayload(params.request.sortModel);
              }
              this.togglePagination(count);
              this.fetchItemsRequest(params, count);
            }
          }
        };
      }
Tags:

2

Answers


  1. 0

    My comment is too long so I’m posting this as an answer, although I am not sure it will correct your problem. That being said here are some problems I do see in your code. I hope correcting them will resolve your issue.

    Do not modify the grid’s internal data

    I strongly suggest that you do not edit params directly, as this can cause unexpected behaviour. The params object gives you access to some internal datas and methods of the grid, that you must not update directly. If you want to update them, you must use the grid’s methods, such as setFilterModel.

    However in your case I don’t think you’re trying to edit the content of the grid, I think you’re trying to give your external fetcher a properly formatted body. In that case, you should create a new object instead of modifying the internal grid’s data and passing it to your fetcher. Something like this: const body = {...}. Or, if needed, a deep copy: const body = structuredClone(params.request.sortModel). The deep copy prevents you from modifying the grid directly.

    Passing new data to the grid

    I see you are not calling params.success to give the grid new data after doing your fetch. This probably means you are relying on an external data source, that is then passed down to the component through rowData. Note that one of the disadvantages of AgGrid is the fact that it does not adapt to the philosophy of the frameworks it is implemented on, and you still need to use their imperative API if you want to work well and avoid much trouble. If your use case is client-side data, you’ll probably be fine by using the rowData prop. Otherwise, you probably want to prefer using the imperative approach:

    At the end of getRows, return data from your fetcher (that will require you to make your getRows function async), and pass that data to the grid using its API: params.success({ rowData: newRowData, rowCount: newRowCount }).

    Of course you can still use the rowData property of the component, but you’re more likely to get into complications as AgGrid’s imperative approach is not very compatible with Angular’s declarative approach.

    Login or Signup to reply.
  2. 0

    im having the same error but little different. For me its fetching twice then finally resolving in the second fetch. this is my code

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search