data-icon for option within t:select

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

data-icon for option within t:select

D. R.
Hi,

how can i get control of the option elements within a t:select?

I want to provide a unique data-icon property for each option.

<t:select t:id="iconCode"
t:model="literal:fa-globe=Globe,fa-flask=Flask,fa-user-tie=User-tie">
</t:select>

will render:

<select class="form-control" id="iconCode" name="iconCode">
  <option value=""></option>
  <option value="fa-globe">Globe</option>
  <option value="fa-flask">Flask</option>
  <option value="fa-user-tie">User-tie</option>
</select>

i need something like

<select class="selectpicker" id="iconCode">
   <option data-icon="fa-globe">
       Globe
   </option>
   <option data-icon="fa-flask">
       Flask
   </option>
   <option data-icon="fa-user-tie">
       User-tie
   </option>
</select>

i want to add class="selectpicker" to the t:select in order to let
bootstrap convert the select to a dropdown with icons.

Kind regards
David


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: data-icon for option within t:select

JumpStart
Very good question. I don’t know the answer, but here’s an idea…

The Select component does not have a class parameter, but it does render informal parameters. So if you specify class=“selectpicker” then I’d expect it will be rendered with class=“selectpicker”. By default it renders the "select" element with class=“form-control”, so it might be best if you specify class=“form-control selectpicker”.

As for overriding the rendering of the “option” element, I think we come unstuck. The difficulty I see is that OptionModel has only a label and value. You need label, image, and value.

I think your best bet is to copy OptionModel and Select to new classes and and modify them suit your purposes. They aren’t long or complicated.

HTH,

Geoff

> On 15 Nov 2018, at 1:30 pm, D. R. <[hidden email]> wrote:
>
> Hi,
>
> how can i get control of the option elements within a t:select?
>
> I want to provide a unique data-icon property for each option.
>
> <t:select t:id="iconCode" t:model="literal:fa-globe=Globe,fa-flask=Flask,fa-user-tie=User-tie">
> </t:select>
>
> will render:
>
> <select class="form-control" id="iconCode" name="iconCode">
>  <option value=""></option>
>  <option value="fa-globe">Globe</option>
>  <option value="fa-flask">Flask</option>
>  <option value="fa-user-tie">User-tie</option>
> </select>
>
> i need something like
>
> <select class="selectpicker" id="iconCode">
>   <option data-icon="fa-globe">
>       Globe
>   </option>
>   <option data-icon="fa-flask">
>       Flask
>   </option>
>   <option data-icon="fa-user-tie">
>       User-tie
>   </option>
> </select>
>
> i want to add class="selectpicker" to the t:select in order to let bootstrap convert the select to a dropdown with icons.
>
> Kind regards
> David
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: data-icon for option within t:select

Ben Weidig
Hi,

as far as I can tell from the code and documentaion the class OptionModel
supports additional attributes with its .getAttributes() method. So you
should only need to implement your own OptionModel and build your
SelectModel with it.

Hope this helps.

Ben

On Thu, Nov 15, 2018 at 7:23 JumpStart <[hidden email]>
wrote:

> Very good question. I don’t know the answer, but here’s an idea…
>
> The Select component does not have a class parameter, but it does render
> informal parameters. So if you specify class=“selectpicker” then I’d expect
> it will be rendered with class=“selectpicker”. By default it renders the
> "select" element with class=“form-control”, so it might be best if you
> specify class=“form-control selectpicker”.
>
> As for overriding the rendering of the “option” element, I think we come
> unstuck. The difficulty I see is that OptionModel has only a label and
> value. You need label, image, and value.
>
> I think your best bet is to copy OptionModel and Select to new classes and
> and modify them suit your purposes. They aren’t long or complicated.
>
> HTH,
>
> Geoff
>
> > On 15 Nov 2018, at 1:30 pm, D. R. <[hidden email]>
> wrote:
> >
> > Hi,
> >
> > how can i get control of the option elements within a t:select?
> >
> > I want to provide a unique data-icon property for each option.
> >
> > <t:select t:id="iconCode"
> t:model="literal:fa-globe=Globe,fa-flask=Flask,fa-user-tie=User-tie">
> > </t:select>
> >
> > will render:
> >
> > <select class="form-control" id="iconCode" name="iconCode">
> >  <option value=""></option>
> >  <option value="fa-globe">Globe</option>
> >  <option value="fa-flask">Flask</option>
> >  <option value="fa-user-tie">User-tie</option>
> > </select>
> >
> > i need something like
> >
> > <select class="selectpicker" id="iconCode">
> >   <option data-icon="fa-globe">
> >       Globe
> >   </option>
> >   <option data-icon="fa-flask">
> >       Flask
> >   </option>
> >   <option data-icon="fa-user-tie">
> >       User-tie
> >   </option>
> > </select>
> >
> > i want to add class="selectpicker" to the t:select in order to let
> bootstrap convert the select to a dropdown with icons.
> >
> > Kind regards
> > David
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: [hidden email]
> > For additional commands, e-mail: [hidden email]
> >
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

Re: data-icon for option within t:select

Jens Breitenstein
Hi David/Ben

The SelectModelRender makes use of attributes by

     ...
     writeAttributes(optionModel.getAttributes());
     ...

And this method is implemented first in "AbstractOptionModel" and
returns "null".
So as Ben stated just adding the entry

     "data-icon" -> "glyphicon glyphicon-eye-open"

to a map should in your OptionModel should do the trick.

Jens


Am 15.11.18 um 09:24 schrieb Ben Weidig:

> Hi,
>
> as far as I can tell from the code and documentaion the class OptionModel
> supports additional attributes with its .getAttributes() method. So you
> should only need to implement your own OptionModel and build your
> SelectModel with it.
>
> Hope this helps.
>
> Ben
>
> On Thu, Nov 15, 2018 at 7:23 JumpStart <[hidden email]>
> wrote:
>
>> Very good question. I don’t know the answer, but here’s an idea…
>>
>> The Select component does not have a class parameter, but it does render
>> informal parameters. So if you specify class=“selectpicker” then I’d expect
>> it will be rendered with class=“selectpicker”. By default it renders the
>> "select" element with class=“form-control”, so it might be best if you
>> specify class=“form-control selectpicker”.
>>
>> As for overriding the rendering of the “option” element, I think we come
>> unstuck. The difficulty I see is that OptionModel has only a label and
>> value. You need label, image, and value.
>>
>> I think your best bet is to copy OptionModel and Select to new classes and
>> and modify them suit your purposes. They aren’t long or complicated.
>>
>> HTH,
>>
>> Geoff
>>
>>> On 15 Nov 2018, at 1:30 pm, D. R. <[hidden email]>
>> wrote:
>>> Hi,
>>>
>>> how can i get control of the option elements within a t:select?
>>>
>>> I want to provide a unique data-icon property for each option.
>>>
>>> <t:select t:id="iconCode"
>> t:model="literal:fa-globe=Globe,fa-flask=Flask,fa-user-tie=User-tie">
>>> </t:select>
>>>
>>> will render:
>>>
>>> <select class="form-control" id="iconCode" name="iconCode">
>>>   <option value=""></option>
>>>   <option value="fa-globe">Globe</option>
>>>   <option value="fa-flask">Flask</option>
>>>   <option value="fa-user-tie">User-tie</option>
>>> </select>
>>>
>>> i need something like
>>>
>>> <select class="selectpicker" id="iconCode">
>>>    <option data-icon="fa-globe">
>>>        Globe
>>>    </option>
>>>    <option data-icon="fa-flask">
>>>        Flask
>>>    </option>
>>>    <option data-icon="fa-user-tie">
>>>        User-tie
>>>    </option>
>>> </select>
>>>
>>> i want to add class="selectpicker" to the t:select in order to let
>> bootstrap convert the select to a dropdown with icons.
>>> Kind regards
>>> David
>>>
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: [hidden email]
>>> For additional commands, e-mail: [hidden email]
>>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: data-icon for option within t:select

Thiago H de Paula Figueiredo
Hello, everyone!

Great tip by Jens about OptionModel attributes!

If you didn't need to have data-attributes, you could style the select
options using CSS attribute selectors:

option[value="fa-globe"]::before {
  content: url(url/to/fa-globe/image.png)
  ...
}


On Thu, Nov 15, 2018 at 9:37 AM Jens Breitenstein <[hidden email]>
wrote:

> Hi David/Ben
>
> The SelectModelRender makes use of attributes by
>
>      ...
>      writeAttributes(optionModel.getAttributes());
>      ...
>
> And this method is implemented first in "AbstractOptionModel" and
> returns "null".
> So as Ben stated just adding the entry
>
>      "data-icon" -> "glyphicon glyphicon-eye-open"
>
> to a map should in your OptionModel should do the trick.
>
> Jens
>
>
> Am 15.11.18 um 09:24 schrieb Ben Weidig:
> > Hi,
> >
> > as far as I can tell from the code and documentaion the class OptionModel
> > supports additional attributes with its .getAttributes() method. So you
> > should only need to implement your own OptionModel and build your
> > SelectModel with it.
> >
> > Hope this helps.
> >
> > Ben
> >
> > On Thu, Nov 15, 2018 at 7:23 JumpStart <
> [hidden email]>
> > wrote:
> >
> >> Very good question. I don’t know the answer, but here’s an idea…
> >>
> >> The Select component does not have a class parameter, but it does render
> >> informal parameters. So if you specify class=“selectpicker” then I’d
> expect
> >> it will be rendered with class=“selectpicker”. By default it renders the
> >> "select" element with class=“form-control”, so it might be best if you
> >> specify class=“form-control selectpicker”.
> >>
> >> As for overriding the rendering of the “option” element, I think we come
> >> unstuck. The difficulty I see is that OptionModel has only a label and
> >> value. You need label, image, and value.
> >>
> >> I think your best bet is to copy OptionModel and Select to new classes
> and
> >> and modify them suit your purposes. They aren’t long or complicated.
> >>
> >> HTH,
> >>
> >> Geoff
> >>
> >>> On 15 Nov 2018, at 1:30 pm, D. R. <[hidden email]>
> >> wrote:
> >>> Hi,
> >>>
> >>> how can i get control of the option elements within a t:select?
> >>>
> >>> I want to provide a unique data-icon property for each option.
> >>>
> >>> <t:select t:id="iconCode"
> >> t:model="literal:fa-globe=Globe,fa-flask=Flask,fa-user-tie=User-tie">
> >>> </t:select>
> >>>
> >>> will render:
> >>>
> >>> <select class="form-control" id="iconCode" name="iconCode">
> >>>   <option value=""></option>
> >>>   <option value="fa-globe">Globe</option>
> >>>   <option value="fa-flask">Flask</option>
> >>>   <option value="fa-user-tie">User-tie</option>
> >>> </select>
> >>>
> >>> i need something like
> >>>
> >>> <select class="selectpicker" id="iconCode">
> >>>    <option data-icon="fa-globe">
> >>>        Globe
> >>>    </option>
> >>>    <option data-icon="fa-flask">
> >>>        Flask
> >>>    </option>
> >>>    <option data-icon="fa-user-tie">
> >>>        User-tie
> >>>    </option>
> >>> </select>
> >>>
> >>> i want to add class="selectpicker" to the t:select in order to let
> >> bootstrap convert the select to a dropdown with icons.
> >>> Kind regards
> >>> David
> >>>
> >>>
> >>> ---------------------------------------------------------------------
> >>> To unsubscribe, e-mail: [hidden email]
> >>> For additional commands, e-mail: [hidden email]
> >>>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: [hidden email]
> >> For additional commands, e-mail: [hidden email]
> >>
> >>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>

--
Thiago