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

[Yordan]

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]

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. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Treetemplate-759883799.zip 

Please let us know if you have any concerns. 

 

Regards, 

Muthukrishnan K 

 

[Yordan]

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]

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. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/TemplateUpdate1795055498.zip 

 

 

Please let us know if you have any concerns. 

 

Regards, 

Muthukrishnan K 

[Yordan]

Oh gods! THANK YOU dear support!

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

[Muthukrishnan Kandasamy]

Hi Yordan, 

 

 

We are glad to know that given solution works. Please let us know if you need any further assistance. 

 

Regards, 

Muthukrishnan K