Skip to content

897996: After selecting the values, the selected values are in disabl… #575

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: development
Choose a base branch
from
Open

897996: After selecting the values, the selected values are in disabl… #575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bacdaed
897996: After selecting the values, the selected values are in disabl…
sureshsf3950 Jul 25, 2024
24bc0ed
897996: After selecting the values, the selected values are in disabl…
sureshsf3950 Jul 25, 2024
77ed1ae
897996: After selecting the values, the selected values are in disabl…
sureshsf3950 Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 10 additions & 41 deletions ej2-angular/dialog/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,51 +101,20 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w

>Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.

## Adding Dialog module

Once you have successfully installed the popups package, the component modules are ready to configure in your application from the installed location. Syncfusion Angular package provides two different types of ngModules.

Refer to [Ng-Module](https://ej2.syncfusion.com/angular/documentation/common/ng-module/) to learn about `ngModules`.

Refer to the following snippet to import the `DialogModule` in `app.module.ts` from the `@syncfusion/ej2-angular-popups`.

```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// Imported syncfusion DialogModule from popups package
import { DialogModule } from '@syncfusion/ej2-angular-popups';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
// Registering EJ2 Dialog Module
DialogModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

```

## Adding Dialog component

Add the Dialog component snippet in `app.component.ts` as follows.

```javascript

import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { Component, ViewChild } from '@angular/core';

@Component({
imports: [
DialogModule
],
standalone: true,
selector: 'app-root',
template: `
<div id="dialog-container">
Expand All @@ -156,11 +125,11 @@ import { EmitType } from '@syncfusion/ej2-base';
</ejs-dialog>
</div>`
})
export class AppComponent implements OnInit {
export class AppComponent {
// Create element reference for dialog target element.
@ViewChild('ejDialog') ejDialog: DialogComponent;
public onOpenDialog = function(event: any): void {
@ViewChild('ejDialog') ejDialog: any;

public onOpenDialog = (event: any): void => {
// Call the show method to open the Dialog
this.ejDialog.show();
};
Expand Down
4 changes: 2 additions & 2 deletions ej2-angular/multi-select/virtual-scroll.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ In the following example, `id` column and `text` column from complex data have b

## Binding remote data

The MultiSelect supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well.
The MultiSelect supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well.

The following sample displays the OrderId from the `Orders` Data Service.

Expand Down Expand Up @@ -184,4 +184,4 @@ The following sample shows the example for Preselect value with Virtualization.
{% endhighlight %}
{% endtabs %}

{% previewsample "page.domainurl/samples/multiselect/virtual-scroll-preselect" %}
{% previewsample "page.domainurl/samples/multiselect/virtual-scroll-preselect" %}
46 changes: 19 additions & 27 deletions ej2-angular/multicolumn-combobox/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,26 +94,6 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w

>Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.

## Registering MultiColumn ComboBox module

Import MultiColumn ComboBox module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-multicolumn-combobox`.

```javascript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the MultiColumn ComboBoxModule for the MultiColumn ComboBox component
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox';
import { AppComponent } from './app.component';

@NgModule({
//declaration of ej2-angular-multicolumn-combobox module into NgModule
imports: [ BrowserModule, MultiColumnComboBoxModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```

## Adding CSS reference

The following CSS files are available in `../node_modules/@syncfusion` package folder.
Expand All @@ -131,26 +111,37 @@ This can be referenced in [src/styles.css] using following code.
Modify the template in [src/app/app.component.ts] file to render the Angular ComboBox component. Add the Angular MultiColumn ComboBox by using `<ejs-multicolumncombobox>` selector in `template` section of the app.component.ts file.

```javascript

import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
import { MultiColumnComboBoxComponent } from '@syncfusion/ej2-angular-multicolumn-combobox';

@Component({
selector: 'app-root',
// specifies the template string for the MultiColumn ComboBox component
template: `<ejs-multicolumncombobox id='multicolumn'></ejs-multicolumncombobox>`
imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
standalone: true,
selector: 'app-root',
// specifies the template string for the MultiColumn ComboBox component
template: `<ejs-multicolumncombobox id='multicolumn'></ejs-multicolumncombobox>`
})
export class AppComponent { }

```

## Binding data source with fields and columns

After initializing, populate the MultiColumn ComboBox with data by using the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/multicolumn-combobox#datasource) property, to map the data for each specified columns use the `<e-column>` selector and the [fields](https://ej2.syncfusion.com/angular/documentation/api/multicolumn-combobox#fields) property to map the data fields from the dataSource.

```typescript
import { Component } from '@angular/core';
import { MultiColumnComboBoxComponent } from '@syncfusion/ej2-angular-multicolumn-combobox';

import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, HostListener, ViewChild } from '@angular/core';

@Component({
imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
standalone: true,
selector: 'app-root',
// specifies the template string for the MultiColumn ComboBox component
template: `<ejs-multicolumncombobox id='multicolumn' [dataSource]='employeeData' [fields]='fields'>
Expand Down Expand Up @@ -180,6 +171,7 @@ export class AppComponent {
// maps the appropriate column to fields property
public fields: Object = { text: 'Name', value: 'EmpID' };
}

```

## Running the application
Expand Down Expand Up @@ -222,4 +214,4 @@ In the following sample, popup list's width and height are configured.
{% endhighlight %}
{% endtabs %}

{% previewsample "page.domainurl/samples/multicolumn-combobox/getting-started-cs2" %}
{% previewsample "page.domainurl/samples/multicolumn-combobox/getting-started-cs2" %}