1. Home
  2. Forum
  3. Blazor
  4. Child component is not rendering

Child component is not rendering

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

22 Replies
AR Aravind Ravi Syncfusion Team January 8, 2021 11:46 AM UTC

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 


SE Seetha January 10, 2021 08:09 PM UTC

Hi Aravind,
Sorry, I have reattached with right files.

Thanks for looking into this.

Many thanks,
Seetha.

Attachment: StockEnquiryStockDiagramHistoryfiles_a2e87e14.zip

GG Gowtham Gunashekar Syncfusion Team January 11, 2021 01:36 PM UTC

Hi Seetha 
 
We are validating your requirements and update you with more details on January 13th 2020.  
 
Regards, 
Gowtham. 



GG Gowtham Gunashekar Syncfusion Team January 15, 2021 01:11 PM UTC

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 


SE Seetha January 18, 2021 07:58 PM UTC

Hey Gowtham,

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

Many thanks
Seetha.

GG Gowtham Gunashekar Syncfusion Team January 20, 2021 12:58 PM UTC

Hi Seetha,  
 
Thanks for your update. Please let us know whether you need any further assistance on this. 
 
Regards,           
Gowtham 
 


SE Seetha January 21, 2021 09:23 PM UTC

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

GG Gowtham Gunashekar Syncfusion Team January 22, 2021 11:59 AM UTC

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  
   
   
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   
   
  
Regards   
Gowtham. 
 


SE Seetha January 24, 2021 08:32 PM UTC

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

Thx
Seetha.


GG Gowtham Gunashekar Syncfusion Team January 25, 2021 03:06 PM UTC

Hi Seetha,  
 
Thanks for your update. Please let us know whether you need any further assistance on this. 
 
Regards,  
Gowtham 
 


SE Seetha January 25, 2021 10:45 PM UTC

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

NG Naganathan Ganesh Babu Syncfusion Team January 26, 2021 08:38 AM UTC

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 


SE Seetha January 27, 2021 02:48 AM UTC

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.

GG Gowtham Gunashekar Syncfusion Team January 27, 2021 01:17 PM UTC

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. 
 


SE Seetha January 28, 2021 01:28 AM UTC

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

GG Gowtham Gunashekar Syncfusion Team January 28, 2021 09:13 AM UTC

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 


SE Seetha January 28, 2021 09:13 PM UTC

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.

GG Gowtham Gunashekar Syncfusion Team January 29, 2021 01:18 PM UTC

 
Hi Seetha,   

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

Regards 
Gowtham 


SE Seetha January 31, 2021 11:17 PM UTC

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

GG Gowtham Gunashekar Syncfusion Team February 1, 2021 11:45 AM UTC

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 


SE Seetha February 1, 2021 10:31 PM UTC

Hi Gowtham,
Superb. working great!. Thank you.

GG Gowtham Gunashekar Syncfusion Team February 2, 2021 01:41 PM UTC

Hi Seetha, 
 
Thanks for your update. Please let us know whether you need any further assistance on this. 
 
 
Regards  
 
Gowtham 


Loader.
Up arrow icon