igniteui / igniteui-react-examples Goto Github PK

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.

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

Description:

We need to ensure that the IgrCombo combo templating sample is implemented after resolving the existing bug. This sample is currently non-functional due to the bug described in Bug ID 29182.

Steps to Reproduce:

1. Attempt to use the templating feature in the IgrCombo ComboBox component.
2. Observe that the feature does not work as expected.

Expected Behavior:

The IgrCombo ComboBox should correctly display templates as per the provided configuration.

Current Behavior:

The templating feature does not work due to the unresolved bug.

Additional Notes:

• The templating sample must be revisited and tested thoroughly once the bug fix is applied.
• Ensure that new sample is created and verified for accuracy.

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.

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

Sample at: https://staging.infragistics.com/react-demos/grids/grid/custom-context-menu
Does not show context menu on right click.

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

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

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

@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

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

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

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

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

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

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

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

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.

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

Open this sample.
There is no space between the email input and Next button and Linear Stepper sample used in the Overview section.

For example, in WC there is a space and it looks better.

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.

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

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.

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')

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

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

Add sample similar to the one we have in WC and Blazor.

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

https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/grid/row-drag#react-grid-row-drag-example open the sample and try to drag a row from the left grid to the right. It does not work.

If you look at this sample: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/remote-data-operations#infinite-scroll-demo you can see that no data is shown and an error is thrown

The samples on all grids with row dragging from one to another are not transferring the dragged rows. This is not working on prod as well.

Steps to reproduce:

1. Open sample at: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/row-drag
2. Drag a row from the left grid to the right grid.
3. Row does not transfer

Expected result: row should successfully transfer between grids

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

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

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.

Sample at: https://staging.infragistics.com/react-demos/grids/tree-grid/row-selection-template-numbers
Does not correctly bind checkbox state with actual selection state.

Same for all other grids.