topic edit templatePicker Style in ArcGIS JavaScript Maps SDK Questions

edit templatePicker Style

BrianLord1 — Sat, 11 Dec 2021 08:15:29 GMT

I have been trying to edit the default style for the templatePicker shown in the sample below.
http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/ed_template_picker

I only have one featurelayer that will be shown in the templatePicker and have gotten everything to work correctly. I am trying to get the background of the templatePicker to be transparent instead of white.

Code:

                    templatePicker = new esri.dijit.editing.TemplatePicker({
                    featureLayers: layers,
                    rows: 1,
                    columns: 1,
                    grouping: false
                }, "templatePickerDiv");

                templatePicker.startup();

HTML code for the editor window that I have adjusted.

<div id="divAppContainer">
            <div dojotype="dijit.layout.ContentPane" id="editContainer" class="divEditorContainer">
                <div id="divEditortitleBackground">
                    <table>
                        <tr>
                            <td>
                                <img src="images/comments_small.png"/>
                            </td>
                            <td>
                                <div id="divEditortitle">Editor Window</div>
                            </td>
                        </tr>
                    </table>                                     
                </div>
                <table>
                    <tr style="height: 30px; margin: 0px; padding: 0px;">                
                        <td style="height: 30px; margin: 0px; padding: 0px;">
                            <div class='instructions' style="height: 30px; margin: 0px; padding: 0px;">
                                <ul style="list-style:none;padding-left:4px; vertical-align:top">
                                    <li><b>Create Features</b></li>
                                </ul>
                            </div>
                        </td>
                        <td style="height: 30px; margin: 0px; padding: 0px;">
                            <div class='instructions' style="height: 30px; margin: 0px; padding: 0px;">
                                <ul style="list-style:none;padding-left:4px;">
                                    <li><b>Edit Existing Features</b></li>
                                </ul>
                            </div>
                        </td>         
                   </tr>
                   <tr>
                        <td style="width: 50%">
                            <div id="templatePickerDiv" ></div>
                        </td>
                        <td style="width: 50%">
                            <button dojotype="dijit.form.ToggleButton" id="btnSelectEdit" title="Edit Existing Points"
                                    onclick="ToggleEditing();">
                                    <img src="images/GenericPencilTarget32.png"/>
                            </button>
                        </td>  
                   </tr> 
                   <tr>
                        <td>
                            <button id="undo" class="UndoRedo" data-dojo-type="dijit.form.Button" data-dojo-props="disabled:true, iconClass:'undoIcon'" >Undo</button>
                        </td>
                        <td>
                            <button id="redo" class="UndoRedo" data-dojo-type="dijit.form.Button" data-dojo-props="disabled:true, iconClass:'redoIcon'" >Redo</button>
                        </td>
                   </tr>              
                </table>
            </div>
        </div>

Here is some of the many CSS rules that I have tried that does not get me the desired effect.

            .templatePicker .grid{
                background-color: transparent;
            }
            
            .templatePicker .item{
                background-color: transparent;
            }

I am pretty new to Javascript and CSS, so I assume I am either not using CSS correctly or am missing something. Any help would be greatly appreciated.

Re: edit templatePicker Style

BrianLord1 — Tue, 22 Jan 2013 20:06:54 GMT

Is there a way to select the template using code, instead of actually clicking on it? Since I only have one featurelayer template, I thought it might be easier to just have a regular toggle button that when clicked, selected my only template from the templatePicker.

Anyone ever tried this or something similar to this?

Re: edit templatePicker Style

JennB — Fri, 11 Jul 2014 15:25:21 GMT

Let's bring this thread up...

I'm also running into the same issue. I've tried this, like Mark has, to no avail:

.templatePicker .grid{

background-color: transparent;

}

Re: edit templatePicker Style

TimWitt2 — Fri, 11 Jul 2014 15:41:00 GMT

Jenn,

what visual effect would you like to attain?

Tim

Re: edit templatePicker Style

JennB — Fri, 11 Jul 2014 15:50:36 GMT

Tim,

I've included a screen shot below. As you can see, there's a background I'd like to show through the TemplatePicker (that Add Project stuff). I've figured out how to change the font colours quite easily but I'd like the background to be completely transparent. I've tried the background-color:transparent on .templatePicker .grid with no luck and just on .templatePicker but I can't seem to figure it out.

(You can ignore the 'testing testing' box - that's something else!)

Thanks,
Jenn

Re: edit templatePicker Style

MatthewLofgren — Fri, 11 Jul 2014 18:14:53 GMT

This may work for you or at least get you started.

.templatePicker .grid .dojoxGridCell {background-color:transparent; border-color: transparent;}

.templatePicker .grid .dojoxGridRow {background-color: transparent; border-color: transparent;}

.templatePicker .grid .dojoxGridRowOver .dojoxGridCell {background-color:transparent}

.templatePicker .grid .dojoxGridRowOdd {background-color: transparent;}

.dojoxGridScrollbox {background-color: transparent;}

.templatePicker {background-color: transparent;}

.templatePicker .grid {background-color: transparent;}

Re: edit templatePicker Style

JennB — Fri, 11 Jul 2014 18:24:15 GMT

I would have never come up with that - thank you! I'm new to the JavaScript API (and anything with the word Dojo in it...). It works wonderfully .

Re: edit templatePicker Style

MatthewLofgren — Fri, 11 Jul 2014 18:29:02 GMT

No problem. Just use Chrome dev tools (or firebug) to open up all the child nodes of the widget and play with the styles till it works.

Re: edit templatePicker Style

PriyaRam — Thu, 28 Apr 2016 21:12:53 GMT

Hi - On similar lines , I would like the Template Picker to have sort of Tree View with a check box , that would display the groupings underneath. Please advise, how I can achieve this.