igniteui / igniteui-react-examples

samples browser app and individual samples on how to use Ignite UI for React components

Examples of Ignite UI for React Components

This repository contains over 500 examples on how to use Ignite UI for React components:

• Charts: Area, Bar, Column, Composite, Donut, Financial/Stock, Line, Pie, Polar, Radial, Scatter, Shape, Sparkline, Stacked, Step,
• Maps: Geographic Map, Treemap,
• Gauges: Bullet Graph, Linear Gauge, Radial Gauges
• Grids & Lists: Grid, List, Tree, Table / Grid, Spreadsheet
• Other: Dock Manager, Date Picker, Multi-Column Combobox

Branches

NOTE: You should use master branch of this repository if you want to run samples on your computer. Use the vnext branch only when you want to contribute new samples to this repository.

Preview

You can preview and browse all samples in this repository by opening our React Samples Browser. Alternatively, you you can view these samples with detailed information in our React Help Documentation.

In addition, you can run each sample project individually from the ./samples folder or you can run from the ./browser folder to browse all samples in one website (see instructions below). You can run each sample on Code Sandbox website by clicking on the Edit Sandbox button in a readme file of sample project, e.g.

./samples/charts/category-chart/overview/README.md

Setup

To set up this project locally, clone this repository:

git clone https://github.com/IgniteUI/igniteui-react-examples.git

Running Individual Sample

• check out the master branch

• in VS Code, open a folder with existing sample, e.g.

./samples/charts/category-chart/axis-options/

• type npm install --legacy-peer-deps command in terminal window

• type npm run start command in terminal window

• Wait until the build is completed and then open http://localhost:4200 in your browser.

At this point, you should see a website hosted example of Ignite UI for React component

Running All Samples

• check out the master branch

• open VS Code as Administrator

• open the browser folder in this repository, e.g. C:\GitHub\igniteui-react-examples\browser

• select View - Terminal menu item

• type npm install --legacy-peer-deps command in terminal window

This will install required packages and Ignite UI for React packages

• type npm run start command in terminal window to start this application locally

Note this application copies all individually sample projects from ./samples to ./browser/src folder when it is about to start running. Therefore, any changes to ./browser/src will be overridden on consecutive run of the application.

Wait until the build is completed and then open http://localhost:4200 in your browser. You should see a website with navigation menu for browning all samples in this repository.

Adding New Sample

• create a new branch from the vnext branch

• open a folder with existing sample, e.g.

./samples/charts/category-chart/axis-options/

• copy the sample and rename the new folder, e.g.

./samples/charts/category-chart/axis-types/

• open the newly created folder in VS Code

• rename the .tsx file in src folder, using this naming convention:

ControlNameSampleName.tsx

./samples/charts/category-chart/axis-types/src/CategoryChartAxisTypes.tsx

• open the .tsx file

• rename class to the name of .tsx file

• type npm install --legacy-peer-deps command in terminal window

• type npm run start command in terminal window

• implement the new sample in the .tsx file

• close the new sample project in VS Code

• delete node_modules folder in the new sample project

• follow instructions in the next section

Verify New Sample

• open the root folder of this repository in VS Code

• type gulp updateSamples command in terminal window

NOTE this will re-generate the Readme.md file in the new sample

• type npm run start command in terminal window

• open http://localhost:4200 in your browser

• verify that the new sample is listed in the navigation menu

• verify that the new sample loads by clicking navigation link

• verify that there are no errors in DEV console

• take a screenshot of the new sample with navigation menu

• commit your changes

• create a pull request and target the vnext branch

• paste the screenshot in you pull request

• submit your pull request

Learn More

To learn more about Ignite UI for React components, check out the React documentation.

Updating Version of IgniteUI Packages

Perform these steps to update version of Ignite UI for React packages in all samples. NOTE that the order of these steps is very important.

• open this repo in VS Code
• open gulp-samples.js file
• navigate to the updateIG function
• change version of Ignite UI for React packages in the packageUpgrades array
• open terminal window
• run cd browser command
• run gulp updateIG command
• run npm install --legacy-peer-deps command
• create pull request with your changes
• open the Igniteui-xplat-example repo in VS Code
• update version of Ignite UI for React packages in React template
• create pull request with your changes in Igniteui-xplat-example repo

igniteui-react-examples's Issues

Navigation Drawer samples issues

1. The div element that has the onClick event handled to toggle the nav drawer menu has no size, so as the drawer is initially open, once clicked outside so it gets closed, it cannot be reopened again.
   (igniteui-react-examples\samples\menus\nav-drawer\add-drawer-items\src\index.tsx line 21)

Possibly toggle the drawer with a button, as in the Angular samples - https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer#angular-navigation-drawer-example

2. Multiple nav drawer items can be active at a time, which is different than the WC and Angular samples behavior. Also, activating an item does not work in case the click is over the slotted icon or content elements of the drawer item.

3. In the topic there is a 1px black border of the <div part="mini"> showing above the drawer:

Valid for Blazor and Web Components topics as well

Issue logged for WC samples - IgniteUI/igniteui-wc-examples#649
Issue logged for Blazor samples - IgniteUI/igniteui-blazor-examples#605

port custom samples from blazor to react

port custom samples from blazor to this react repo:
IgniteUI/igniteui-blazor-examples#444

Update stepper animations sample

Stepper animations sample should be updated with the horizontalAnimation, verticalAnimation and animationDuration properties binding

Some calendar samples throw errors in dev tools

Calendar samples with IgrRadio buttons
https://staging.infragistics.com/react-demos/samples/scheduling/calendar-formatting
https://staging.infragistics.com/react-demos/samples/scheduling/calendar-size

throw errors in dev tools:
Each child in a list should have a unique "key" prop

On each IgrRadio, add key property setting with a unique value

Explore using vite instead of webpack to speed up SB builds

Create a mechanism to prevent scrolls from propagating after reaching the scroll end of grids

So that when the sample is viewed inside a docfx page, the page doesn't scroll after the grid is scrolled all the way top/bottom.

In angular this is achieved using the IgxPreventDocumentScroll directive.

Radio Group: Radio Buttons are not unchecked when another is checked

All samples that use the IgrRadioGroup need a name attribute, so that only one radio button is checked at a time.
Similar to IgniteUI/igniteui-webcomponents#938

Ref: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/radio

Custom samples for React

1. clipboard-operations - #325
2. column-data-types - Ivan WIP
3. conditional-cell-style-1 - IgniteUI/igniteui-xplat-examples#389
4. custom-context-menu - #318
5. data-paste-options - Topic that shows this is disabled for all platforms. Uses a custom directive in angular.
6. data-searching - #314
7. finjs - #372
8. groupby-custom - #374
9. groupby-styling - this should become a xplat sample: IgniteUI/igniteui-xplat-examples#213.
10. infinite-scroll - #373
11. multi-cell-selection-mode - #322
12. row-drag-base - #375

slider sample has overlapping labels

slider sample has overlapping labels:
https://staging.infragistics.com/react-demos/samples/inputs/slider-value-format

text elements are clipped

https://staging.infragistics.com/react-demos/samples/layouts/card-overview

https://staging.infragistics.com/react-demos/samples/layouts/card-styling

Stepper Samples errors

The following errors are thrown when running the stepper samples against the latest igniteui-react verison "18.5.2-beta.2"

images are clipped/stretched

images are clipped/stretched
https://staging.infragistics.com/react-demos/samples/layouts/card-semi-horizontal

Grid State Persistence sample throws error on All Features checkbox click.

1. Open sample at: https://staging.infragistics.com/react-demos/grids/grid/state-persistence-main
2. Click the All Features checkbox.

Throws error: main.6a683c28.js:2 TypeError: Cannot read properties of undefined (reading 'applyStateFromString')

Routing navigation DOM is still present for separate samples worsening performance for using React docs

Open any sample such as https://www.infragistics.com/react-demos/grids/grid/overview

While it doesn't show any navigation UI, you can see all navigation is actually loaded and present in the DOM worsening performance.

Memory and other issues running browser

@ChronosSF
@dkamburov

https://infragistics.visualstudio.com/NetAdvantage/_build/results?buildId=146832&view=logs&j=d3d782b6-b531-590c-3f8c-1d057b14221a&t=20fc2f5c-b8f0-5188-1a76-c13924e7d32a&l=228

buttons are missing icon/text

many new samples are missing icons/images, e.g.

https://staging.infragistics.com/react-demos/samples/layouts/card-styling

https://staging.infragistics.com/react-demos/samples/layouts/card-overview
https://staging.infragistics.com/react-demos/samples/layouts/card-styling

https://staging.infragistics.com/react-demos/samples/grids/tree-basic-example

https://staging.infragistics.com/react-demos/samples/grids/list-overview

slider sample throws errors

the slider-tick-labels sample throws errors and it does not render
https://staging.infragistics.com/react-demos/samples/inputs/slider-tick-labels

chat does not load up after npm start

how do i load up the chart after running npm start.

Add tick label

As Mr. DiFilippo pointed out in his support response I hearby open a feature request for IgrCategoryXAxis

Goal is to enable labels at the ticks - not in the middle of a bar in the IgrDataChart

All the best
Julian Wiche
Kriko Engineering

What we could consider adding is a tick label, which would completely separate from the axis label.

I would suggest submitting a new product idea here:
https://github.com/IgniteUI/igniteui-react-examples/issues

Michael DiFilippo
Software Developer
Infragistics, Inc.

Samples browser fails with eslint errors when compiling under a Japanese Windows OS

Use Windows with language and culture set to Japanese.
Do npm run build
The following errors appear:

Syntax error: Identifier expected (75:59)

src\samples\grids\grid\cell-editing-sample\WebGridCellEditSampleRoleplay.ts
Line 110:25: Irregular whitespace not allowed no-irregular-whitespace
Line 134:25: Irregular whitespace not allowed no-irregular-whitespace

src\samples\grids\grid\column-pinning-right-side\AthletesDataExtended.ts
Syntax error: ',' expected (2179:25)

src\samples\grids\grid\column-resize-styling\AthletesData.ts
Syntax error: ',' expected (1333:25)

src\samples\grids\grid\conditional-cell-style-1\AthletesData.ts
Syntax error: ',' expected (1333:25)

src\samples\grids\grid\conditional-cell-style-2\AthletesData.ts
Syntax error: ',' expected (1333:25)

src\samples\grids\grid\row-paging-basic\AthletesData.ts
Syntax error: ',' expected (1333:25)

src\samples\grids\grid\row-paging-options\AthletesData.ts
Syntax error: ',' expected (1333:25)

src\samples\grids\grid\toolbar-sample-1\AthletesData.ts
Syntax error: ',' expected (1333:25)

src\samples\grids\grid\toolbar-sample-2\AthletesData.ts
Syntax error: ',' expected (1333:25)

src\samples\grids\grid\toolbar-sample-3\AthletesData.ts
Syntax error: ',' expected (1333:25)

src\samples\grids\grid\toolbar-style\AthletesData.ts
Syntax error: ',' expected (1333:25)

Search for the keywords to learn more about each error.

Update Fallback Page with image/info

Update React Sample Fallback Page with image/info such that it looks like WC Sample Fallback Page

To test fallback, navigate to any sample and append any text in URL, e.g. "-12345"
https://staging.infragistics.com/react-demos/samples/charts/pie-chart-legend-12345

React Updating Panes in Dock Manager Example does not show map

goto
https://www.infragistics.com/products/ignite-ui-react/react/components/layouts/dock-manager-updating-panes#react-updating-panes-in-dock-manager-example

in the bottom right pane, only the markers for the map are displayed, the background is missing

expansion-panel throws error about missing "key" prop

sample throws errors in dev console when running locally on the first load of the page:
http://localhost:4200/react-demos/samples/layouts/expansion-panel-usage

linear-progress-indicator should have initial value

progress bar should be initialized to a value of 50-75

https://staging.infragistics.com/react-demos/samples/inputs/linear-progress-indicator-dynamic

React Grid examples don't add the CSS content in the samples metadata jsons

When the jsons for the code viewer metadata are created they all have this for the css file:

 {
  "hasRelativeAssetsUrls": false,
  "path": "../samples/grids/grid/binding-nested-data-1/src/index.css",
  "content": "/* shared styles are loaded from: */\r\n/* https://static.infragistics.com/xplatform/css/samples */\r\n",
  "isMain": true,
  "fileExtension": "css",
  "fileHeader": "css"
 }

Instead the content should be properly obtained from the samples' css files.

React Custom Group By Example GroupBy option drop-down does not open.

Sample at: https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/grid/groupby#react-custom-group-by-example
Does not open the drop-down with custom grouping options.