Hello,

Thank you for reaching out with your query!

Yes, there is an event available that you can use to handle a single click on any cell in an Infragistics data grid. For example, in the igx-grid component, you can leverage the cellClick event. This event is fired whenever there is a single click on any cell of the grid. You can use it to capture and handle single-click actions effectively.

Here’s a simple example of how you can implement it:

<igx-grid

  #grid

  [data]="data"

  [autoGenerate]="false"

  width="100%"

  height="650px"

  (cellClick)="cellClick($event)"

> 

</igx-grid>

In your component, you can define the handler function like this:

public cellClick(event: any): void {

  console.log('Cell clicked:', event);

  // Your custom logic here

}

This approach ensures that only single-click events are captured. If you're working with other grids, similar events are also available in their respective APIs for handling cell clicks.

Additionally, I’ve created a working sample for your reference:
StackBlitz Example

The described scenario could be observed here:

Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Associate Software Developer

Infragistics

Hello,

After upgrading your project to the Ignite UI for Angular and Angular versions 16, you've encountered an behavior where certain icons are not available and not rendering correctly.

Possible Causes and Solutions:

1. Material Icons Font Not Loading Properly: Ensure that the Material Icons font is correctly linked in your index.html. The link you provided seems correct:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

However, there might be issues with loading external resources, especially if your application is running in an environment without internet access. In such cases, consider hosting the font files locally and referencing them appropriately.

2. Confirm Module Imports:
Check that the IgxIconModule is imported in your Angular module:

import { IgxIconModule } from '@infragistics/igniteui-angular';

@NgModule({

  imports: [

    // other imports

    IgxIconModule,

  ],

  // other configurations

})

export class AppModule {}

This import is necessary for the igx-icon component to function properly.

3. Icon Font Family Configuration: The igx-icon component uses the Material Icons font by default. If you've customized the icon font family elsewhere in your application, ensure that the igx-icon is set to use the correct font family. You can explicitly set the font set using the family input:

<igx-icon family="material"></igx-icon>

This ensures that the igx-icon component uses the Material Icons font.

4. Consider Material Icons Extended:
If you're using icons beyond the standard Material Icons set, you might need to include the Ignite UI Material Icons Extended. Install the package:

npm install @igniteui/material-icons-extended

5. Version Compatibility: Verify that the versions of @infragistics/igniteui-angular, @angular/material, and @angular/core are compatible with each other. Incompatibilities can lead to unexpected behavior. Consult the official documentation and update guides for each library to ensure compatibility.

6. Inspect for CSS Conflicts:
Examine your stylesheets for any CSS that might override the styles of the igx-icon component, potentially causing it not to display.

7. Clear Caches:
Clear your browser cache and ensure that your build artifacts are up to date by running:

ng cache clean

Then rebuild your project to ensure all changes are applied.

Additional Checks:

• Check Console for Errors: Open your browser's developer console to check for any errors or warnings related to font loading or icon rendering.
• Review Network Requests: Use the network tab in developer tools to ensure that the font files are being loaded successfully without any 404 errors.

Additional Resources:

• Angular Icon Component – Ignite UI for Angular
• Angular Icon Service – Ignite UI for Angular
• Angular Material Icons – Ignite UI for Angular

These resources discuss similar issues and might provide further insights into resolving the described behavior.

By systematically checking these aspects, you should be able to identify and resolve the issue with icon rendering in your application.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Associate Software Developer

Infragistics

Hello,

Thank you for your response! The issue has been successfully logged, and our development team will review it as part of their ongoing work. They'll address it as soon as possible based on their priorities and timelines.

I appreciate your understanding, and I'll make sure to keep you informed of any significant updates. In the meantime, please don't hesitate to reach out if you have any other questions or need further assistance in the logged issue.

Regards,

Georgi Anastasov

Associate Software Developer

Infragistics

Hello,

Thank you for your thorough follow-up and the effort you’ve put into troubleshooting the issue. I truly appreciate your diligence in working through the steps.

Regarding the situation, I recommend keeping an eye on the logged issues in our ignite-cli repository. Our development team is actively monitoring and addressing these reports, and you’ll be able to find updates and guidance directly from them on how this issue is being handled.

As for your current scenario, since the errors seem to occur specifically with the Side Navigation + Login template, there are a couple of potential workarounds you can consider:

1. Clear the errors manually in the new project after running it. This should allow the project to execute properly. While this requires some manual effort, it’s a viable solution to get the project up and running.
2. Opt for a different template, such as the Base Structure or Empty Project. These templates are less complex and should work without the errors you're experiencing, providing a smoother setup process.

Please feel free to reach out if you encounter additional challenges or have any questions. Your feedback and patience are invaluable to us, and we’re committed to resolving this issue as quickly as possible.

Thank you again for your understanding, and don’t hesitate to contact us if you need further assistance.

Regards,

Georgi Anastasov

Associate Software Developer

Infragistics

Hello,

Thank you for providing the detailed information. I was able to reproduce the behavior you described, and I have logged the issue here for further investigation:
https://github.com/IgniteUI/igniteui-cli/issues/1362

Our development team will review, discuss, and examine the problem to implement a fix. I recommend watching the GitHub issue to stay updated on its progress. Once resolved, the fix will be included in a future release.

When the next version becomes available, please make sure to update the IgniteUI CLI to take advantage of the resolution.

Thank you for your patience and understanding! Please let me know if you need any further assistance in the meantime.

Regards,

Georgi Anastasov

Associate Software Developer

Infragistics

Hello,

Thank you for providing all the details about the issue you are facing. The error occurs because the version of igniteui-cli you are using (14.3.6) requires Angular version 19. However, your current Angular version is 18.2.13.

To resolve this issue, you have two possible approaches:

Approach 1: Update Angular and Ignite UI Angular to Version 19

If you want to use the latest igniteui-cli version (14.3.6), you need to update your Angular project to version 19, as well as install the compatible version of Ignite UI for Angular.

Update Angular CLI globally to version 19:

npm uninstall -g @angular/cli

npm install -g @angular/cli@19

Update your project to Angular 19:Go to your project directory and run:

ng update @angular/cli@19 @angular/core@19

Install the compatible Ignite UI for Angular version:

npm uninstall igniteui-angular

npm install igniteui-angular@latest

Verify the installed versions:

ng version

npm list igniteui-angular

Now, you should have Angular and Ignite UI Angular at version 19.

Approach 2: Revert IgniteUI CLI to Version 14.2.3

If you prefer to stick with Angular version 18.2.13, you can downgrade igniteui-cli to version 14.2.3, the last version of 14.2 month ago, which is compatible with Angular 18.

Uninstall the current IgniteUI CLI:

npm uninstall -g igniteui-cli

Install IgniteUI CLI version 14.2.3:

npm install -g igniteui-cli@14.2.3

Verify the installed version:

ig -v

You should now see version 14.2.3.

Generate a new project:

ig new

Reference

For more details about the igniteui-cli releases and compatibility, you can refer to the official release notes here:
Ignite UI CLI Releases on GitHub

Let me know which approach works best for you, or if you need further assistance.

Regards,

Georgi Anastasov

Associate Software Developer

Infragistics

Hello,

Thank you for reaching out with your request to prevent free-text entry in the igx-simple-combo component while allowing only predefined list selections. Ignite UI Angular’s igx-simple-combo does support configurations to meet this requirement. Below is the recommended approach to ensure users can select only from the provided list without entering custom values.

Solution Overview

To achieve the desired behavior, we’ll leverage two main techniques:

1. Disable Custom Values: Set the allowCustomValues property to false to ensure that only values included in the data source can be selected.
2. Suppress Keyboard Input: Implement a handler for the (keydown) event to block any manual typing in the combo’s input field, which effectively prevents all custom or free-text entry.

This approach will ensure the combo acts similarly to the UltraWinCombo’s DropDownStyle = DropDownList mode, allowing users to select the nearest entry in the list without allowing free text entries.

Code Implementation

Below is the detailed code implementation using these techniques:

HTML Template

Component TypeScript

In the TypeScript file, add a method to handle the keydown event, which will prevent any keyboard entry:

export class YourComponent {
    items = ["Item1", "Item2", "Item3"]; // Replace with actual data source
    selectedItem: string;
 
    preventInput(event: KeyboardEvent) {
        event.preventDefault(); // Blocks all keyboard input
    }
}

Explanation of Code

• allowCustomValues: By setting [allowCustomValues]="false", we disable the ability for users to add values that are not present in the items data array.
• keydown Event: The (keydown) event on the <igx-simple-combo> element calls the preventInput function every time a key is pressed. This function uses event.preventDefault() to suppress the default behavior, effectively blocking all keyboard input.

With this configuration, users will only be able to navigate and select values using the combo’s dropdown menu. Typing will automatically search for and select the closest matching entry.

Please feel free to reach out if you have any questions or would like further adjustments to this solution.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics