JavaScript/jQuery Gantt - columns.buttons
Allows you to customize buttons in the edit column or create a custom command column. Applies only if the column's type is "buttons".
disabled
| Name | Type | Description |
|---|---|---|
| column |
The column's properties. |
|
| component |
The UI component's instance. |
|
| row |
The row's properties. |
Use the function to activate or disable the button for specific rows. See a related example in the buttons[].visible topic.
icon
This property accepts one of the following:
- The icon's URL
- The icon's name if the icon is from the DevExtreme icon library
- The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
- The icon in the Base64 format
- The icon in the SVG format. Ensure that the source is reliable.
See Also
- buttons[].text
name
To configure a built-in button, assign its name to this property. The other properties in the object configure the button. For example, the following code adds a custom CSS class to the Save button:
jQuery
$(function () {
$("#ganttContainer").dxGantt({
// ...
columns: [{
type: "buttons",
buttons: [{
name: "save",
cssClass: "my-class"
}]
}]
});
});Angular
<dx-gantt ... >
<dxi-column type="buttons">
<dxi-button
name="save"
cssClass="my-class">
</dxi-button>
</dxi-column>
</dx-gantt>
import { DxGanttModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxGanttModule
],
// ...
})Vue
<template>
<DxGantt ... >
<DxColumn type="buttons">
<DxButton
name="save"
css-class="my-class"
/>
</DxColumn>
</DxGantt>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxGantt, {
DxColumn,
DxButton
} from 'devextreme-vue/gantt';
export default {
components: {
DxGantt,
DxColumn,
DxButton
},
// ...
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import Gantt, {
Column,
Button
} from 'devextreme-react/gantt';
export default function App() {
return (
<Gantt ... >
<Column type="buttons">
<Button
name="save"
cssClass="my-class"
/>
</Column>
</Gantt>
);
}onClick
| Name | Type | Description |
|---|---|---|
| column |
The properties of the button's column. |
|
| component |
The UI component's instance. |
|
| element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
| model | any |
The model data. Available only if you use Knockout. |
| row |
The properties of the button's row. |
template
| Name | Type | Description |
|---|---|---|
| column |
The column's properties. |
|
| columnIndex |
The index of the cell's column. |
|
| component |
The UI component's instance. |
|
| data |
The data of the cell's row. |
|
| key | any |
The row's key. |
| row |
The row's properties. |
|
| rowIndex |
The index of the cell's row. Begins with 0 on each page. Group rows are included. |
|
| rowType |
The row's type. |
visible
| Name | Type | Description |
|---|---|---|
| column |
The column's properties. |
|
| component |
The UI component's instance. |
|
| row |
The row's properties. |
Use the function to show or hide the button for specific rows. For example, the UI component lists online orders and allows users to edit them. The Cancel button should allow users to cancel their orders. However, completed orders should not be canceled. The visible function in this case may look as follows:
jQuery
$(function () {
$("#ganttContainer").dxGantt({
// ...
columns: [{
type: "buttons",
buttons: [{
text: "Cancel",
visible: function (e) {
return !e.row.isEditing && !e.row.data.isCompleted;
}
}]
}]
});
});Angular
<dx-gantt ... >
<dxi-column type="buttons">
<dxi-button
text="Cancel"
[visible]="isCancelButtonVisible">
</dxi-button>
</dxi-column>
</dx-gantt>
import { DxGanttModule } from "devextreme-angular";
// ...
export class AppComponent {
isCancelButtonVisible (e) {
return !e.row.isEditing && !e.row.data.isCompleted;
}
}
@NgModule({
imports: [
// ...
DxGanttModule
],
// ...
})Vue
<template>
<DxGantt ... >
<DxColumn type="buttons">
<DxButton
text="Cancel"
:visible="isCancelButtonVisible"
/>
</DxColumn>
</DxGantt>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxGantt, {
DxColumn,
DxButton
} from 'devextreme-vue/gantt';
export default {
components: {
DxGantt,
DxColumn,
DxButton
},
// ...
methods: {
isCancelButtonVisible (e) {
return !e.row.isEditing && !e.row.data.isCompleted;
}
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import Gantt, {
Column,
Button
} from 'devextreme-react/gantt';
function isCancelButtonVisible (e) {
return !e.row.isEditing && !e.row.data.isCompleted;
}
export default function App() {
return (
<Gantt ... >
<Column type="buttons">
<Button
text="Cancel"
visible={isCancelButtonVisible}
/>
</Column>
</Gantt>
);
}