edit templatePicker Style

BrianLord1

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.

PriyaRam

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.

templatepicker.png