AnsweredAssumed Answered

customize print button of print dijit

Question asked by Kemmons on Apr 16, 2013
Latest reply on Sep 23, 2017 by OttoArturo
I am using the sample code to create a print dijit.  I needed to change the word 'Print' on the button to a printer icon, which I have done using jquery.  But once the button is clicked, the word 'Printing' still appears and then it undoes my printer icon and goes back to the word 'Print'.  How can I customize this button during and after the printing process in addition to beforehand?  Below is the jquery I added to the createPrintDijit function.

function createPrintDijit(printTitle) {
var layoutTemplate, templateNames, mapOnlyIndex, templates;
       
   // create an array of objects that will be used to create print templates
   var layouts = [
  {
  "name": "Letter ANSI A Landscape",
  "label": "Landscape",
  "format": "pdf",
  "options": {
   "legendLayers": [], // empty array means no legend
   "scalebarUnit": "Miles",
   "titleText": "The Title"
   }
    }
];
       
   // create the print templates, could also use dojo.map
    var templates = [];
    dojo.forEach(layouts, function(lo) {
     var t = new esri.tasks.PrintTemplate();
      t.layout = lo.name;
       t.label = lo.label;
       t.format = lo.format;
       t.layoutOptions = lo.options
       templates.push(t);
   });

  app.printer = new esri.dijit.Print({
     "map": map,
  "templates": templates,
  url: app.printUrl,
        }, dojo.byId("printButton"));
  
app.printer.startup();

// fix the print button
$('#dijit_form_Button_0').css('display', 'inline-block');
$('#dijit_form_Button_0').css('width', '24');
$('#dijit_form_Button_0').css('height', '24');
 
var img = $('<img class="inline" src="/images/printer_icon.png" height="24" width="24" />');
$("#dijit_form_Button_0").prepend(img);
$("#dijit_form_Button_0_label").text('');
}

Outcomes