JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › commandColumns option › Reply To: commandColumns option
January 25, 2021 at 9:37 am
#101370
yavordashew
Member
Hi dusrkdldlr,
If you want the whole ‘command’ column to not be displayed you can simply use the ‘visible’ property of the command column.
I have a little code snippet to showcase you how to set this property:
//In your JS file
window.Smart('#grid', class {
get properties() {
return {
appearance: {
showRowHeaderNumber: true
},
dataSource: new window.Smart.DataAdapter({
dataSource: window.generateData(1000),
dataFields: [
'id: number',
'firstName: string',
'lastName: string',
'productName: string',
'available: bool',
'quantity: number',
'price: number',
'total: number'
]
}),
editing: {
enabled: true,
action: 'none',
mode: 'row',
commandColumn: {
/* With the 'visible' property you can set in order to have the command column visible or not */
visible: true,
/* Or you can use the inline property if you don't want to display the command column but when you hover on the row an edit panel will appear */
inline: true
}
},
columns: [
{
label: 'First Name', dataField: 'firstName'
},
{
label: 'Last Name', dataField: 'lastName'
},
{ label: 'Product', dataField: 'productName', editor: 'autoComplete' },
{ label: 'Available', dataField: 'available', template: 'checkBox', editor: 'checkBox' },
{ label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },
{ label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }
]
};
}
});
You can have a look at the following demo:
https://www.htmlelements.com/demos/grid/editing-command-column-inline/
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/