Set background colour for diagram area

GoJS
#1

My requirement is to set back ground colour for diagram working area. Currently i am using diagram ruler. I created border in the diagram area. i have to set back ground colour as ‘white’ to diagram working area, rest of the area should be set to ‘grey colour’
like power point presentation.

I created border in the diagram area based on the system monitor resolution (1920×1080) height and width using diagram ruler . please me advise on this.

#2

Just set the background style on the diagram’s HTML DIV element. Lots of samples do this.

#3

Thanks for your suggestion. I have created rectangle shape based on system height and width. i need to set height and width dynamically based select dropdown list value change. please find my code create rectangle and
$(’#ddlResolution’).on(‘change’, function (e)
{
var optionSelected = $(“option:selected”, this);
var valueSelected = this.value;

        if (!Utility.isNullOrEmpty(valueSelected))
        {
            var tempValue = valueSelected.split('×');
            systemWidth = parseInt(tempValue[0]);
            systemHeight = parseInt(tempValue[1]);
         
        }
    });

var gradBorderIndicatorTopLeft =
$$(go.Part, “Graduated”, new go.Binding(“zOrder”), { zOrder: 0 },
{
pickable: false,
// layerName: “Foreground”,
visible: false,
isInDocumentBounds: false, isAnimated: false,

},
$$(go.Shape, “Rectangle”,
{
width:systemWidth,
height: systemHeight,
margin: 0,
background: “white”,
fill: null

}
 
));

my problem is rectangle shape width & height is not changed dynamically. i m getting system width and height dynamically based drop-down list selection change. first time only rectangle shape will take system width and height . after that it won’t take dynamic system height and width. please provide your suggestion

#4

Where is your code to modify the width and height of that rectangular Shape?

#5

my requirement is dynamically set height & width property for Rectangle shape area. currently i am trying to set height & width from dropdown selected item value.
var gradBorderIndicatorTopLeft =
$$(go.Node, “Spot”, new go.Binding(“zOrder”), { zOrder: 0 },

$$(go.Shape, "Rectangle",
{
   width: systemWidth,
   height: systemHeight,
    margin: 0,
    background: "white",
    //  borderColor:"black",
    fill: null
    //,row: 0,
    //column:1
}
,
new go.Binding("width", "Swidth")

,new go.Binding(“height”, “Sheight”)

));

dropdown selection change coding:
//Load the default system Resolution

        if (Utility.isNullOrEmpty($("#ddlResolution")[0].options.innerText))
        {
            var tempValues = ["1024×576", "1152×648", "1280×720", "1280×800", "1280×1024", "768×1024", "1024×768", "1360×768", "480×800", "360×640", "1680×1050", "360×640", "1920×1200", "1440×900", "1366×768", "1600×900", "1920×1080", "2560×1440", "Custom"];
            var option = '';
            for (var i = 0; i < tempValues.length; i++) {
                option += '<option value="' + tempValues[i] + '">' + tempValues[i] + '</option>';
            }
            $("#ddlResolution").append(option);
        }

on change:

    $('#ddlResolution').on('change', function (e)
    {
        var optionSelected = $("option:selected", this);
        var valueSelected = this.value;

        if (!Utility.isNullOrEmpty(valueSelected))
        {
            if (valueSelected === "Custom")
            {
                $('#divResolution').removeClass("hidden");
               
               // $("#LayoutOptions").removeClass("layoutheight");
               // $("#LayoutOptions").addClass("customlayoutheight");
               // var tem = summerNoteHeight - 44;

               //$(".note-editor").height(tem + "px");
            }
            else
            {
                $('#divResolution').addClass("hidden");
                //$("#LayoutOptions").removeClass("customlayoutheight");
                //$('#LayoutOptions').addClass("layoutheight");
                //$(".note-editor").height(summerNoteHeight + 44 + "px");
                
                var tempValue = valueSelected.split('×');
                systemWidth = parseInt(tempValue[0]);
                systemHeight = parseInt(tempValue[1]);
                if (!Utility.isNullOrEmpty(gradBorderIndicatorTopLeft) && !Utility.isNullOrEmpty(wiDiagram))
                {
                    // wiDiagram.each(function (evt) {
                    wiDiagram.startTransaction('modified zOrder1');

                    wiDiagram.model.setDataProperty(gradBorderIndicatorTopLeft.part, "Swidth", systemWidth);
                    //wiDiagram.model.setDataProperty(gradBorderIndicatorTopLeft.part.data, "Sheight", systemHeight);
                    wiDiagram.commitTransaction('modified zOrder1');
                    //}
                    //)
                }
            }
        }
    });

I need to set rectangle height and width based on drop down selected value. currently rectangle height & width is not changed based dropdown value
please advise me on this

#6

If you were using the debug version of the GoJS library and paying attention to warnings and errors in the console output, you would have received warnings about Model.setDataProperty setting the “Swidth” property on your Node, rather than on your model data object.

Is your gradBorderIndicatorTopLeft used as a node template? That is required if you are going to use data binding.

If not, then you should modify the width and height properties of the Shape that is inside your gradBorderIndicatorTopLeft, rather than going through your model data. But then that information would not be stored in your model.