[Infusion-users] Multiple inline dropdown boxes?

Colin Clark colinbdclark at gmail.com
Tue Sep 15 16:01:04 UTC 2009


A few extra ideas to add onto Michelle's advice...

fluid.inlineEdits() is really just a really simple convenience  
function on top of the fluid.inlineEdit() creator. If you're curious  
about how it is implemented, take a look at line 437 of InlineEdit.js:


This feature of being able to get one instance or many with just a  
single function call is something I'd like to simplify and generalize  
across the framework in the future. It would be awesome to be able to  
do this with any kind of component. Definitely on the to do list.

In the meantime, you could write your own function for instantiating a  
whole bunch of dropdown inline editors. Michelle's strategy looks  
sounds, or you could do something like this:

var lotsOfDropdowns = function (dropdownContainers, options) {
    var editableDropdowns = [];
     $(dropDownContainers).each(function (idx, container) {
       var dropdown = fluid.inlineEdit.dropdown(container, options);
    return editableDropdowns;

I typed this straight into email, so double check the syntax, but it  
should give you a starting point.

Hope this helps,


On 15-Sep-09, at 10:43 AM, michelle.dsouza at utoronto.ca wrote:

> Hi Jeremy,
> My response is below.
>>>> I'm having some trouble using fluid to render many inline dropdown
>>>> boxes. I can use the normal method to get a single dropdown:
>>>>   fluid.inlineEdit.dropdown("#draftOrder");
> As you've already discovered, this function will only work for a  
> single dropdown inline edit.
>>>> But I can't seem to use the ".flc-inlineEditable" class like (I
>>>> think) you're supposed to be able to do with normal text inline  
>>>> edits:
>>>>   fluid.inlineEdits("#draftOrder");
> This is the correct function to use for multiple dropdown inline  
> edits. The default configuration for 'inlineEdits' creates a simple  
> text inline edit - that is why you are seeing strange behaviour. In  
> order to create multiple drowdown inline edits, you need to pass in  
> some options. Your code may look something like this:
>            fluid.inlineEdits("#draftOrder", {
>                applyEditPadding: false,
>                blurHandlerBinder:  
> fluid.inlineEdit.dropdown.blurHandlerBinder,
>                editModeRenderer:  
> fluid.inlineEdit.dropdown.editModeRenderer
>            });
>>>> Is it possible to do something equivalent to:
>>>>   fluid.inlineEdits.dropdown("#draftOrder");
> We don't have this functionality yet but we are planning to revisit  
> the API and behaviour of 'inlineEdits'.
> Hope this helps,
> Michelle

Colin Clark
Technical Lead, Fluid Project

More information about the Infusion-users mailing list