PrintTask does not print the graphics in the proper order

Question

I've used the PrintTask to perform the print job. It performs well until I add some graphics, and found out that the points and texts ar printed underneath the polygons even if the points and texts are drawn on top of the polygons. Please see the attached images. The first image shows the partial screenshot from the app. One point sits on top of the circle, and another one sits under the circle. The second image is the printout image. Both points sit underneath the circles. Can ESRI look into this issue?
[ATTACH=CONFIG]27358[/ATTACH]              [ATTACH=CONFIG]27359[/ATTACH]

drawingOnMap.jpg

drawingOnPrintout.png

New File Geodatabase.gdb.rar

Pyy.py.zip

KoryKramer_0-1636669502538.png

HannesZiegler_1-1636668818747.png

JasonZou · Answer

Thanks for pointing me to the function. It seems the point graphics are put underneath the polygons by design. Is there any specific reason for doing that? I think it is against the way people normally do.

Matter of fact, people expect to see the graphics shown on the printout page the same order as shown on the map. With that being said, personally I think it is a bad idea to re-group the graphics out of a graphics layer based on the spatial type because more than likely it will break the order shown on the map anyway.

Anonymous User · Answer

Original User: vinaybansal

Yes it looks awkward.....But if you look into the printtask.js in ArcGIS Javascript API : This is what ESRI does for map graphics and single graphic layer graphics....
Creates layers internally for polygon,polyline,point and multipoint.....and then adds point layer first, then polyline, then polygon and then multipoint to the featurecollection arrays.....

_createFeatureCollection: function (_2f) {
            var _30 = new this._polygonLayer();
            var _31 = new this._polylineLayer();
            var _32 = new this._pointLayer();
            var _33 = new this._multipointLayer();
            if (_2f.declaredClass === "esri.layers.FeatureLayer") {
                _30.layerDefinition.name = _31.layerDefinition.name = _32.layerDefinition.name = _33.layerDefinition.name = _2f.name || _2f.id;
            }
            if (_2f.renderer && !_2.isFunction(_2f.renderer.attributeField)) {
                _30.layerDefinition.drawingInfo.renderer = _2f.renderer.toJson();
                _31.layerDefinition.drawingInfo.renderer = _2f.renderer.toJson();
                _32.layerDefinition.drawingInfo.renderer = _2f.renderer.toJson();
                _33.layerDefinition.drawingInfo.renderer = _2f.renderer.toJson();
            } else {
                delete _30.layerDefinition.drawingInfo;
                delete _31.layerDefinition.drawingInfo;
                delete _32.layerDefinition.drawingInfo;
                delete _33.layerDefinition.drawingInfo;
            } if (_2f.fields) {
                _30.layerDefinition.fields = _2f.fields;
                _31.layerDefinition.fields = _2f.fields;
                _32.layerDefinition.fields = _2f.fields;
                _33.layerDefinition.fields = _2f.fields;
            }
            var _34, i;
            for (i = 0; i < _2f.graphics.length; i++) {
                var g = _2f.graphics;
                if (g.visible === false || !g.geometry) {
                    continue;
                }
                _34 = g.toJson();
                if (_34.symbol && _34.symbol.outline && _34.symbol.outline.color && _34.symbol.outline.color[3]) {
                    _34.symbol.outline.color[3] = 255;
                }
                if (_2f.renderer && _2.isFunction(_2f.renderer.attributeField) && !_34.symbol) {
                    _34.symbol = _2f.renderer.getSymbol(g) ? _2f.renderer.getSymbol(g).toJson() : _34.symbol;
                }
                switch (g.geometry.type) {
                case "polygon":
                    _30.featureSet.features.push(_34);
                    break;
                case "polyline":
                    _31.featureSet.features.push(_34);
                    break;
                case "point":
                    _32.featureSet.features.push(_34);
                    break;
                case "multipoint":
                    _33.featureSet.features.push(_34);
                    break;
                }
            }
            var _35 = [];
            if (_32.featureSet.features.length > 0) {
                _35.push(_32);
            }
            if (_31.featureSet.features.length > 0) {
                _35.push(_31);
            }
            if (_30.featureSet.features.length > 0) {
                _35.push(_30);
            }
            if (_33.featureSet.features.length > 0) {
                _35.push(_33);
            }
            var _36 = {
                layers: _35
            };
            var _37 = {
                id: _2f.id,
                opacity: _2f.opacity,
                minScale: _2f.minScale || 0,
                maxScale: _2f.maxScale || 0,
                featureCollection: _36
            };
            return _37;
        }

If seperate graphics layers are created then they are added in the order they are created........

JasonZou · Answer

That might work. I will test it out though. But I really hate to create one graphics layer for polygons and maybe polylines, and another one for points and texts just to make it work for print. It sounds very awkward.

EDIT: just tested it out, and Vinay's workaround does work. Thanks, Vinay. But I do like to see that ESRI can provide a permanent solution for this issue.