Search results

Group items in Popup

Grouped items are possible in SplitButton by templating entire popup with ListView. Check ListView grouping and create such items. Create ListView with id listview and provide element of the ListView as target of SplitButton to render it in popup area.

In this following example, ListView is created and its element is set as target for SplitButton.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<!-- To render ListView. -->
               <ejs-listview id='listview' [dataSource]='listItems' [fields]='field' sortOrder='Descending'></ejs-listview>
               <!-- To render splitbutton. -->
               <ejs-splitbutton content="ClipBoard" target='#listview'></ejs-splitbutton>`
})

export class AppComponent {
    // Datasource for listview.
   public listItems: { [key: string]: Object }[] = [
        {
            'text': 'Cut',
            'category': 'Basic'
        },
        {
            'text': 'Copy',
            'category': 'Basic'
        },
        {
            'text': 'Paste',
            'category': 'Basic'
        },
        {
            'text': 'Paste as Formula',
            'category': 'Advanced'
        },
        {
            'text': 'Paste as Hyperlink',
            'category': 'Advanced'
        },
    ];

    public field: Object = { groupBy: 'category' };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SplitButtonModule,
        ListViewModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);