1. Home
  2. Forum
  3. AngularJS
  4. I keep getting the following error: setModel - Invalid input for property :palettes - Expected type - array <div ej-symbolpalette="" id="symbolpalette" e-height="100%" e-width="100%" e-palettes="palettes" e-diagramid="diagramId">

I keep getting the following error: setModel - Invalid input for property :palettes - Expected type - array <div ej-symbolpalette="" id="symbolpalette" e-height="100%" e-width="100%" e-palettes="palettes" e-diagramid="diagramId">

I am trying to add symbol pallet using AngularJS and following your documentation on the same: https://help.syncfusion.com/angularjs/diagram/symbol-palette#add-palettes-to-symbolpalette

But When I run the file in Chrome I get the following error: setModel - Invalid input for property :palettes - Expected type - array <div ej-symbolpalette="" id="symbolpalette" e-height="100%" e-width="100%" e-palettes="palettes" e-diagramid="diagramId">

Here is my code:
<!DOCTYPE html>
<html ng-app="defaultApp">
<head>
<link rel="icon" rel='nofollow' href="images/logo.jpg">
<title>Draw Shapes with HTML</title>
<link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/14.3.0.49/js/web/bootstrap-theme/ej.web.all.min.css" />
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
<script src="http://cdn.syncfusion.com/14.3.0.49/js/web/ej.web.all.min.js" type="text/javascript"></script>
<script src="http://js.syncfusion.com/demos/web/scripts/xljsondata.js" type="text/javascript"></script>
<script src="https://code.angularjs.org/1.4.0-rc.2/angular-route.min.js"></script>
<script src="http://cdn.syncfusion.com/14.3.0.49/js/common/ej.widget.angular.min.js"></script>
<script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script>
<script src="./js/draw.js"></script>
</head>
<body>
<div ng-controller="diagramCtrl">
<div ej-symbolpalette id="symbolpalette" e-height="100%" e-width="100%" e-palettes="palettes" e-diagramid="diagramId"></div>
{{palettes}}
<div>
<ej-diagram id="diagram" e-width="100%" e-height="100%">
</ej-diagram>
</div>
</div>
</body>
</html>


My DRAW:JS file code:
var syncApp = angular.module("defaultApp", ["ngRoute", "ejangular"]);

//Defines the JSON to create a palette
   var palette = {
       //Sets the name of the palette
       name: "Basic Shapes",
       //Sets whether the palette expands/collapse its children
       expanded: true,
   };

syncApp.controller('diagramCtrl', function($scope) {
$scope.diagramId = "diagram";
//Defines the palette collection 
$scope.palettes = palette;
});


I tried adding the rectangular palette but still get the same error. I can see that the palettes is being filled and displayed in the front end using  {{palettes}}. Not sure what I am doing wrong.

1 Reply 1 reply marked as answer
AR Aravind Ravi Syncfusion Team July 24, 2020 07:58 AM UTC

Hi AB, 
 
We have created a sample to show diagram with symbol palette in Angular JS. To drag and drop the nodes from symbol palette to diagram, set corresponding diagram ID to the diagramID property of the symbol palette. By using the palette property we can able to display a group of symbols and palette and items property in palette is used to add symbols in palette. After set all the values bind the values in symbolpalette tag Please refer below code example and sample 
 
<div ej-symbolpalette id="symbolpalette" e-height="100%" e-width="100%" 
                                          e-palettes="palettes" 
                                          e-paletteitemwidth="paletteItemWidth" e-paletteitemheight="paletteItemHeight" 
                                          e-previewwidth="previewWidth" e-previewheight="previewHeight" 
                                          e-showpaletteitemtext="false" 
                                          e-diagramid="diagramId"> 
                        </div> 
 
angular.module('syncApp', ['ejangular']) 
           .controller('diagramCtrl', function ($scope) {  
           $scope.nodes = nodes; 
              $scope.diagramId = "diagram"; 
               $scope.paletteItemWidth = 50; 
              $scope.paletteItemHeight = 50; 
             $scope.previewWidth = 100; 
            $scope.previewHeight = 100; 
            $scope.palettes = palettes; 
             
           }); 
 
 
 
 
Regards 
Aravind Ravi 


Marked as answer
Loader.
Up arrow icon