faulknerj

Conflicting Code: Edit Widget and Datagrid w/ search

Discussion created by faulknerj on Jan 31, 2013
Latest reply on Feb 3, 2013 by faulknerj
Hi All,

I'm trying to write a web app that includes an editor widget (like: "http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/ed_editing_widget") and a datagrid with a search (like: "http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/find_map"), however somewhere along the line the two pieces of code conflict so the editor widget no longer shows up in its div.

The code in question is here:


    //create find task with url to map service
    findTask = new esri.tasks.FindTask("http://ingisd01/ArcGIS/rest/services/Tokanui/tokanui_paddock_test/FeatureServer");

    //create find parameters and define known values
    findParams = new esri.tasks.FindParameters();
    findParams.returnGeometry = true;
    findParams.layerIds = [0];
    findParams.searchFields = ["PadID","Caption"];

} //end of init func


function execute(searchText) {
    //set the search text to find parameters
    findParams.searchText = searchText;
    findTask.execute(findParams, showResults);
}

function showResults(results) {
    //symbology for graphics
    var markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
    var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
    var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));

    //find results return an array of findResult.
    map.graphics.clear();
    var dataForGrid = [];
    //Build an array of attribute information and add each found graphic to the map
    dojo.forEach(results, function (result) {
        var graphic = result.feature;
        dataForGrid.push([result.layerName, result.foundFieldName, result.value]);
        switch (graphic.geometry.type) {
            case "point":
                graphic.setSymbol(markerSymbol);
                break;
            case "polyline":
                graphic.setSymbol(lineSymbol);
                break;
            case "polygon":
                graphic.setSymbol(polygonSymbol);
                break;
        }
        map.graphics.add(graphic);
    });
    var data = {
        items: dataForGrid
    };
    var store = new dojo.data.ItemFileReadStore({
        data: data
    });
    grid.setStore(store);
}
function initEditor(results) {

    //build the layer and field information for the layer, display the description field using a text area.
    var layers = dojo.map(results, function (result) {
        var fieldInfos = dojo.map(result.layer.fields, function (field) {
            if (field.name === 'Caption') {
                return { 'fieldName': 'Caption', 'label': 'Caption', stringFieldOption: esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA };
            }
            else {
                return { 'fieldName': field.name, 'label': field.alias };
            }
        });
        return { featureLayer: result.layer, 'fieldInfos': fieldInfos };
    });

    var settings = {
        map: map,
        enableUndoRedo: true,
        layerInfos: layers,
        toolbarVisible: true,
        createOptions: {
            polygonDrawTools: [
              esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON,
              esri.dijit.editing.Editor.CREATE_TOOL_AUTOCOMPLETE
            ]
        },
        toolbarOptions: {
            reshapeVisible: true,
            cutVisible: true,
            mergeVisible: true
        }
    };
    var params = { settings: settings };

    editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');


    //create a new checkbox to enable/disable snapping
    var checkBox = new dijit.form.CheckBox({
        name: "chkSnapping",
        checked: true,
        id: "chkSnapping",
        label: "Snapping",
        showLabel: "false",
        title: "Snapping",
        onChange: function (evt) {
            console.log(this.checked);
            if (this.checked) {
                map.enableSnapping({ snapKey: dojo.keys.copyKey });
            } else {
                map.disableSnapping();
            }
        }
    });

    //add the snapping checkbox to the editor's toolbar
    var myToolbarElement = dojo.query(".esriDrawingToolbar", editorWidget.domNode)[0];
    var myToolbar = dijit.byId(myToolbarElement.id);

    myToolbar.addChild(new dijit.ToolbarSeparator());
    myToolbar.addChild(checkBox);

    editorWidget.startup();

    //listen for the template pickers onSelectionChange and disable
    //the snapping checkbox when a template is selected
    var templatePickerElement = dojo.query(".esriTemplatePicker", editorWidget.domNode)[0];
    var templatePicker = dijit.byId(templatePickerElement.id);
    dojo.connect(templatePicker, "onSelectionChange", function () {
        if (templatePicker.getSelected()) {
            //disable the snapping checkbox
            dijit.byId('chkSnapping').set("disabled", true);
        } else {
            dijit.byId('chkSnapping').set("disabled", false);
        }
    });
    map.infoWindow.resize(325, 200);
}



and a link to the whole javascript code:
http://pastebin.com/cuY1LPMd


Any help would be appreciated!

Thanks,

Jordan

Outcomes