jQuery Form - SimpleItem.label
Type:
Default Value: undefined
alignment
Specifies the label's horizontal alignment. Applies only to labels outside their editors (see labelMode).
location
Specifies the location of a label against the editor. Applies only to labels outside their editors (see labelMode).
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
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