Button Renderer is a cell renderer which acts as a button with using the images specified in imageUrl property, etc. The images can be specified to match the button state with using imageUrl, activeImageUrl, hoveredImageUrl, disabledImageUrl, disableHoveredImageUrl properties.
You can set a disabled state in the button by specifying an expression which returns whether to activate the button in enabledExpression property. If this expression returns false, the button will become a disabled state, and the disabled button will not fire mouse click event.
The text displayed in the button is basically the value of the data field which is connected to the column. You can specify the text matching the condition in text, hoveredText, disabledText, disabledHoveredText properties. In addition, if set textVisible as false, the text will not be displayed.
By changing the properties below, you can change the property of ImageBtn1 column.
If specify textOnImage as true, the text will be aligned based on the button. Please check it in ImageBtn3 column.
If click the button of the data cell, onDataButtonClicked event will be fired.
grid.onDataButtonClicked = function (grid, index) {
setTimeout(function () {
alert(index.rowIndex + "Row No. " + index.column.name() + "Click the button of column No. ");
}, 0);
};