Child component is not rendering

[Seetha]

Dear team,

Issue: Child component(Diagram control) is not refreshing

In the child component, I've syncfusion diagram control. It binds well and no issues at the first time but when the data changes on the parent component which is not reflecting/refreshing on the child component. In fact, I've statehaschanged() method too on the parent but still the child component is not refreshing. 

Additionally, I used blazor cascading parameter to pass the data changes to child component(diagram control) and syncfusion version 18.3.0.47

Attached the same with thread

Parent component: StockEnquiry.razor

Child component: StockDiagramHistory.razor

Approaches tried in code:

#1 statehaschanged() method in parent component - but still child component hasn't refreshed

#2 I've created method in the child component. Whenever the data changes, I passed to child's component method(internally this function calls OnInitialized method) but no luck

Could you please help.

Many thanks

Seetha.

Attachment: BlazorParentChildFiles_ab17eab8.zip

[Aravind Ravi]

Hi Seetha, 

 

On analyzing the provided sample, you have shared only the StockDiagramDetail and StockEnquiry files. But in the StockEnquiry component you have used the StockDiagramHistory component as a child component.  

Parent component: StockEnquiry.razor 

Child component: StockDiagramHistory.razor 

 

 

 

So please recheck and send the StockDiagramHistory file. This would help us to analyze further and provide solution at earliest.  

 

Regards 

Aravind Ravi 

[Seetha]

Hi Aravind,

Sorry, I have reattached with right files.

Thanks for looking into this.

Many thanks,

Seetha.

Attachment: StockEnquiryStockDiagramHistoryfiles_a2e87e14.zip

[Gowtham Gunashekar]

Hi Seetha 

 

We are validating your requirements and update you with more details on January 13th 2020.  

 

Regards, 

Gowtham. 

[Gowtham Gunashekar]

Hi Seetha, 

 

On further analysis, we suspect you are trying to clear the current diagram and create a new diagram in the child component by calling a method in the parent component. We have analyzed your code and found you have used InitDiagramModel method in the OnInitialized and Refresh. In the InitDiagramModel method, you have initialized the nodes and connectors collections. You should not reinitialize the node and connector again in Refresh method by calling the InitDiagramModel. 

If you want the create a new diagram in the existing diagram means then please follow below steps 

1). Clear the diagram by calling “Diagram.Clear(); “API, it will remove the existing node and connector and clear the node and connector collection. 

2) Then add the required nodes and connector in the respected collection as mentioned below. 

 

  public void Refresh(string Id) 

    { 

        Diagram.Clear(); 

        NodeCollection.Add(NewNode("old Diagram","green") 

        ConnectorCollection.Add(NewConnecctor ("old Diagram","green") 

     } 

 

Regards, 

Gowtham 

[Seetha]

Hey Gowtham,

It works well. Splendid.!!..Thanks for the solution & wonderful support from SF.

Many thanks

Seetha.

[Gowtham Gunashekar]

Hi Seetha,  

 

Thanks for your update. Please let us know whether you need any further assistance on this. 

 

Regards,           

Gowtham 

 

[Seetha]

Hi Gowtham,

"Attempting to reconnect to the server..."  - This is happening when the user clicks on the diagram area other than nodes. I've logic on the left mouse button click to open a popup which works as expected. It seems try to reconnect the server when user clicked outside/other than node elements(This message appears few seconds on the screen then disappear).

Looking forward your response on this one. Thx

Many thanks,

Seetha.

Attachment: StockDiagramHistoryattempttoreconnectserver_d7be8e0.zip

[Gowtham Gunashekar]

Hi Seetha, 

 

By default, in the blazor,  If the data loaded from client to server is more than 32KB means then server reconnect issue occurs in the blazor. Please find the below github link for more information about issue  

   

https://github.com/dotnet/aspnetcore/issues/11184   

   

To overcome this increase the message size in the startup.cs file. In the startup.cs file in the ConfigureServices method add the below service to increase the message size   

   

public void ConfigureServices(IServiceCollection services)   

        {   

            services.AddRazorPages();   

            services.AddServerSideBlazor();   

            services.AddSyncfusionBlazor();   

            services.AddSingleton<HMIService>();   

            services.AddSingleton<MQService>();   

            services.AddServerSideBlazor().AddHubOptions(o =>   

            {   

                o.MaximumReceiveMessageSize = 102400000;   

            });   

        }   

   

We have modified a sample by adding a service in startup file. We have attached a sample in below link   

   

Sample: https://www.syncfusion.com/downloads/support/forum/157649/ze/Selection-Change334138712  

  

Regards   

Gowtham. 

 

[Seetha]

Hi Gowtham,

Superb solution. It works well now.  Thank you for quick one.

Thx

Seetha.

[Gowtham Gunashekar]

Hi Seetha,  

 

Thanks for your update. Please let us know whether you need any further assistance on this. 

 

Regards,  

Gowtham 

 

[Seetha]

Hi Gowtham,

Looking for some inputs on this. Now I've changed my SF diagram component as part of another dynamic component whereas facing "System.InvalidOperationException: Object of type 'Syncfusion.Blazor.Diagrams.SfDiagram' does not have a property matching the name 'CPDataset'". but the property(CPDataset) already defined in diagram component and passed value from parent too. Not sure what I'm missing here.

At high level

                                          Parent                 Child                   grandchild

Component hierarchy:  StockEnquiry --> TracRecords --> StockDiagramHistory

Parameters                   :   CPDataset             CPDataset

Cascading param         :                                 CPDataset             CPDataset

I will be creating a copy/instance of TracRecords components (which includes diagram component ) whenever CPDataset data changes from Stockenquiry component.

Many thanks

Seetha.

Attachment: StockEnquirypty_does_not_match_issue_cc6ba94e.zip

[Naganathan Ganesh Babu]

Hi Seetha, 

 

We are facing some depended control issue in attached razor which has provided by you in previous update. Could you please check and provide sample as runnable? 

 

 

 

Regards, 

 

Naganathan K G 

[Seetha]

Hi Naga,

I provided only the files for reference. The files can't be runnable as it requires proper data and other dependencies. Would it be possible to see the implementation around diagram control along with parameter to suggest further?. If so, It would be great & much appreciated. Thx.

Many thanks

Seetha.

[Gowtham Gunashekar]

Hi Seetha, 

 

On our further analysis, we found you have used a parameter “CPDataset="@CPDataset"” in SFDiagram tag in “StockDiagramHistory.razor” file, So you have got the reported error. However, the custom parameter cannot be used in the diagram component.   

Regards, 

Gowtham. 

 

[Seetha]

Hi Gowtham,

Thank you for the inputs. I will check and try changing that.

One query: regarding layout option on the diagram. 

The layout alignment is perfect when I've less nodes(binding first time) following by more nodes(binding 2nd time) but If I bind more nodes followed by less nodes then all the nodes moved top left corner of the screen. I've done diagram.clear(), Diagram.refresh() and cleared nodecollection & nodeconnector objects too..no luck. Attached screenshot for reference too.

Please assist.

Many thanks

Seetha.

Attachment: StockDiagramHistorylayoutissue_de186575.zip

[Gowtham Gunashekar]

Hi Seetha,  

  

On our further analysis, we suspect you are try to create a new layout diagram from existing diagram, to achieve this you need to clear the diagram and add nodes and connector and then need to call ”DoLayout()” for automatic alignment. We have added a code snippet to how to create a layout diagram with automatic alignment. 

 

Code snippet: 

  public void Refresh(List<UnitTrackingHistory> cpDataset) 

    { 

            Diagram.Clear(); 

            CPDataset = cpDataset; 

            if (CPDataset != null) 

                ConstructDiagramModel(); 

// to get automatic layout alignment 

                Diagram. DoLayout(); 

 

   } 

 

If we misunderstood your requirement, please share us video demonstration for the reported issue. This will be helpful for us to proceed further. 

 

Regards,  

Gowtham 

[Seetha]

Hi Gowtham,

As usual, on spot solution. It worked as expected. So far all your solution helped me to achieve development results so faster. Thank you very much Gowtham.

Many thanks

Seetha.

[Gowtham Gunashekar]

 

Hi Seetha,   

Thanks for your update. Please let us know whether you need any further assistance on this. 

Regards 

Gowtham 

[Seetha]

Hi Gowtham,

Issue: unable to get selected html node item

Background: I've the diagram control node as html type and added SFCard as a child inside each html node. It displayed as expected but when tried to retrieve the selected node items( context menu click event) the selected node items returns a null value. Screen shot has been attached for reference.

Would you please assist me to read the selected nodes from the diagram component.? Thanks in advance.

Many thanks

Seetha.

Attachment: Selected_node_items_are_null_issue_c6283564.zip

[Gowtham Gunashekar]

Hi Seetha, 

 

On our further analysis we found that you have  excluded the select constraints from the node so you cannot able to select the node that’s why the SelectedItem’s nodes collection is empty. If you want to use selectedItem means kindly include the select constraints in the node 

 

 

 

If we misunderstood your requirement, please share us a video demonstration of the reported issue or share a runnable sample to replicate the reported issue. This will be helpful for us to proceed further. 

 

Regards,  

Gowtham 

[Seetha]

Hi Gowtham,

Superb. working great!. Thank you.

[Gowtham Gunashekar]

Hi Seetha, 

 

Thanks for your update. Please let us know whether you need any further assistance on this. 

 

 

Regards  

 

Gowtham