Kendo Grid Grouping with OData

2 Answers 191 Views

Grid

2 Answers, 1 is accepted

Ozgur

commented on 11 Aug 2023, 01:50 PM | edited

Thanks a lot for your reply.

But as far as I understand I am able to group on client side, right?
Is Kendo Grid support both paging and grouping with OData (or remote data )?

I treid to have both paging and grouping with OData over your above example but I couldn't.

My code is below, the problem is that I set products in dataReceived method using setProducts despite it sets

products I couldn't access data in onDataChange method always it returns empty . Why?

import { CSSProperties, FC, useEffect, useState } from "react";
import { IntlProvider, LocalizationProvider, loadMessages } from "@progress/kendo-react-intl";
import '../../styles/kendo.css';
import trMessages from '../../localizations/tr.json';
import { GridDataLoader } from "../../modules/grid/GridDataLoader";
import Endpoints from "../../enums/Endpoints";
import { Modal, ModalHeader, OverlayTrigger, Tooltip } from "react-bootstrap";
import { toast, ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
import { AddApplicationComment, SendInvitationEmail, RejectApplication, AcceptApplication } from "../../services/Applications";
import ScholarshipApplicationsStatus from "../../enums/ScholarshipApplicationStatus";
import { UserDataSearchModel } from "../../models/UserDataSearchModel";
import { BarLoader } from "react-spinners";
import { useNavigate } from 'react-router-dom';
import Roles from "../../enums/Roles";
import ScholarshipTypes from "../../enums/ScholarshipTypes";
import { getSuccessToast, getWarningToast } from "../ToastMessages";
import { useCallback } from 'react';
import { DataResult, process, State } from "@progress/kendo-data-query";
import {
    Grid, 
    GridColumn as Column,
    GridCellProps, 
    GridDataStateChangeEvent,
    GridExpandChangeEvent,
    GridToolbar,
} from "@progress/kendo-react-grid";
import {
  setGroupIds,
  getGroupIds,
  setExpandedState,
} from "@progress/kendo-react-data-tools";
  const initialDataState: State = {
    take: 10,
    skip: 0,
    group: [{ field: "Email" }],
  };
  
  const processWithGroups = (data: DataResult, dataState: State) => {
    const newDataState = process(data.data, dataState);
    newDataState.total=data.total;
    setGroupIds({ data: newDataState.data, group: dataState.group });
  
    return newDataState;
  };
loadMessages(trMessages, "tr-TR");
const ScholarshipApplicationsPage: FC<{ roles: string[] }> = ({ roles }) => {
    const navigate = useNavigate();
    const [firstRender] = useState(true);
    const [selectedApplicationId, setSelectedApplicationId] = useState(0);
    const [addCommentPending, setAddCommentPending] = useState(false);
    const [showApplicationComment, setShowApplicationComment] = useState(false);
    const [note, setNote] = useState("");
    const [updateNote, setUpdateNote] = useState('');
    const closeApplicationComment = () => setShowApplicationComment(false);
    
    const override: CSSProperties = {
        display: "block",
        margin: "0 auto",
        borderColor: "gray",
        marginTop: '250px'
    }
    const [gridData, setProducts] = useState<DataResult>({
        data: [],
        total: 77,
    });
    const [dataState, setDataState] = useState<State>(initialDataState);
    const [resultState, setResultState] = useState<DataResult>(
        processWithGroups(gridData, initialDataState)
        
    );
  const [collapsedState, setCollapsedState] = useState<string[]>([]);
  const onDataStateChange = useCallback(
    (event: GridDataStateChangeEvent) => {
      const newDataState = processWithGroups(gridData, event.dataState);
      setDataState(event.dataState);
      setResultState(newDataState);
    },
    [gridData]
  );
  const onExpandChange = useCallback(
    (event: GridExpandChangeEvent) => {
      const item = event.dataItem;
      if (item.groupId) {
        const collapsedIds = !event.value
          ? [...collapsedState, item.groupId]
          : collapsedState.filter((groupId) => groupId !== item.groupId);
        setCollapsedState(collapsedIds);
      }
    },
    [collapsedState]
  );
  const newData = setExpandedState({
    data: resultState.data,
    collapsedIds: collapsedState
  });
    const dataReceived = (productData: DataResult) => {
        console.log("dataReceived products",productData);
        setProducts(productData);
        console.log("dataReceived setted products",gridData);
        
    };

answered on 15 Aug 2023, 10:29 AM

Hi, Ozgur,

Mixing the server-side data state changes such as paging and sorting with client-side grouping is not possible. In order to have grouping with oData server operations, I would suggest fetching the oData data on the client side and applying all the data state changes there:

https://stackblitz.com/edit/react-gpvzez?file=app%2Fmain.jsx

In addition, grouping can be done by manually adding the group to the query. For example, the below URL groups the data by `ProductName`:

const baseUrl = 'https://demos.telerik.com/kendo-ui/service-v4/odata/Products?$count=true&$apply=groupby((ProductName))&';

However, since grouping with oData is not supported for the KendoReact Grid, and will return meaningless data in the component. For this to work, it will require returning a data structure that the Grid expects:

https://stackblitz.com/edit/react-iamfq4-zqkizw?file=app%2Fproducts-loader.jsx

For more information about client-side state management (local data operations), you can check the following article:

https://www.telerik.com/kendo-react-ui/components/grid/data-operations/local-operations/

I hope this helps.

Regards,
Wissam
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Kendo Grid Grouping with OData

2 Answers, 1 is accepted