DataSource

GroupButton can populate the button items based on data source and by specifying the associated fields.

Refer the below table to know about the available fields

text

Text to be displayed in button

prefixIcon

Icon class name – prefixIcon will be displayed from the left margin of the button.

suffixIcon

Icon class name – suffixIcon will be displayed from the left margin of the button.

contentType

Specifies content type of button item

imagePosition

Specifies position of the image in a button item

Selected

Specifies the selection state of button item

URL

Used to include the URL tag to the button item

htmlAttribute

It defines the HTML attributes such as class and styles for an button item.

linkAttribute

It defines the image attributes such as height, width, styles, etc.

Local Data

To set the local JSON data, define a JSON array and initialize the GroupButton with dataSource property. Specify the column names in the fields’ property.

NOTE

the columns are bounded automatically when the fields are specified with the default names like id, text, etc…

Below is the sample to code to render the GroupButton JSON dataSource,

  • html
  • <ej-groupbutton id="groupbutton" width="auto" [dataSource]="dataList"></ej-groupbutton>
  • html
  • import { Component, ViewEncapsulation } from '@angular/core';
    @Component({
      selector: 'ej-app',
      templateUrl: './colorpicker.component.html',  
    })
    export class ColorPickerComponent { 
    dataList:Array<{text:string,contentType:string}>;
    constructor(){
      this.dataList= [
    
                    { text: "Day", contentType: "textonly" },
    
                    { text: "Week", contentType: "textonly" },
    
                    { text: "Work Week", contentType: "textonly" },
    
                    { text: "Month", contentType: "textonly"},
    
                    { text: "Agenda", contentType: "textonly"}]
    }
    }

    The above code sample will produce the following output.

    Remote Data

    To bind remote data to the GroupButton, you can assign a service data as an instance of ejDataManager to the dataSource property along with the fields mapping.

  • html
  • <ej-groupbutton id="groupbutton" width="auto" [fields]="fields" [query]="query" [dataSource]="dataManager"></ej-groupbutton>
  • js
  • import { Component, ViewEncapsulation } from '@angular/core';
        import {NorthwindService} from './services/northwind.service';
        @Component({
        selector: 'ej-app',
        templateUrl: './colorpicker.component.html', 
        providers:[NorthwindService],
        })
        export class ColorPickerComponent { 
        public dataManager:any;
        fields: any;
        public query: any;
        value: string;
        constructor(){
                this.fields = { text: 'CustomerID'};
                this.dataManager = new ej.DataManager({
                            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/", 
                            crossDomain:true
                        }); 
                this.query = new ej.Query().from("Orders").take(6);
        }
        }

    The above code sample will produce the following output.