Help adding Print button to toolbar

[JaniceBaird]

When I add the print button to the nav tool bar, I get an extra button behind the print button. Is there a way to add the print button as shown in the attached screen shot without getting an extra button?

thanks,
Janice.

[MarcusBush]

Could you post a code sample with the code you are using for the button and the buttons around it?

[JaniceBaird]

Here is the button code...


    <div id="navToolbar" data-dojo-type="dijit.Toolbar">
      <div data-dojo-type="dijit.form.Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN); setActiveTool('zoomin');}">Zoom In</div>     
      <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT); setActiveTool('zoomout');}">Zoom Out</div>     
      <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){zoomToFullExtent();}">Full Extent</div>     
      <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div>     
      <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div>
      <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN); setActiveTool('pan');}">Pan</div>
      <div data-dojo-type="dijit.form.Button" id="measure" data-dojo-props="iconClass:'measureIcon', onClick:function(){setActiveTool('measure'); displayMeasure();}">Measure</div>
      <div data-dojo-type="dijit.form.DropDownButton" data-dojo-props="iconClass:'bookmarkIcon'">
        <span>Bookmarks</span>
        <div data-dojo-type="dijit.TooltipDialog">
          <div id="bookmarks"></div>
        </div>
      </div>
      <div data-dojo-type="dijit.form.Button" id="print_button">
      </div>
      <div data-dojo-type="dijit.form.Button" id="help" data-dojo-props="iconClass:'helpIcon', onClick:function(){displayHelp();}">Help</div>
    </div>

[MarcusBush]

The only thing I notice right off is that it is missing a "class" that your other buttons have, unless there is a pre-set dijit class you were intending on using, you may need to customize your own in css

[JaniceBaird]

I am using the esri.dijit.Print example for adding templates to the esri print dijit. This gives me a print button so when I add that button to the toolbar, I get a button on top of a button. If I give the toolbar button a class, like I did with the navigation buttons, I get an image added to the button that is behind the Print button. What I would like to do is add the Print Button (esri print dijit) to the toolbar. I understand how to add buttons to the toolbar, I successfully added the bookmarks, help, and measure buttons. What I don't understand is how to add a pre-canned button (the esri print dijit) to the toolbar without the toolbar creating a button for me to use.

If I use the button provided by the toolbar and call it 'Print' and then add the print dijit to it, what I get is a button that when clicked brings up another button that has the dropdown list of templates on it. I really do not want a button on a button.

Has anyone else successfully added a print dijit to the toolbar as I am describing?

Thanks!

[JianHuang]

Janice,

Print widget renders itself as a dijit.form.Button. If you add it into a dijit button, it will behave as you observed. The correct way is to add it to the toolbar directly.

        var toolbar = new dijit.Toolbar({},"navToolbar");  
        // print dijit
        var printer = new esri.dijit.Print({
          map: map,          
   url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
        }, toolbar.domNode); 
        printer.startup();

In HTML
<div id="navToolbar"></div>

[JaniceBaird]

Jian,

Thanks for the help. This works for adding the Print Button to the toolbar but is not exactly what I want. I attached a screenshot of what the toolbar looks like after changing my code. I would like to be able to insert the print button between my bookmark button and my help button. All of the other buttons are declaritive (is that what you call it when they are created in HTML?). Do I need to create all of the buttons on the toolbar programmatically to get the level of control that I am looking for?

I tried to use navToolbar.addChild(printer, 😎 and did not get any results.

It also works how I had it before as long as the print div is without the dijit.form.button part. (<div id="print_button"></div>). However, this causes the Print and the Help Buttons to display below each other. I attached this screen shot as well.

Your thoughts on this would be greatly appreciated.

Thanks,
Janice.

    //get the toolbar
    var theToolBar = dojo.byId("navToolbar");
    //create the print dijit
    app.printer = new esri.dijit.Print({
        "map": app.map,
        "templates": templates,
        url: app.printURL
    }, theToolBar);//.placeAt("navToolbar"); //, //dojo.byId("print_button"));  //theToolBar);
//    theToolBar.addChild(app.printer, 6);
    app.printer.startup();

    <div id="navToolbar" data-dojo-type="dijit.Toolbar">
      <div data-dojo-type="dijit.form.Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN); setActiveTool('zoomin');}">Zoom In</div>      
      <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT); setActiveTool('zoomout');}">Zoom Out</div>      
      <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){zoomToFullExtent();}">Full Extent</div>      
      <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div>      
      <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div>
      <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN); setActiveTool('pan');}">Pan</div>
      <div data-dojo-type="dijit.form.Button" id="measure" data-dojo-props="iconClass:'measureIcon', onClick:function(){setActiveTool('measure'); displayMeasure();}">Measure</div>
      <div data-dojo-type="dijit.form.DropDownButton" data-dojo-props="iconClass:'bookmarkIcon'">
        <span>Bookmarks</span>
        <div data-dojo-type="dijit.TooltipDialog">
          <div id="bookmarks"></div>
        </div>
      </div>
      <div id="print_button"></div>
      <div data-dojo-type="dijit.form.Button" id="help" data-dojo-props="iconClass:'helpIcon', onClick:function(){displayHelp();}">Help</div>
    </div>

[JianHuang · Accepted solution]

Janice,

The reason that print widget starts from a new line is that it has a div around it. Essentially, print widget is a div, which contains a dojo form button/toggle button. You can manipulate the css to get the job done. For example:
.esriPrint{
float: left;
padding: 0px;
}
This would move the print div to the left.

If you want to try toolbar.addChild(), you need to pass in print._printButton. Also, you can keep the declarative way to create the toolbar, then you can get the dijit by calling dijit.byId("navToolbar").

Hope this helps.

[JaniceBaird]

Jian,

Thank-you for all the help! Is there any training that you would suggest that could help a person understand javascript and dojo and how it all fits together?

Thanks!
Janice.

[BrettGreenfield__DNR_]

Glad I found this thread - I was having the same issue where the print button was adding itself above or below the toolbar next to the other tools.  Adding float:left to the CSS fixed that problem.

Now, though, the print button screws up the "look" of the toolbar.  I have three other items added to the toolbar, all of them dijit.form.DropDownButtons, which all line up neatly when added to the toolbar.  Adding the print button - I suppose since it's a "button" not a "DropDownButton" - messes with the alignment.  See the attached screenshot.

So far I've left the CSS of the drop down buttons the default claro style, but before I go customizing them I'd like to have the Print button match their style.  Is there a way I can call in the print dijit as a .dropdownbutton instead of a .button, so the styles match?