0

I am working on draw Tool add Text as graphics on Map.I have created tool and when user click on Map I am showing dialog on map screen. Now, I would like to get text values and dropdown select values from dialog box and when user click on save button of dialog I would like to add Text graphic on Map. Below is Widgets.js file code. Dojo dialog I have html templates and I am loading and setting as content in Dialog. After Showing the dialog box I am not able to execute event on Save button of dialog. How do I create dialog box, get values and execute the event of Dialog button?

    define([
    .....
    'dojo/text!./Graphics/templates/TextGraphics.html', \\ This is my HTML templates
    ...
    ]function (
     ....
     ....)
{
        return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
        // below is my code what I am trying to do
        var txtgr = Texttemplates;
            var drawTextClickHanlder = this.map.on('click', lang.hitch(this, function (evt, override) {
                var myDialog = new Dialog({
                    title: "Enter Text",
                    style: "width: 400px",
                    content: Texttemplates, // This is my HTML templates
                });
                myDialog.show();
                //var textSymbol = dojo.byId("addmaptext").value;
                var textSymbol = new TextSymbol(
                    //form.drawText,
                    "Text",
                    this.textFont,
                    this.textColor
                );
                var textGraphic = new Graphic(evt.mapPoint, textSymbol);
                this.textGraphics.add(textGraphic);
                this.connectMapClick();
                drawTextClickHanlder.remove();
            }));
   });
}),

with above code Dialog box shows but not able to execute Save button event and get text and dropdown select values.

Below is my Dialog box HTML templates

<div style="padding:5px;">
    <div id="dialogconfirmtext">
        <table>
            <tr>
                <td><label for="name">Enter label:</label></td>
                <td>
                    <div data-dojo-type="dijit/form/Form" data-dojo-attach-point="drawTextFormDijit">
                        <input type="text" data-dojo-type="dijit/form/ValidationTextBox" id="addmaptext"
                               data-dojo-props="name:'drawText',trim:true,required:true,style:'width:100%;',placeholder:''" />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="name">Color:</label>
                </td>
                <td>
                    <select name="select" data-dojo-type="dojox/form/DropDownSelect">
                        <option value="Red">Red</option>
                        <option value="Black" selected="selected">Black</option>
                    </select>
                </td>
            </tr>

        </table>
    </div>
</div>
<div class="buttonActionBar" id="btnact">
    <table>
        <tr>
            <td>
                <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'fa fa-globe',showLabel:true" data-dojo-attach-point="savetext" id="savetext">
                    save
                </button>
            </td>
        </tr>
    </table>
</div>

below is the output of Dialogbox

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.