Opened 11 years ago
Last modified 4 years ago
#11118 open enhancement
[cla][patch] Allow HTML markup in <select></select> widgets
Reported by: | Jonathan Bond-Caron | Owned by: | |
---|---|---|---|
Priority: | high | Milestone: | 1.15 |
Component: | Dijit - Form | Version: | 1.5.0b2 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description (last modified by )
This patch allows:
<select id="markuptest" name="markuptest" dojoType="dijit.form.FilteringSelect" labelAttr="label" labelType="html" > <option value="ct" label="<b>Connecticut</b> USA">Connecticut</option> <option value="me" label="<b>Maine</b> USA">Maine</option> </select> <select id="markuptest" name="markuptest" dojoType="dijit.form.Select" > <option value="ct" label="<b>Connecticut</b> USA">Connecticut</option> <option value="me" label="<b>Maine</b> USA">Maine</option> </select>
I would like to make this even simpler by supporting:
<select id="markuptest" name="markuptest" dojoType="dijit.form.FilteringSelect" > <option value="ct" label="<b>Connecticut</b> USA">Connecticut</option> <option value="me" label="<b>Maine</b> USA">Maine</option> </select> <select id="markuptest" name="markuptest" dojoType="dijit.form.Select" > <option value="ct" label="<b>Connecticut</b> USA">Connecticut</option> <option value="me" label="<b>Maine</b> USA">Maine</option> </select>
Where by default, both dijit.form.Select and dijit.form.FilteringSelect look for the 'label' attribute, if not found it uses the <option>text value</option>.
The way I would approach it is have dijit.form.Select use:
dojo.declare("dijit.form._OptionsDataStore", null, { // look for labelAttr || 'label' // else use <option>text content</option> } // Used by dijit.FilteringSelect dojo.declare("dijit.form._FilterOptionsDataStore", dijit.form._OptionsDataStore /// Filtering of <option></option>... } dijit.form._ComboBoxDataStore = dijit.form._FilterOptionsDataStore
Both widgets would use ~ the same 'data store' for markup, hopefully this will simplify and speedup the code.
Attachments (1)
Change History (16)
Changed 11 years ago by
Attachment: | select_label.patch added |
---|
comment:1 Changed 11 years ago by
comment:2 Changed 11 years ago by
Rich text is only supported by dijit.form.Select with a <div></div>
I needed this for FilteringSelect?, a <select></select> with a fixed size of 1-100 records.
I prefer the <div></div> markup but I think the 'label' or 'labelHTML' alternative attribute should be supported.
2 reasons:
- In my case, I have a server side template which uses ~ {html_select options=$options dojoType="dijit.form.Select" selected=AK} There's lot's of frameworks or applications that generate <select></select> markup from templates.
- It degrades nicely with JavaScript? disabled, rare but still...
comment:3 Changed 10 years ago by
Just a note for myself, html markup in an attribute is not valid xhtml: <option value="ct" label="<b>Connecticut</b> USA">Connecticut</option>
Should use <option value="ct" labelHTML="<b>Connecticut</b> USA">Connecticut</option>
Then "string".replace(/&/g, '&').replace(/</g,).replace(/>/g,'>');
comment:4 Changed 10 years ago by
Description: | modified (diff) |
---|
comment:5 Changed 10 years ago by
Owner: | set to Douglas Hays |
---|
comment:6 Changed 10 years ago by
Milestone: | tbd → 1.7 |
---|
comment:7 Changed 10 years ago by
Milestone: | 1.7 → 1.8 |
---|
comment:8 Changed 10 years ago by
Component: | Dijit → Dijit - Form |
---|
comment:9 Changed 9 years ago by
Milestone: | 1.8 → tbd |
---|
Using label will not degrade well and using labelHTML will cause validation errors. The best degradation path would be to specify both label as plain text AND specify the text child of the OPTION tag as rich HTML, and have the widgets ignore the label attribute.
comment:10 Changed 9 years ago by
but that approach opens us up to migration and compatibility issues since you would have to escape < in the OPTION text where before you didn't have to.
comment:11 Changed 9 years ago by
Couldn't you avoid validation errors with labelHTML by using data-dojo-label-html instead? You are talking about a syntax like this, right?
<option value="ct" data-dojo-label-html="<b>Connecticut</b> USA"> Connecticut </option>
Seems like it would work, although (as I said in a previous comment) it's not pretty putting HTML into an attribute. Maybe it's better to put HTML where you normally expect it, like:
<span><b>Connecticut</b> USA</span>
and then control backwards compatibility with a flag?
comment:12 Changed 7 years ago by
Owner: | Douglas Hays deleted |
---|---|
Status: | new → assigned |
comment:13 Changed 7 years ago by
Status: | assigned → open |
---|
comment:14 Changed 5 years ago by
Milestone: | tbd → 1.12 |
---|
We should probably revisit this given the work that jbondc originally put into this. Marking as a candidate for 1.12.
comment:15 Changed 4 years ago by
Milestone: | 1.13 → 1.15 |
---|
Ticket planning... move current 1.13 tickets out to 1.15 to make it easier to move tickets into the 1.13 milestone.
Aren't rich text labels supported already by using <div>'s rather than <select> and <option>?
That seems like an easier syntax than embedding rich text in an attribute value. Not sure what you are trying to achieve with this alternate way of specifying rich text?