Skip to content

Added Grid Loading Indicator sample and fixed Tgrid#1001

Open
tishko0 wants to merge 6 commits intovnextfrom
ttonev/toolbar-loading-indicator-samples
Open

Added Grid Loading Indicator sample and fixed Tgrid#1001
tishko0 wants to merge 6 commits intovnextfrom
ttonev/toolbar-loading-indicator-samples

Conversation

@tishko0
Copy link
Contributor

@tishko0 tishko0 commented Jan 11, 2026

Grid's Toolbar Exporting Indicator sample was missing.
Also fixed TreeGrid since the data loop was pushing unique id's to the data array, reduced data lenght since generating 3 million entries was taking too long.

import "igniteui-react-grids/grids/themes/light/bootstrap.css";
import { AthletesData } from "./AthletesData";

IgrGridModule.register();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Registering IgrGridModule is no longer needed


export default function App() {
const athletesData = new AthletesData();
const gridRef = useRef<IgrGrid>(null);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need refs for grid and toolbar

const gridRef = useRef<IgrGrid>(null);
const toolbarRef = useRef<IgrGridToolbar>(null);

const localData: any[] = [];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we are using React it would be nice to put this data setup into a useEffect and then pass the data as state. FOr example

const [localData, setLocalData] = useState([]); 
 useEffect(() => { 
    const data = localData;
    for (let i = 0; i < 10000; i += 3) {
      for (let c = 0; c < athletesData.length; c++) {
        data.push(athletesData[c]);
      }
    }

    setLocalData(data);
  }, []);

}

function showProgress() {
toolbarRef.current.showProgress = true;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using refs to manipulate the dom you can just use this

<IgrGridToolbar key="toolbar" showProgress={showProgress}>
and set up the progress indicator visibility like this using component state

  const setupProgressVisibility = () => {
    setShowProgress(true);

    setTimeout(() => {
      setShowProgress(false);
    }, 5000);
  }

and then pass this function to the button
<IgrButton key="btn" onClick={setupProgressVisibility}>

@@ -26,11 +26,17 @@ export default function App() {
const toolbarRef = useRef<IgrGridToolbar>(null);

const localData: any[] = [];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please apply all of the changes requested for the flat grid here too!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants