Server-Side

This section provides a complete example about how to use the Server-Side Row Model of AgGridReact.

Usage Example

React Component

import AgGrid from "@components/ag-grid/AgGrid";
import React, { useCallback, useMemo, useRef, useState } from "react";
import { getServerData } from "@services/api/shared/grid-api";
import { Button } from "@tag/tag-components-react-v4";
import { CheckTickLined, CrossLined } from "@tag/tag-icons";
import moment from "moment";

const MyComponent = () => {
  const url = "User/GetUsers";
  const gridRef = useRef(null);
  const [colDefs, setColDefs] = useState([
    {
      field: "userID",
      filter: "agNumberColumnFilter",
      cellRenderer: "agGroupCellRenderer",
    },
    { field: "userName", filter: "agTextColumnFilter" },
    {
      field: "userIsGroup",
      cellRenderer: (props) =>
        props.value == true ? <CheckTickLined /> : <CrossLined />,
      filter: "agSetColumnFilter",
      filterParams: {
        values: [true, false],
        valueFormatter: (params) => (params.value == true ? "Yes" : "No"),
      },
      valueGetter: (params) => Boolean(params.data.userIsGroup),
    },
    {
      field: "userFullName",
      filter: "agTextColumnFilter",
    },
    {
      field: "email",
      filter: "agTextColumnFilter",
    },
    {
      field: "creationDate",
      filter: "agDateColumnFilter",
      valueFormatter: (params) => {
        return params.value
          ? moment(params.value).format("DD/MM/YYYY HH:mm")
          : "";
      },
      filterParams: {
        browserDatePicker: true,
      },
    },
    {
      field: "FeedbackEscalatedUser.userFullName",
      headerName: "Feedback Escalated To",
      filter: "agTextColumnFilter",
    },
    {
      field: "FeedbackEscalatedTo",
      headerName: "Feedback Escalated To UserID",
      filter: "agNumberColumnFilter",
    },
  ]);

  const defaultColDef = useMemo(() => {
    return {
      flex: 1,
      minWidth: 120,
      filter: true,
      filterParams: {
        buttons: ["reset", "apply"],
        closeOnApply: true,
      },
    };
  }, []);

  const createServerSideDatasource = useCallback(() => {
    return {
      getRows: async (params) => {
        const data = await getServerData({
          url: url,
          request: {
            startRow: params.request.startRow,
            endRow: params.request.endRow,
            sortModel: params.request.sortModel,
            filterModel: params.request.filterModel,
          },
        });
        if (data?.rows) {
          params.success({
            rowData: data.rows,
            rowCount: data.total,
          });
        } else {
          params.fail();
        }
      },
    };
  }, []);

  const onGridReady = (params) => {
    const datasource = createServerSideDatasource();
    params.api.setGridOption("serverSideDatasource", datasource);
    params.api.setFilterModel(intialFilter);
  };
  return (
    <div style={{ height: 520 }}>
      <AgGrid
        ref={gridRef}
        rowModelType="serverSide"
        paginationPageSize={10}
        cacheBlockSize={10}
        paginationPageSizeSelector={[10, 20, 50, 100]}
        columnDefs={colDefs}
        onGridReady={onGridReady}
        masterDetail={true}
        defaultColDef={defaultColDef}
        pagination={true}
      />
    </div>
  );
};

Controller

[HttpPost("GetUsers")]
[SwaggerOperation(
    Summary = "Return users",
    Description = "Return users")]
public IActionResult GetUsers(AgGridRequest request)
{
    return Ok(_userAppService.GetUsersData(request));
}

Service

 public PageData<UserDTO> GetUsersData(AgGridRequest request)
 {
     var res = _userRepository.GetUsersData(request);
     return new PageData<UserDTO> { Total = res.Total, Rows = _mapper.Map<List<UserDTO>>(res.Rows) };
 }

Repository

The ApplyAgGridRequest method returns Tuple<IQueryable<T>, int>.

The first parameter: your IQueryable query after applying the AgGridRequest

The second parameter: the total data count

 public PageData<User> GetUsersData(AgGridRequest request)
 {
     var res = _atreemoDbContext.Users.AsQueryable().ApplyAgGridRequest(request);
     var data = res.Item1.ToList();
     int totalCount = res.Item2;
     return new PageData<User> { Total = totalCount, Rows = data };
 }