This is a migrated thread and some comments may be shown as answers.

linkbutton click inside OrgChart

8 Answers 156 Views
OrgChart
This is a migrated thread and some comments may be shown as answers.
Ashton
Top achievements
Rank 1
Ashton asked on 25 Mar 2015, 05:16 AM
i have this link button inside orgChart, on it click event i want fetch record from db to populate couple of text fields on the very same page.
It works fine but as soon as i add <ajax settings>, UI doesnt update. Please help.

<telerik:RadOrgChart runat="server" ID="RadOrgChart1" CssClass="Chart" DataTextField="PositionTitle"
        DataFieldID="PositionId" DataFieldParentID="ReportToPositionId" Skin="Silk" EnableCollapsing="true">
        <ItemTemplate>
                <div style="text-align:center; text-transform:uppercase; line-height:30px;">
                <asp:LinkButton ID="LinkButton1" CausesValidation="false" data-positionid='<%# Eval("PositionId") %>'  runat="server" OnClick="Position_Click" OnClientClick="DisplayAddPositionPopup();" ><%# DataBinder.Eval(Container, "Text") %></asp:LinkButton>
                    <asp:Panel ID="Panel1" Visible='<%#Convert.ToString( Eval("FunctionName")).Length>0%>' runat="server">
                    <div style="position:absolute; top:55px; width: 230px; margin-top:30px; height:20px; line-height:20px; border:1px solid #767676"><%#Eval("FunctionName") %></div>
                    </asp:Panel>
                
                </div>
            </ItemTemplate>
        <RenderedFields>
            <ItemFields>
                <telerik:OrgChartRenderedField DataField="FunctionName" Label="" />
            </ItemFields>
        </RenderedFields>
    </telerik:RadOrgChart>

8 Answers, 1 is accepted

Sort by
0
Aneliya Petkova
Telerik team
answered on 27 Mar 2015, 11:38 AM
Hi Ashton,

Could you please send us a sample runnable project showing your exact implementation. Thus, we could test it locally and determine what might be causing the issue that you are experiencing.

P.S: As this is a forum post you are not allowed to attach .zip files. As an alternative please open new support ticket or use one of the sites for free online storage.

Regards,
Aneliya Petkova
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Ashton
Top achievements
Rank 1
answered on 30 Mar 2015, 11:32 AM
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TestOrgChart.Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Telerik test</title>
    <link href="Styles/bootstrap/less/bootstrap.less" type="text/css" rel="Stylesheet" />
    <script src="/js/jquery-1.7.2.js" type="text/javascript"></script>

    


</head>
<body>


    <form id="form1" runat="server">
     <telerik:RadScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="120">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        </Scripts>
    </telerik:RadScriptManager>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>

    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
            
            <telerik:AjaxSetting AjaxControlID="RadOrgChart1">
                <UpdatedControls>
                     <telerik:AjaxUpdatedControl ControlID="pnlEdit"  UpdatePanelRenderMode="Inline" />
                </UpdatedControls>
            </telerik:AjaxSetting>


            <telerik:AjaxSetting AjaxControlID="btnSave">
                <UpdatedControls>
                     <telerik:AjaxUpdatedControl ControlID="txtName" LoadingPanelID="rlpLoading" UpdatePanelRenderMode="Inline" />
                </UpdatedControls>
            </telerik:AjaxSetting>

            
     </AjaxSettings>
</telerik:RadAjaxManagerProxy>


    <div>
    <telerik:RadOrgChart runat="server" ID="RadOrgChart1" CssClass="Chart" DataTextField="designation"
        DataFieldID="userid" DataFieldParentID="reportToUserid" Skin="Silk" EnableCollapsing="true">
        <ItemTemplate>
                <div style="text-align:center; text-transform:uppercase; line-height:30px;">
                <asp:LinkButton ID="LinkButton1" CausesValidation="false" data-positionid='<%# Eval("userid") %>'  runat="server" OnClick="Position_Click" OnClientClick="DisplayAddPositionPopup();" ><%# Eval("designation") %></asp:LinkButton>
                    <asp:Panel ID="Panel1" runat="server">
                    <div><%#Eval("name")%></div>
                    </asp:Panel>
                
                </div>
            </ItemTemplate>
        <RenderedFields>
            <ItemFields>
                <telerik:OrgChartRenderedField DataField="name" Label="" />
            </ItemFields>
        </RenderedFields>
    </telerik:RadOrgChart>


    <%--
    
    We need to fill this panel below using ajax
    
    --%>
   <h2>Edit Record</h2>
    <div id="EditPosition">
        <asp:Panel ID="pnlEdit" runat="server">
        <telerik:RadAjaxLoadingPanel runat="server" ID="rlpLoading" />
            <asp:TextBox ID="txtId" runat="server" /><br />
            <asp:TextBox ID="txtName" runat="server" /><br />
            <asp:TextBox ID="txtReportTo" runat="server" /><br />
            <asp:TextBox ID="txtDesignation" runat="server" /><br />
            <asp:Button ID="btnSave" Text="Save" runat="server" onclick="btnSave_Click" />
        </asp:Panel>

    </div>



    </div>
    </form>
</body>
</html>

0
Aneliya Petkova
Telerik team
answered on 01 Apr 2015, 03:48 PM
Hi Ashton,

I tested with the code you provided, but I was not able to observe any issues - all events are fired as expected. Attached you may find the project I made for testing. Please try it at your side and modify it in order to show me what I am missing.

Regards,
Aneliya Petkova
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Ashton
Top achievements
Rank 1
answered on 07 Apr 2015, 05:50 AM

Correct, events are fired, but its not updating the UI, for instance if you add the code below.

protected void LinkButton1_Click(object sender, EventArgs e)
        {
            txtId.Text = "132456";
        }

then it doesnt update the UI. You'll see the textbox is still empty. Thats actually what the problem is.

0
Aneliya Petkova
Telerik team
answered on 07 Apr 2015, 10:17 AM
Hi Ashton,

The text is not updated properly in your asp:TextBoxes because you must do the partial postback of the Panel with the TextBoxes, when you click on the links in the RadOrgChart. If you change the following lines of code:
<telerik:AjaxSetting AjaxControlID="RadOrgChart1">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="pnlEdit" UpdatePanelRenderMode="Inline" />
    </UpdatedControls>
</telerik:AjaxSetting>

with:
<telerik:AjaxSetting AjaxControlID="LinkButton1">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="pnlEdit" UpdatePanelRenderMode="Inline" />
    </UpdatedControls>
</telerik:AjaxSetting>

your page should function as expected.

Regards,
Aneliya Petkova
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Ashton
Top achievements
Rank 1
answered on 07 Apr 2015, 11:47 AM
great! it works but. I noticed that page refreshes which closes my opened popup which has the textboxes that gets updated on these events.
0
Ashton
Top achievements
Rank 1
answered on 09 Apr 2015, 04:16 AM
It seems its not completely ajaxified. Please let me know how i can stop this postback. Also the UI should get updated on clicking on linkbutton/button, which is happening right now on postback.
0
Aneliya Petkova
Telerik team
answered on 09 Apr 2015, 06:26 AM
Hi Ashton,

You simply need to place the controls that you want AJAX-enabled into a Telerik RadAjaxPanel. Please check our online demo showing how a control could be ajaxified:
You can also use a standard asp:UpdatePanel.

Regards,
Aneliya Petkova
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
OrgChart
Asked by
Ashton
Top achievements
Rank 1
Answers by
Aneliya Petkova
Telerik team
Ashton
Top achievements
Rank 1
Share this question
or