Dropdown Inline Edit API

Dropdown Inline Edit

Pre-configuration

The configuration of the Dropdown Inline Edit is accomplished through a fluid.defaults object (for more information about component defaults, see Framework Functions#Defaults). These defaults are described below.

NOTE: If you override any of these defaults, the Dropdown Inline Edit may not function properly.


fluid.defaults("fluid.inlineEdit.dropdown", {
    applyEditPadding: false,
    blurHandlerBinder: fluid.inlineEdit.dropdown.blurHandlerBinder,
    editModeRenderer: fluid.inlineEdit.dropdown.editModeRenderer
});

These settings are described below.

`applyEditPadding`	Normally, a small padding is applied to the edit field when in edit mode. This is unnecessary for the Dropdown Inline Edit, so this value is set to `false`
`blurHandlerBinder`	The dropdown-specific `blurHandlerBinder` function binds a specialized blur handler to the component, to account for the fact that the activated dropdown consists of multiple active DOM elements.
`editModeRenderer`	The dropdown-specific `editModeRenderer` configures the component to use the dropdown selection box when in edit mode.

Dependencies

The Dropdown Inline Edit dependencies can be met by including the minified InfusionAll.js file and the jquery.selectbox.js plugininto the header of the HTML file:


<script type="text/javascript" src="InfusionAll.js"></script>
<script type="text/javascript" src="jquery.selectbox.js"></script>

Alternatively, the individual file requirements are:


<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="lib/jquery/plugins/tooltip/js/jquery.tooltip.js"></script>
<script type="text/javascript" src="jquery.selectbox.js"></script>
<script type="text/javascript" src="framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="components/inlineEdit/js/InlineEdit.js"></script>
<script type="text/javascript" src="components/inlineEdit/InlineEditIntegrations.js"></script>