JavaScript/jQuery Form - SimpleItem.label
Specifies properties for the form item label.
Type:
Default Value: undefined
alignment
Specifies the label's horizontal alignment. Applies only to labels outside their editors (see labelMode).
Type:
Default Value: 'left'
location
Specifies the location of a label against the editor. Applies only to labels outside their editors (see labelMode).
Type:
Default Value: 'left'
NOTE
This property has higher priority than the labelLocation property of the form.
See Also
showColon
Specifies whether a colon is displayed at the end of the current label. Applies only to labels outside their editors (see labelMode).
Type:
Default Value: from showColonAfterLabel
NOTE
This property has higher priority than the showColonAfterLabel property of the form.
template
A template that can be used to replace the label with custom content. Applies only to labels outside their editors (see labelMode).
Type:
The following code adds a custom label to the SimpleItem:
jQuery
index.js
$(function() {
$("#formContainer").dxForm({
// ...
items: [{
label: {
template(data) {
return `Custom ${data.text}`;
}
}
}]
});
});Angular
app.component.html
<dx-form ... >
<dxi-item ... >
<dxo-label template="customLabel"></dxo-label>
</dxi-item>
<div *dxTemplate="let data of 'customLabel'">
<span>Custom {{ data.text }}</span>
</div>
</dx-form>Vue
App.vue
<template>
<DxForm ...>
<DxSimpleItem ...>
<DxLabel template="customLabel"/>
</DxSimpleItem>
<template #customLabel="{ data }">
<span>
Custom {{ data.text }}
</span>
</template>
</DxForm>
</template>
<script>
// ...
</script>React
App.js
const customItem = (data) => {
return `Custom ${data.text}`;
}
function App() {
return (
<Form ...>
<SimpleItem ...>
<Label render={customItem} />
</SimpleItem>
</Form>
);
};
export default App;visible
Controls the visibility of the label outside the editor.
Type:
Default Value: true
This property defaults to true in the following cases:
- The labelMode is "outside".
- The editor does not support embedded labels and therefore does not support "static" and "floating" label modes. Refer to the labelMode article for a list of these editors.
In other cases, the property defaults to false.
Feedback