Incorrect control instances in DiagramTemplate

Question

Hi,we have a problem with the SfDiagramComponent for server-side Blazor (20.3.0.47). In the attached example, three label controls are displayed via a diagram template. If the first control is deleted (delete key on keyboard), the information is in the second control. Apparently the control instance of the first control is drawn on the position of the second control. Take a look at "HashCode".This can then be repeated with the second and third controls.A complete example with source code has been attached.Cheers, BerndAttachment: 20223009_DeleteAtNodeTemplate_e3963198.zip

Bernd Milbrandt · Answer

Animated GIF inside ZIP

Attachment: 20220930_DeleteAtNodeTemplateGIF_8eb7ea2d.zip

Sumathi Uthayakumar · Answer

Hi
Bernd,This
problem has been resolved at the sample level. In this example, you set the
text of the LabelViewModel in the OnInitialized method. When a component is initialized,
the oninitialized method is called. The label component is refreshed when you
attempt to delete the node. The text property of the label component is only
updated, the text of the LabelViewModel is not updated. Because you've set
ViewModel in the Oninitialized method. As a result, the viewmodel's text and
hascode values are incorrectly updated. We solved this issue by setting the
text of the LabelViewModel in OnParameterSetAsync.When the component receives
the parameters from the parent component, the OnParameterSetAsync method is
called, which means that when we perform a delete operation, the Text property
in the LabelComponent is updated. At that time, we have to set the
LabelViewModel text property. We have shared a sample and a video for your
reference.Regards,Sumathi
U.Note:
If this post is helpful, please consider Accepting it as the solution so that
other members can locate it more quickly.Attachment: Forum177892Sample_524e8b4b.zip

Bernd Milbrandt · Answer

Hi Sumathi,thanks for providing your example. But this workaround doesn't solve the bug.In our case, the node components of the diagram are much more complex than just showing parameters from the diagram on a razor component.Our components are stateful and independent. Yes, we use the OnInitialized method, because it's only called during component creation.And we also use other Blazor features like @inject to get other services from the di container to work with and store our state.Some components allow data input from the user, so how should we handle all these requirements, if we permanently loose our component's state?Exchanging a razor component instance during runtime is not an expected behavior in Blazor programming. How could we use these standard features, when we get the wrong razor component instance after delete?In your sample, you always create a new viewmodel instance in the OnParameterSetAsync method. OnParameterSetAsync is called on every change like node creating, zooming, rotating, moving, clicking and so on.Even if the component should not be rendered again, OnParameterSetAsync is always called and we will loose our component's state at each interaction.Our viewmodel should be stateful and that works fine for your SfDiagramComponent, except of deleting a node.Please, could you fix the bug or provide an other workaround for us?

Sumathi Uthayakumar · Answer

Hi
Bernd,The
reported issue has been resolved at the sample level. When we delete the node,
the Text value is updated, based on this text property update, we have set ViewModel
Text value in that setter method of the text property. We have shared a code
snippet and video for your reference.

private string _text = string.Empty;
      [Parameter]
      public string Text
      {
          get
          { return _text; }
          set
          {
              if (value !=
  _text)
              {
                  _text = value;
                  if
  (ViewModel != null)
                  {
                      ViewModel.Text = value;
                  }
              }
          }
      }

Regards,Sumathi
U. Attachment: Video_3e8acb72.zip

Bernd Milbrandt · Answer

Hi Sumathi,thank you for your help, but this is not a solution for us either.First suggestion clears the ViewModel's internal state as a new ViewModel is created. In addition, for performance reasons, we cannot permanently create new ViewModels at runtime. Because: we subscribe to services within the ViewModels. Otherwise it would also be possible that we miss event messages. With the second suggestion, the internal state is on a wrong node because the wrong ViewModel is being used.A more complex example is attached for better understanding. A Node has a Component and a Component has a ViewModel. The ViewModel subscribes to a Service and informs the Component about data changes via an event.Furthermore, the ViewModel has three types of data:Data from the node via the parameters.Data from a service.Internal state data.As you can see the the node components of the diagram are much more complex than just showing parameters.The main problem is basically that the component of a deleted node is reused elsewhere in the diagram. This is definitely an unexpected behavior. As a result, the components cannot be optimized using "Should Render" because they are constantly being re-rendered. In addition, functions such as "CTRL+Z" can be problematic after an incorrect dispose. And of course dealing with complex ViewModels becomes very critical.We consider this to be a serious bug and so we ask again: Please, could you fix the bug or provide an other workaround for us?Regards,Bernd M.Attachment: DeleteAtNodeTemplate2_19159b2a.zip

Rajeswari Pounraj · Answer

Hi Bernd,This issue has been resolved in the sample. For every deletion of the node, the Node template gets refreshed but text in a LabelViewModel is not updated based on the node. So the deleted node(first node) values are updated to the second node. So we have maintained a dictionary for LabelViewModel. By this, if you delete the node, the values will be updated to the remaining node based on the dictionary value, the deleted node's data will not be updated to the remaining node and the deleted node will also be removed from the dictionary, we have handled this in collection changed event. And we have ensured undo-redo for the same scenario, that's also working fine at our end.We included a sample and video for your referenceRegards,RajeswariAttachment: DeleteAtNodeTemplate_5c8da2b0.zip

Bernd Milbrandt · Answer

Hi Rajeswari,this is not a solution to the problem.Try deleting the first node and you will see that the last node is no longer supplied with data from eventbus. Also: CTRL-Z forgets the internal state (DataFromInternalState) - but for now to the first problem.We have attached a small graphic to explain the situation:n1, n2, n3 = different node instancesc1, c2, c3 = different component instancesvm1, vm2, vm2 = different viewmodel instances What's happening? After deleting, the ViewModels are connected to the wrong component to inform about data changes (DataChangedEvent). The last component (C2) gets the change notification from the previous ViewModel (VM2) and then tries to fetch the data from VM3. However, VM3 was disposed of by C3 and can no longer get data from the bus. In addition, according to this logic, VM1 should no longer exist, which it still does. If VM1 were also disposed of correctly ("LabelVM[text].Dispose()" inside CollectionChanged-Method), no data changes would be visible at all.Please, just delete the Component (C1) according to the Node (N1)! Any other solution would only be treating the symptoms. Question: Is this possible?Regards,BerndAttachment: 20221013_incorrectcontrolinstancesindiagramtemplate_605a772c.zip

Preethi Rajakandham · Answer

Hi Bernd,We would like to check this issue at your end. Please create a ticket for further support assistance using your direct-trac account.Regards,Preethi R