I have a search bar inside the palette to filter cmps, but the palette doesn't refresh after filter! i have same cmps in bottom not shown

GoJS
1 
 myPalette.nodes.each(function (n) {
        if (undefined !== n.data.title) {
            n.visible = n.data.title.toLowerCase().includes(e.toLowerCase());
        }
    });
  myPalette.startTransaction("update items palette");
  myPalette.redraw();
  myPalette.commitTransaction("update items palette");

Thank u for your help!

2

In general you need to start the transaction before making any changes, then you make all those changes, and finally you commit the transaction. So move the call to startTransaction before iterating over the nodes of the palette.

Otherwise your code looks OK to me.

3

after starting with startTransaction i have the same result, i have always the same issue, I don’t know how can I refresh the palette, is there any way please?

issue :
image

note: if i scroll into palette the display is refreshed!

image

thank you

4

You should never call redraw – ending the transaction will update as needed. I’m wondering if that is messing it up.

5

i removed the redraw action but i don’t have any update :/ we cannot remove node instead of set visible to false, or you don’t have any simple example for this ?
image

6

As far as I can tell, that should work well. Here’s what I just tried:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Editor</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
      <div id="myPaletteDiv" style="flex-grow: 1; width: 100px; background-color: floralwhite; border: solid 1px black"></div>
    </div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
  </div>
  <div>
    Filter substring: <input id="mySearch">
  </div>
  <div>
    <button id="myLoadButton">Load</button>
    <button id="mySaveButton">Save</button>
  </div>
  <textarea id="mySavedModel" style="width:100%;height:200px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [
{"key":1, "text":"hello", "color":"green", "location":"0 0"},
{"key":2, "text":"world", "color":"red", "location":"70 0"}
  ],
  "linkDataArray": [
{"from":1, "to":2}
  ]}
  </textarea>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

// initialize main Diagram
const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    $(go.Shape,
      {
        fill: "white", stroke: "gray", strokeWidth: 2,
        portId: "", fromLinkable: true, toLinkable: true
      },
      new go.Binding("stroke", "color")),
    $(go.TextBlock,
      {
        margin: new go.Margin(5, 5, 3, 5), font: "10pt sans-serif",
        minSize: new go.Size(16, 16), maxSize: new go.Size(120, NaN),
        editable: true
      },
      new go.Binding("text").makeTwoWay())
  );

// initialize Palette
myPalette =
  $(go.Palette, "myPaletteDiv",
    {
      nodeTemplateMap: myDiagram.nodeTemplateMap,
      model: new go.GraphLinksModel([
        { text: "red node", color: "red" },
        { text: "green node", color: "green" },
        { text: "blue node", color: "blue" },
        { text: "orange node", color: "orange" }
      ])
    });

// filter the nodes that are shown in the palette
document.getElementById("mySearch").addEventListener("input", e => {
  const str = e.target.value;
  myPalette.commit(pal => {
    pal.nodes.each(n => {
      n.visible = n.data.text.indexOf(str) >= 0;
    });
  });
});

// save a model to and load a model from Json text, displayed below the Diagram
function save() {
  var str = myDiagram.model.toJson();
  document.getElementById("mySavedModel").value = str;
}
document.getElementById("mySaveButton").addEventListener("click", save);

function load() {
  var str = document.getElementById("mySavedModel").value;
  myDiagram.model = go.Model.fromJson(str);
}
document.getElementById("myLoadButton").addEventListener("click", load);

load();
  </script>
</body>
</html>