We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Binding property from control inside NodeTemplate with property from the data model ?

Thread ID:

Created:

Updated:

Platform:

Replies:

150000 Dec 17,2019 01:18 PM UTC Dec 20,2019 04:40 AM UTC Blazor 5
loading
Tags: TreeView
Yordan
Asked On December 17, 2019 01:18 PM UTC

Hello.
I am having a list of objects which is instance from a data model.
Anyway I am using NodeTemplate fro the items, but I need to bind a property of a control inside this NodeTemplate to a property of the datamodel. How to do that ?

for instance :
<EjsTreeView ID="tree" TValue="TreeProxyDataModel" ModelType="@ModelType" ShowCheckBox="true" HtmlAttributes="@htmlAttribute">
            <TreeViewEvents TValue="@(TreeProxyDataModel )" NodeChecked="@onCheckNode"></TreeViewEvents>

            <EjsContextMenu @ref="menu" Items="@menuItems" >
            </EjsContextMenu>

            <TreeViewFieldsSettings Id="@( nameof( TreeProxyDataModel.id ) )"
                                    Text="@( nameof( TreeProxyDataModel.Caption ) )"
                                    ParentID="@( nameof( TreeProxyDataModel.groupID ) )"
                                    HasChildren="@( nameof( TreeProxyDataModel.hasChild ) )"
                                    Expanded="@( nameof( TreeProxyDataModel.expanded ) )"
                                    IsChecked="@( nameof( TreeProxyDataModel.selected ) )"
                                    Tooltip="@( nameof( TreeProxyDataModel.Hint ) )"
                                    
                                    DataSource="@treeData"></TreeViewFieldsSettings>
            <TreeViewNodeAnimationSettings>
                <TreeViewExpand Duration="0"></TreeViewExpand>
                <TreeViewCollapse Duration="0"></TreeViewCollapse>
            </TreeViewNodeAnimationSettings>
            <TreeViewTemplates>
                <NodeTemplate>

                    <div style="nodeStyle">
                        <div style="float:left">
                            <img @bind-src="@( ( @context as TreeProxyDataModel ).visibilityIndicatorPath )" @onclick="@( ( e ) => onVisibilityIconClicked( ( @context as TreeProxyDataModel ).id, e ) )"  />

                            <img src="@( ( @context as TreeProxyDataModel ).vehivleIcon )" />

                        </div>
                        
                    </div>
                </NodeTemplate>
            </TreeViewTemplates>
        </EjsTreeView>

in this part :

<img @bind-src="@( ( @context as TreeProxyDataModel ).visibilityIndicatorPath )" - I wish somehow to bind the SRC property of IMG control to the visibilityIndicatorPath.


Muthukrishnan Kandasamy [Syncfusion]
Replied On December 18, 2019 10:24 AM UTC

Hi Yordan, 
 
Thanks for contacting Syncfusion support. 
 
You can bind src attribute for img tag inside the nodeTemplate of TreeView component. Refer to the below code block. 
 
<NodeTemplate> 
 @{ 
   <div style="float:left"> 
   <img class="eimage" src="@((@context as TreeProxyDataModel).visibilityIndicatorPath)" /> 
   <div class="ename">@((@context as TreeProxyDataModel).Caption)</div> 
   </div> 
 } 
</NodeTemplate> 
 
treeData.Add(new TreeProxyDataModel 
        { 
            id = 1, 
            Caption = "Steven Buchanan", 
            HasChild = true, 
            Expanded = true, 
            vehivleIcon = "10", 
            Hint = "CEO", 
            visibilityIndicatorPath = "/images/Employees/10.png" 
        }); 

We have prepared sample for your convenience. Refer to the below link for the sample. 

Please let us know if you have any concerns. 
 
Regards, 
Muthukrishnan K 
 


Yordan
Replied On December 18, 2019 10:38 AM UTC

Thank You very much for this absolutely fast answer dear support, anyway this is not what is the case, since the example will not bind, but assign only once the values, and after - the data model will not affect anymore the controls which is the binding kind i am looking for.

for instance add a simple button inside the app:

< button @onclick="@btnClick" >test< / button >

and this event handler :

    public void btnClick()
    {
        foreach( var r in treeData )
        {
            r.visibilityIndicatorPath = "/ss.jpg";
        }
    }

the value of visibilityIndicatorPath  will be changed for every object inside treeData , but this will not affect the SRC of the images. They will remain with the 1st one.

Muthukrishnan Kandasamy [Syncfusion]
Replied On December 19, 2019 11:40 AM UTC

Hi Yordan, 
 
Thanks for the update. 
 
We have checked your reported query that “when upating TreeView data source on a button click tree template was not updated”. For this case, we need to call the TreeView refresh method to update the template. you can achieve this by referring the below code block. 
 
public void btnClick() 
    { 
        foreach( var r in DataSource ) 
        { 
            r.visibilityIndicatorPath = "/images/anne.png"; 
        } 
        treeData = DataSource; 
        tree.Refresh(); 
    } 
 
We have also prepared sample for your convenience. Refer to the below link for the sample. 
 
 
Please let us know if you have any concerns. 
 
Regards, 
Muthukrishnan K 


Yordan
Replied On December 19, 2019 02:40 PM UTC

Oh gods! THANK YOU dear support!

(sometime the most obvious thing is hard to be seen).

Muthukrishnan Kandasamy [Syncfusion]
Replied On December 20, 2019 04:40 AM UTC

Hi Yordan, 
 
 
We are glad to know that given solution works. Please let us know if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon