topic Re: Dojo ComboBox- only make part of menu text appear bold in ArcGIS JavaScript Maps SDK Questions

Dojo ComboBox- only make part of menu text appear bold

StefanCoe — Tue, 09 Sep 2014 19:57:58 GMT

Say I have the following text in a ComboBox:

Sponsor: Project Title

Is it possible to just make Sponsor: bold? I can make the whole thing bold by adding the following to the CSS:

.dijitMenuItem {

font-weight: bold;

}

But not sure how I would do it for only part of the text. If it's any help, The two pieces of text can come from two different fields in a feature layer. I am using a Query/QueryTask to populate the ComboBox. Thanks for any help!

Here is a link to the actual site:

http://webmap.psrc.org/Transportation/2015-2018TIP.html

Re: Dojo ComboBox- only make part of menu text appear bold

KenBuja — Wed, 10 Sep 2014 14:18:56 GMT

Currently, when you execute the query task, you're only getting the field "SponProjTitle", which contains both the sponsor and the project title. You could get the fields separately and concatenate them together, adding in the html code to bold the sponsor, then create your store.

Re: Dojo ComboBox- only make part of menu text appear bold

StefanCoe — Wed, 10 Sep 2014 16:14:23 GMT

Thank Ken! I had thought about that but I did not think you could format a variable that was going into a store. Given I have the variables sponsor and projTitle, how would I do this? I tried this:

sponsor.bold() + projTitle

but it just added the html tag as text:

<b>Seattle-</b> Some Project

Thanks again!

Re: Dojo ComboBox- only make part of menu text appear bold

KenBuja — Sat, 11 Dec 2021 06:07:44 GMT

The code uses the code from one of the comments in your StackOverflow question‌, but after you select one, the value in the combox isn't formatted correctly.


<!DOCTYPE html>


<html>


<head>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


    <!--The viewport meta tag is used to improve the presentation and behavior of the samples


      on iOS devices-->


    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">


    <title>Query State Info without Map</title>





    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css" />


    <script src="http://js.arcgis.com/3.10/"></script>


    <script>


        require([


          "esri/tasks/query", "esri/tasks/QueryTask",


          "dojo/dom", "dojo/on", "dojo/store/Memory", "dijit/form/ComboBox", "dojo/_base/declare", "dojo/parser", "dojo/domReady!"


        ], function (Query, QueryTask, dom, on, Memory, ComboBox, declare, parser) {





            parser.parse();





            var queryTask = new QueryTask("http://webmap.psrc.org/arcgis/rest/services/TIPwebMap/MapServer/0");





            var query = new Query();


            query.returnGeometry = false;


            query.outFields = ["Sponsor", "ProjectTitle", "SponProjTitle"];


            query.orderByFields = ["SponProjTitle ASC"];


            query.where = "SponProjTitle <> ''";


            queryTask.execute(query, showResults);








            function showResults(results) {


                var data = [];


                var resultCount = results.features.length;


                for (var i = 0; i < resultCount; i++) {


                    var featureAttributes = results.features.attributes;


                    var item = {};


                    item.name = "<b>" + featureAttributes["Sponsor"] + "</b> - " + featureAttributes["ProjectTitle"];


                    item.id = featureAttributes["SponProjTitle"];


                    data.push(item);


                }


                var dataStore = new Memory({ data: data });


                var MyComboBox = declare("dijit/form/MyComboBox", ComboBox, {


                    _getMenuLabelFromItem: function (/*Item*/ item) {


                        var label = this.inherited(arguments)


                        label.html = true


                        return label


                    }


                 });


                var comboBox = new MyComboBox({


                    id: "mySelect",


                    value: "Select or Type Project Title",


                    store: dataStore,


                    forceValidOption: false,


                    autoComplete: true


                }, "mySelect").startup();


            }


        });


    </script>


</head>





<body class="claro">


    <!--US state name :-->


    <!--<input type="text" id="stateName" value="California">-->


    <input id="execute" type="button" value="Populate Combobox">


    <br />


    <br />


    <select id="mySelect"></select>


</body>


</html>

Re: Dojo ComboBox- only make part of menu text appear bold

StefanCoe — Thu, 11 Sep 2014 04:10:41 GMT

Thanks again Ken! That seems to be the right track. I'll put some more time into it next week. Cheers,

Stefan