Not able to fire the click event for a button inside the Item template in RADorgChart

Question

I am having a button inside the item template which is available in a RadOrgChart(telerik Control).

<asp:UpdatePanel ID="uplDataHierarchy" runat="server" UpdateMode="Always">
   <ContentTemplate>
      <div id="divOrgChart" runat="server" style="width: 100%; height: 480px; overflow-y: auto">
         <rad:RadOrgChart ID="radOrgChartHierarchy" runat="server" RenderMode="Lightweight" DisableDefaultImage="true" DataFieldID="ID" DataFieldParentID="PARENT_ID">
            <ItemTemplate>
               <rad:RadLabel runat="server" ID="RadLblName" Text='<%# Eval("NAME")%>' CssClass="fa-align-center" Font-Size="X-Small"></rad:RadLabel>
               <br />
               <rad:RadLabel runat="server" ID="RadLblPinCode" Text='<%# Eval("PINCODE")%>' CssClass="fa-align-center" Font-Size="X-Small"></rad:RadLabel>
               <br />
               <rad:RadLabel runat="server" ID="RadLblAdd" Text='<%# Eval("Address")%>' CssClass="fa-align-center" Font-Size="X-Small"></rad:RadLabel>
               <br />
               <asp:LinkButton ID="btnDetail" runat="server" CommandArgument='<%# Eval("ID") %>' Text="Get Detail" OnClick="btnDetail_Click" Font-Underline="false"></asp:LinkButton>
            </ItemTemplate>
         </rad:RadOrgChart>
         <br></br>
      </div>
   </ContentTemplate>
   <Triggers>
   </Triggers>
</asp:UpdatePanel>

When i am having this senerio without update panel Click Event for the BtnDetail is firing perfect.

But as i am having it inside the update panel i am not able to fire the click event for the button.

I tried it with

1. Link Button
2. Button
3. telerik button

Tried to add triggers in the aspx like:

<asp:AsyncPostBackTrigger ControlID="btnDetail" EventName="btnDetail_Click" />

But here it is throwing error : control not found then i tried it from code behind with NodeBound Event as:

Protected Sub radOrgChartDealHierarchy_NodeDataBound(sender As Object, e As Telerik.Web.UI.OrgChartNodeDataBoundEventArguments) Handles radOrgChartDealHierarchy.NodeDataBound
Dim lnkBtnDetail As LinkButton =    e.Node.GroupItems(0).FindControl("btnDetail")

Registering an event to the panel

 Dim aspT = New AsyncPostBackTrigger()
 aspT.ControlID = lnkBtnDetail.ToString()
 aspT.EventName = "Click"
 uplDataHierarchy.Triggers.Add(aspT)

Resgistering event via script manager

Dim scrPtMgr As ScriptManager = ScriptManager.GetCurrent(Me.Page)
scrPtMgr.RegisterAsyncPostBackControl(lnkBtnDetail)
End Sub

I tried to do a js postback as well even there I am not able to hit the server side click event.

Waiting for the Response.

Answer 1

After trying for 4 days at last I got the solution.

As the LinkButton is inside the ItemTemplate so Server side event is not getting triggered.

So what we can do here is as follows: First of all on NodeDataBound click event we need to add the client side event to the control:

Protected Sub radOrgChartDealHierarchy_NodeDataBound(sender As Object, e As Telerik.Web.UI.OrgChartNodeDataBoundEventArguments) Handles radOrgChartDealHierarchy.NodeDataBound
        Dim lnkBtnDetail As LinkButton = e.Node.GroupItems(0).FindControl("btnDetail")
        lnkBtnDetail.OnClientClick = "bindDetails(" & e.Node.ID.ToString() & ");"
End Sub

You need to add a HiddenField as well to keep the ID of the node

<asp:UpdatePanel ID="uplDataHierarchy" runat="server" UpdateMode="Always">
   <ContentTemplate>
      <div id="divOrgChart" runat="server" style="width: 100%; height: 480px; overflow-y: auto">
      <asp:HiddenField ID="HdnFldSelectedILD_ID" runat="server" Value="0" />
         <rad:RadOrgChart ID="radOrgChartHierarchy" runat="server" RenderMode="Lightweight" DisableDefaultImage="true" DataFieldID="ID" DataFieldParentID="PARENT_ID">
            <ItemTemplate>
               <rad:RadLabel runat="server" ID="RadLblName" Text='<%# Eval("NAME")%>' CssClass="fa-align-center" Font-Size="X-Small"></rad:RadLabel>
               <br />
               <rad:RadLabel runat="server" ID="RadLblPinCode" Text='<%# Eval("PINCODE")%>' CssClass="fa-align-center" Font-Size="X-Small"></rad:RadLabel>
               <br />
               <rad:RadLabel runat="server" ID="RadLblAdd" Text='<%# Eval("Address")%>' CssClass="fa-align-center" Font-Size="X-Small"></rad:RadLabel>
               <br />
               <asp:LinkButton ID="btnDetail" runat="server" CommandArgument='<%# Eval("ID") %>' Text="Get Detail" OnClick="btnDetail_Click" Font-Underline="false"></asp:LinkButton>
            </ItemTemplate>
         </rad:RadOrgChart>
         <br></br>
      </div>
   </ContentTemplate>
   <Triggers>
   </Triggers>
</asp:UpdatePanel>

then You have to add following JS function: Here you will get the Id of the node which you will set to the Hidden Field and will do the Post back with theForm.submit();

    function bindDetails(id) {
                document.getElementById("<%=HdnFldSelectedILD_ID.ClientID%>").value = id;
                theForm.submit();
}

Now in the page load check for the value of the Hidden Field if it is not 0 then do your processing as follows:

 If HdnFldSelectedILD_ID.Value = 0 Then

        Else
            //Your custom logic where you can access server side Controls as well
        LoadCustom(HdnFldSelectedILD_ID.Value)

        End If

And then in LoadCustom you can do your manipulation with the server-side controls as well like:

Private Sub LoadFields(nID As Decimal)
     RadLblName.Text="Test"
End Sub