JavaScript/jQuery ButtonGroup Options

accessKey

activeStateEnabled

buttonComponent

buttonRender

buttonTemplate

$(function() {
    $("#buttonGroupContainer").dxButtonGroup({
        // ...
        buttonTemplate: function(itemData, $buttonContent) {
            $buttonContent.append(
                // Custom jQuery elements go here
            )
            // ===== or =====
            return /* your markup goes here */
        }
    });
});

<dx-button-group ... 
    buttonTemplate="myTemplate">
    <div *dxTemplate="let buttonData of 'myTemplate'">
        <!-- your markup goes here -->
    </div>
</dx-button-group>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxButtonGroupModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxButtonGroupModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxButtonGroup ...
        button-template="myTemplate">
        <template #myTemplate="{ data }">
            <!-- your markup goes here -->
        </template>
    </DxButtonGroup>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxButtonGroup } from 'devextreme-vue';

export default {
    components: {
        DxButtonGroup
    },
    data() {
        return {
            // ...
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { ButtonGroup } from 'devextreme-react';

const renderButton = (data) => {
    return (
        {/* your markup goes here */}
    );
}

class App extends React.Component {
    render() {
        return (
            <ButtonGroup ...
                buttonRender={renderButton}
            />
        );
    }
}

export default App;

disabled

elementAttr

$(function(){
    $("#buttonGroupContainer").dxButtonGroup({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<dx-button-group ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-button-group>

import { DxButtonGroupModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxButtonGroupModule
    ],
    // ...
})

<template>
    <DxButtonGroup ...
        :element-attr="buttonGroupAttributes">
    </DxButtonGroup>
</template>

<script>
import DxButtonGroup from 'devextreme-vue/button-group';

export default {
    components: {
        DxButtonGroup
    },
    data() {
        return {
            buttonGroupAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React from 'react';

import ButtonGroup from 'devextreme-react/button-group';

class App extends React.Component {
    buttonGroupAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <ButtonGroup ...
                elementAttr={this.buttonGroupAttributes}>
            </ButtonGroup>
        );
    }
}
export default App;

focusStateEnabled

height

hint

hoverStateEnabled

itemComponent

itemRender

items[]

buttonGroupInstance.option('items', newItems);

itemTemplate

keyExpr

onContentReady

onDisposing

onInitialized

onItemClick

onOptionChanged

onSelectionChanged

rtlEnabled

DevExpress.config({
    rtlEnabled: true
});

selectedItemKeys

selectedItems

selectionMode

stylingMode

tabIndex

visible

width