Query Widget set default CbxDrawGraphic.checked

2791
2
Jump to solution
08-11-2015 03:01 PM
DanNorman
Occasional Contributor

Hi, I am trying to set up the Web App Builder Query Widget to have some parameters set by default. I managed to set the "use spatial filter to limit features" checkbox button to be on by default and call the appropriate function associated with it so that the radio button options for spatial limit "current map enxtent" and "user defined" radio buttons show up. I would like the radio button CbxDrawGraphic "Only features touching the user-defined area" radio button to be selected by default but i am having no luck with: this.CbxDrawGraphic.checked = true;

[Developer App Folder]\10\widgets\Query\Widget.js

      _resetQueryParamsPage: function(){
        this.paramsDijit.clear();
        this.cbxOperational.checked = false;
        this.cbxUseSpatial.checked = true;  //changed from false to true to check on "use spatial filter to limit results"
        this._onCbxUseSpatialClicked(); //function call for the clicking of "use spatial filter to limit results"
        //this.CbxDrawGraphic.checked = true; //THIS CODE DOES NOT ACTUALLY CHECK RADIO BUTTON
        //this._onCbxDrawGraphicClicked(); //CALL ONCE THE ABOVE CODE SELECTS RADIO BUTTON
        this._resetDrawBox();
      },

Original Code:

      _resetQueryParamsPage: function(){
        this.paramsDijit.clear();
        this.cbxOperational.checked = false;
        this.cbxUseSpatial.checked = false;
        this._onCbxUseSpatialClicked();
        this._resetDrawBox();
      },

I would like this to be the default state....

query.PNG

Thanks,

Don

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Donald,

  You need to adjust that in the Widget.html code. Move the checked property.

Original (line 6):

          <div data-dojo-attach-point="selectSpatialDiv" style="margin-left:7px; margin-top:7px;">
            <table class="current-view" valign="top" cellpadding="0" cellspacing="0">
              <tbody>
                <tr class="current-extent-tr">
                  <td>
                    <input type="radio" data-dojo-attach-point="cbxUseMapExtent" checked data-dojo-attach-event="onclick:_onCbxUseMapExtentClicked" />
                  </td>
                  <td class="current-extent-td">
                    <label data-dojo-attach-point="currentExtentLabel" class="map-extent-tip">${nls.useCurrentMapExtent}</label>
                  </td>
                </tr>
                <tr class="draw-graphic-tr">
                  <td>
                    <input type="radio" data-dojo-attach-point="cbxDrawGraphic" data-dojo-attach-event="onclick:_onCbxDrawGraphicClicked" />
                  </td>
                  <td class="draw-graphic-td">
                    <label data-dojo-attach-point="drawGraphicLabel" class="draw-graphic-tip">${nls.drawGraphicOnMap}</label>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="draw-graphic" data-dojo-attach-point="drawBoxDiv"></div>
          </div>

Modified (line 6 and 14):

         <div data-dojo-attach-point="selectSpatialDiv" style="margin-left:7px; margin-top:7px;">
            <table class="current-view" valign="top" cellpadding="0" cellspacing="0">
              <tbody>
                <tr class="current-extent-tr">
                  <td>
                    <input type="radio" data-dojo-attach-point="cbxUseMapExtent" data-dojo-attach-event="onclick:_onCbxUseMapExtentClicked" />
                  </td>
                  <td class="current-extent-td">
                    <label data-dojo-attach-point="currentExtentLabel" class="map-extent-tip">${nls.useCurrentMapExtent}</label>
                  </td>
                </tr>
                <tr class="draw-graphic-tr">
                  <td>
                    <input type="radio" data-dojo-attach-point="cbxDrawGraphic" checked data-dojo-attach-event="onclick:_onCbxDrawGraphicClicked" />
                  </td>
                  <td class="draw-graphic-td">
                    <label data-dojo-attach-point="drawGraphicLabel" class="draw-graphic-tip">${nls.drawGraphicOnMap}</label>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="draw-graphic" data-dojo-attach-point="drawBoxDiv"></div>
          </div>

View solution in original post

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Emeritus

Donald,

  You need to adjust that in the Widget.html code. Move the checked property.

Original (line 6):

          <div data-dojo-attach-point="selectSpatialDiv" style="margin-left:7px; margin-top:7px;">
            <table class="current-view" valign="top" cellpadding="0" cellspacing="0">
              <tbody>
                <tr class="current-extent-tr">
                  <td>
                    <input type="radio" data-dojo-attach-point="cbxUseMapExtent" checked data-dojo-attach-event="onclick:_onCbxUseMapExtentClicked" />
                  </td>
                  <td class="current-extent-td">
                    <label data-dojo-attach-point="currentExtentLabel" class="map-extent-tip">${nls.useCurrentMapExtent}</label>
                  </td>
                </tr>
                <tr class="draw-graphic-tr">
                  <td>
                    <input type="radio" data-dojo-attach-point="cbxDrawGraphic" data-dojo-attach-event="onclick:_onCbxDrawGraphicClicked" />
                  </td>
                  <td class="draw-graphic-td">
                    <label data-dojo-attach-point="drawGraphicLabel" class="draw-graphic-tip">${nls.drawGraphicOnMap}</label>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="draw-graphic" data-dojo-attach-point="drawBoxDiv"></div>
          </div>

Modified (line 6 and 14):

         <div data-dojo-attach-point="selectSpatialDiv" style="margin-left:7px; margin-top:7px;">
            <table class="current-view" valign="top" cellpadding="0" cellspacing="0">
              <tbody>
                <tr class="current-extent-tr">
                  <td>
                    <input type="radio" data-dojo-attach-point="cbxUseMapExtent" data-dojo-attach-event="onclick:_onCbxUseMapExtentClicked" />
                  </td>
                  <td class="current-extent-td">
                    <label data-dojo-attach-point="currentExtentLabel" class="map-extent-tip">${nls.useCurrentMapExtent}</label>
                  </td>
                </tr>
                <tr class="draw-graphic-tr">
                  <td>
                    <input type="radio" data-dojo-attach-point="cbxDrawGraphic" checked data-dojo-attach-event="onclick:_onCbxDrawGraphicClicked" />
                  </td>
                  <td class="draw-graphic-td">
                    <label data-dojo-attach-point="drawGraphicLabel" class="draw-graphic-tip">${nls.drawGraphicOnMap}</label>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="draw-graphic" data-dojo-attach-point="drawBoxDiv"></div>
          </div>
0 Kudos
DanNorman
Occasional Contributor

That does it sir Thank you! I appreciate your time to provide the answer and to lay out the html before and after!

Don

0 Kudos