linkbutton click inside OrgChart

9 posts, 0 answers
  1. Ashton
    Ashton avatar
    5 posts
    Member since:
    Mar 2015

    Posted 25 Mar 2015 Link to this post

    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>
  2. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 27 Mar 2015 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ashton
    Ashton avatar
    5 posts
    Member since:
    Mar 2015

    Posted 30 Mar 2015 in reply to Aneliya Petkova Link to this post

    <%@ 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>

  5. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 01 Apr 2015 Link to this post

    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.

     
  6. Ashton
    Ashton avatar
    5 posts
    Member since:
    Mar 2015

    Posted 07 Apr 2015 in reply to Aneliya Petkova Link to this post

    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.

  7. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 07 Apr 2015 Link to this post

    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.

     
  8. Ashton
    Ashton avatar
    5 posts
    Member since:
    Mar 2015

    Posted 07 Apr 2015 in reply to Aneliya Petkova Link to this post

    great! it works but. I noticed that page refreshes which closes my opened popup which has the textboxes that gets updated on these events.
  9. Ashton
    Ashton avatar
    5 posts
    Member since:
    Mar 2015

    Posted 08 Apr 2015 Link to this post

    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.
  10. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 09 Apr 2015 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017