Clear the selection in Selectable Fields upon Save

Followed with reference to forum topic - Selection in Field items to deselect other panel items upon next click of an item.
Now in my case upon Save need to clear all the selections… And am not able to achieve it using the functions isFieldSelected(item) AND setFieldSelected(item, sel) as below… But the log is showing the same “item” at all the functions…

 public save() {
    console.log("Save is called upon click button")
    console.log("Selected User is " + SelectableFieldsComponent.user)
    console.log("Selected Conf is " +

    const local = this.myDiagramComponent.diagram.model.nodeDataArray
    local.forEach(node => {
      if (node.isSelected) {
        node.fields.forEach(item => {
          if (SelectableFieldsComponent.isFieldSelected(item)) {
            SelectableFieldsComponent.setFieldSelected(item, false);
            console.log(` ${} + IS selected`)
            item.background = SelectableFieldsComponent.UnselectedBrush
            // deselect all sibling items
            // item.panel.elements.each(it => {
            //   if (it !== item) SelectableFieldsComponent.setFieldSelected(it, false);
            // });

And also applied the 3 lines of skipsUndoManager from OnFieldClick function…

// Before looking for selected items
 var oldskips = item.diagram.skipsUndoManager;
    item.diagram.skipsUndoManager = true;
//And at the end of save function put back to old
item.diagram.skipsUndoManager = oldskips;

Request your help on this.


I added this code to the Mapping Selectable Fields sample, Mapping Selectable Fields of Records :

      function clearAllSelectedItems() {
        myDiagram.commit(diag => {
          findAllSelectedItems().forEach(itempanel => {
            setFieldSelected(itempanel, false);
        }, null);  // skipsUndoManager

      myDiagram.commandHandler.stopCommand = function() {

The first function does what I think you are asking for. And yes, you want to avoid recording such changes in the UndoManager.

The second function is an override of the CommandHandler.stopCommand method so that when the user hits the Escape key not only is the current Diagram.selection cleared, but also all of the selected fields are cleared.

1 Like

Thanks got it…