Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Items created programatically do not trigger ItemClick Event

6 Answers 225 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
chrisarauzv
Top achievements
Rank 1
chrisarauzv asked on 12 Nov 2008, 05:30 PM
Hi Telerik,

When I create the items programatically, and the Panelbar have a OnItemClick event attached, the event is not fired instead the page is doing a PostBack. But when the items are set declarative the event is fired correctly.

Here is the code for the example:
<%@ Page Language="C#" AutoEventWireup="false" CodeFile="ProgramItem.aspx.cs" Inherits="app_Default" %> 
<%@ Register TagPrefix="radspl" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<!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>Página sin título</title> 
</head> 
<body> 
 <form id="form1" runat="server"> 
   <asps:ScriptManager ID="SC1" runat="server"></asps:ScriptManager> 
   <radspl:RadAjaxManager ID="RadAMang" runat="server" DefaultLoadingPanelID="panel1"> 
    <AjaxSettings>     
     <radspl:AjaxSetting AjaxControlID="pRath" > 
      <UpdatedControls> 
         <radspl:AjaxUpdatedControl ControlID="ajaxpanel1" /> 
      </UpdatedControls> 
     </radspl:AjaxSetting> 
    </AjaxSettings> 
   </radspl:RadAjaxManager> 
   <radspl:RadAjaxLoadingPanel ID="panel1" runat="server" Transparency="30" BackColor="#E0E0E0" > 
     <asp:Image ID="image2" runat="server" AlternateText="Actualizando Datos..." BorderWidth="0px" ImageUrl="~/RadControls/Ajax/Skins/Default/loading.gif" />      
   </radspl:RadAjaxLoadingPanel>     
                 <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"> 
                  <tr><td height="100%" width="25%"> 
                    <radspl:RadPanelBar runat="server" ID="pRath" Height="100%" Width="100%" ExpandMode="FullExpandedItem" EnableViewState="false" PersistStateInCookie="false" OnItemClick="pRath_ItemClick" > 
                    </radspl:RadPanelBar> 
                  </td> 
                  <td height="100%" width="50%" valign="top" style="text-align:center;"> 
                    <radspl:RadAjaxPanel ID="ajaxpanel1" runat="server" > 
                    <div runat="server" id="DatosRuta" style="width:90%; height:90%; vertical-align:top; margin-left:auto; margin-right:auto;"> 
                    <input type="hidden" id="IDRuta" name="IDRuta" runat="server" value="000" /> 
                    <table cellpadding="0" cellspacing="0" width="100%" border="1"> 
                    <tr> 
                     <td width="30%" align="right" >Nombre:</td> 
                     <td width="70%" align="left" style="padding-left:5px;"> 
                        <input runat="server" id="TextName" type="text" value=""/></td></tr> 
                    <tr> 
                      <td align="right">Color</td> 
                      <td align="left" style="padding-left:5px;"> 
                        <radspl:RadColorPicker runat="server" ID="IDColor" ShowIcon="true" ShowEmptyColor="false" SelectedColor="white" > 
                        </radspl:RadColorPicker> 
                        </td></tr> 
                    </table></div> 
                    </radspl:RadAjaxPanel> 
                  </td> 
                  <td height="100%" width="25%" valign="top"> 
                     <input type="button" id="btnNew" class="formBtnText" value=" Salvar " onclick="RouteSave()" /> 
                  </td> 
                  </tr>                  
                  </table> 
    </form> 
</body> 
</html> 
 
 
    
The Code behind 

public partial class app_Default : System.Web.UI.Page 
{ 
   #region Web Form Designer generated code 
   override protected void OnInit(EventArgs e) 
   { 
      InitializeComponent(); 
      base.OnInit(e); 
   } 
 
   private void InitializeComponent() 
   { 
      this.Load += new System.EventHandler(this.Page_Load); 
      this.pRath.ItemClick += new RadPanelBarEventHandler(pRath_ItemClick); 
      this.pRath.ItemCreated += new RadPanelBarEventHandler(pRath_ItemCreated);  
   } 
   #endregion 
 
    protected void Page_Load(object sender, EventArgs e) 
    { 
      if (!Page.IsPostBack) 
      { 
       TextName.Value = "BEFORE POSTBACK"; 
       LoadPanels();   
      } 
      else 
      { TextName.Value = "AFTER POSTBACK"; } 
    } 
 
   public void pRath_ItemClick(object sender, RadPanelBarEventArgs e) 
   { 
      TextName.Value = "ON ITEMCLICK"; 
   } 
 
   private void LoadPanels() 
   { 
      RadPanelItem pItem = new RadPanelItem("Root 1");       
      RadPanelItem pItem2 = new RadPanelItem("Panel Item 1"); 
      pItem2.NavigateUrl = string.Empty; 
      pItem.Items.Add(pItem2); 
      pItem.NavigateUrl=""; 
       
      pRath.Items.Clear(); 
      pRath.Items.Add(pItem); 
      pRath.Items[0].Expanded = true;      
   } 
 
 
   void pRath_ItemCreated(object sender, RadPanelBarEventArgs e) 
   { 
      if (e.Item.Level > 0) 
         e.Item.NavigateUrl = String.Empty; 
   }       
} 
  
The same problem occurs If I create the item from a dataset:
      links = (DataView)dsRST.Select(DataSourceSelectArguments.Empty);
      Panel.Items.Clear();
      Panel.DataTextField = "Name";
      Panel.DataFieldID = "ID";
      Panel.DataFieldParentID = "Parent";
      Panel.DataValueField = "Value";      
      Panel.DataSource = links;
      Panel.DataBind();
      Panel.Items[0].Expanded = true;

Thank you for your help.
 

6 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 13 Nov 2008, 02:56 PM
AJAXEnabledWebSite1.zip
Hello chrisarauzv,

I coudldn't reproduce the problem using the specified code. Clicking the panelbar was causing ajax on my end. Please my sure there are no javascript errors in your page as this could prevent the ajax requests. Find attached my sample page.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
chrisarauzv
Top achievements
Rank 1
answered on 14 Nov 2008, 01:54 AM
Hi Albert, 

Thank you for your response, but the problem is not with Ajax. As you can see I am trying to retrieve the data of the selected panelbaritem with the onclick event, however the page is doing a postback on the entire page, though just the ajaxfixed controls are updated. You can see it in the text what is put into the TextName textbox. If you create the items of the panelbar declarative(within aspx page) the Textbox is updated with "ON ITEMCLICK", but if you create the items programatically the Textbox is updated with "AFTER POSTBACK";

My goal is to create the items programatically and just the event onclick run to retrieve the data.

Thank you.

Christopher
0
Accepted
Atanas Korchev
Telerik team
answered on 14 Nov 2008, 08:30 AM
Hi chrisarauzv,

You should either enable the viewstate of your panelbar or create the items always:

    protected void Page_Load(object sender, EventArgs e)
    {
      if (!Page.IsPostBack)
      {
       TextName.Value = "BEFORE POSTBACK";
      }
      else
      { TextName.Value = "AFTER POSTBACK"; }
     
      LoadPanels();
    }

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
chrisarauzv
Top achievements
Rank 1
answered on 14 Nov 2008, 03:52 PM
Hi Albert, 

As I say in the previous reply, Ajax Is working great, I don't have any problems with it.

Here is another example, in this case I put 2 panelbar in panelbar1(top) I create the items programatically, in the panelnar2(bottom) I create the Items declarative, in both panels are set onclick event, any of them point to their respective code behind function.

If you click in the panelbar1 the panel bar trigger a page postback, Ajax work just as expected because only the text box are updated but with the code in the page load.

But, if you click in the panelbar2 the panel bar trigger the onclick event, again Ajax work as expected because only the text box are updated.

My point is, Why if the items are created manually the onclick event if triggered, but if you create the items programatically the event is not triggered ?

I want to be able to create the items programatically and use the onclick event to populate some texts when i click one of them.

 ASPX:
<%@ Page Language="C#" AutoEventWireup="false" CodeFile="ProgramItem.aspx.cs" Inherits="app_Default" %> 
<%@ Register TagPrefix="radspl" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<!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>Página sin título</title> 
</head> 
<body> 
 <form id="form1" runat="server"> 
   <asps:ScriptManager ID="SC1" runat="server"></asps:ScriptManager> 
   <radspl:RadAjaxManager ID="RadAMang" runat="server" DefaultLoadingPanelID="panel1"> 
    <AjaxSettings>     
     <radspl:AjaxSetting AjaxControlID="pRath" > 
      <UpdatedControls> 
         <radspl:AjaxUpdatedControl ControlID="ajaxpanel1" /> 
      </UpdatedControls> 
     </radspl:AjaxSetting> 
     <radspl:AjaxSetting AjaxControlID="pRath2" > 
      <UpdatedControls> 
         <radspl:AjaxUpdatedControl ControlID="ajaxpanel2" /> 
      </UpdatedControls> 
     </radspl:AjaxSetting> 
    </AjaxSettings> 
   </radspl:RadAjaxManager> 
   <radspl:RadAjaxLoadingPanel ID="panel1" runat="server" Transparency="30" BackColor="#E0E0E0" > 
     <asp:Image ID="image2" runat="server" AlternateText="Actualizando Datos..." BorderWidth="0px" ImageUrl="~/RadControls/Ajax/Skins/Default/loading.gif" />      
   </radspl:RadAjaxLoadingPanel>     
                 <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"> 
                  <tr><td height="100%" width="25%"> 
                    <radspl:RadPanelBar runat="server" ID="pRath" Height="100%" Width="100%" ExpandMode="FullExpandedItem" EnableViewState="false" PersistStateInCookie="false" OnItemClick="pRath_ItemClick" > 
                    </radspl:RadPanelBar>                     
                  </td> 
                  <td height="100%" width="50%" valign="top" style="text-align:center;"> 
                    <radspl:RadAjaxPanel ID="ajaxpanel1" runat="server" > 
                    <div runat="server" id="DatosRuta" style="width:90%; height:90%; vertical-align:top; margin-left:auto; margin-right:auto;">                     
                    <table cellpadding="0" cellspacing="0" width="100%" border="1"> 
                    <tr> 
                     <td width="30%" align="right" >Nombre:</td> 
                     <td width="70%" align="left" style="padding-left:5px;"> 
                        <input runat="server" id="TextName" type="text" value=""/></td></tr> 
                    <tr> 
                      <td align="right">Color</td> 
                      <td align="left" style="padding-left:5px;"> 
                        <radspl:RadColorPicker runat="server" ID="IDColor" ShowIcon="true" ShowEmptyColor="false" SelectedColor="white" > 
                        </radspl:RadColorPicker> 
                        </td></tr> 
                    </table></div> 
                    </radspl:RadAjaxPanel> 
                  </td> 
                  <td height="100%" width="25%" valign="top"> 
                     <input type="button" id="btnNew" class="formBtnText" value=" Salvar " onclick="RouteSave()" /> 
                  </td> 
                  </tr>                  
                  </table> 
 
                 <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"> 
                  <tr><td height="100%" width="25%"> 
                  <radspl:RadPanelBar runat="server" ID="pRath2" Height="100%" Width="100%" ExpandMode="FullExpandedItem" EnableViewState="false" PersistStateInCookie="false" OnItemClick="pRath2_ItemClick" > 
                    <Items > 
                    <radspl:RadPanelItem Text="Declarative" Expanded="true"> 
                        <Items> 
                        <radspl:RadPanelItem Text="Panel 1">                            
                        </radspl:RadPanelItem> 
                        <radspl:RadPanelItem Text="Panel 2"> 
                        </radspl:RadPanelItem> 
                        </Items> 
                    </radspl:RadPanelItem> 
                    </Items> 
                    </radspl:RadPanelBar> 
                  </td> 
                  <td height="100%" width="50%" valign="top" style="text-align:center;"> 
                    <radspl:RadAjaxPanel ID="ajaxpanel2" runat="server" > 
                    <div runat="server" id="Div1" style="width:90%; height:90%; vertical-align:top; margin-left:auto; margin-right:auto;"> 
                    <input type="hidden" id="Hidden1" name="IDRuta" runat="server" value="000" /> 
                    <table cellpadding="0" cellspacing="0" width="100%" border="1"> 
                    <tr> 
                     <td width="30%" align="right" >Nombre:</td> 
                     <td width="70%" align="left" style="padding-left:5px;"> 
                        <input runat="server" id="TextName2" type="text" value=""/></td></tr> 
                    <tr> 
                      <td align="right">Color</td> 
                      <td align="left" style="padding-left:5px;"> 
                        <radspl:RadColorPicker runat="server" ID="RadColorPicker1" ShowIcon="true" ShowEmptyColor="false" SelectedColor="white" > 
                        </radspl:RadColorPicker> 
                        </td></tr> 
                    </table></div> 
                    </radspl:RadAjaxPanel> 
                  </td> 
                  <td height="100%" width="25%" valign="top"> 
                     <input type="button" id="Button1" class="formBtnText" value=" Salvar " onclick="RouteSave()" /> 
                  </td> 
                  </tr>                  
                  </table> 
 
    </form> 
</body> 
</html> 
 
 

Here is code behind:
using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 
using Telerik.Web.UI; 
 
public partial class app_Default : System.Web.UI.Page 
{ 
   #region Web Form Designer generated code 
   override protected void OnInit(EventArgs e) 
   { 
      InitializeComponent(); 
      base.OnInit(e); 
   } 
 
   private void InitializeComponent() 
   { 
      this.Load += new System.EventHandler(this.Page_Load); 
      this.pRath.ItemClick += new RadPanelBarEventHandler(pRath_ItemClick); 
      this.pRath.ItemCreated += new RadPanelBarEventHandler(pRath_ItemCreated); 
      this.pRath2.ItemClick += new RadPanelBarEventHandler(pRath2_ItemClick); 
   } 
   #endregion 
 
    protected void Page_Load(object sender, EventArgs e) 
    { 
      if (!Page.IsPostBack) 
      { 
       TextName.Value = "BEFORE POSTBACK"; 
       TextName2.Value = "BEFORE POSTBACK"; 
       LoadPanels();   
      } 
      else 
      { TextName.Value = "AFTER POSTBACK"; } 
    } 
 
   public void pRath_ItemClick(object sender, RadPanelBarEventArgs e) 
   { 
      TextName.Value = "ON ITEMCLICK"; 
   } 
 
   public void pRath2_ItemClick(object sender, RadPanelBarEventArgs e) 
   { 
      TextName2.Value = "ON ITEMCLICK"; 
   } 
 
   private void LoadPanels() 
   { 
      RadPanelItem pItem = new RadPanelItem("Programatically");       
      RadPanelItem pItem2 = new RadPanelItem("Panel Item 1"); 
      pItem2.NavigateUrl = string.Empty; 
      pItem.Items.Add(pItem2); 
      pItem.NavigateUrl=""; 
       
      pRath.Items.Clear(); 
      pRath.Items.Add(pItem); 
      pRath.Items[0].Expanded = true;      
   } 
 
   void pRath_ItemCreated(object sender, RadPanelBarEventArgs e) 
   { 
      if (e.Item.Level > 0) 
         e.Item.NavigateUrl = String.Empty; 
   }       
} 
 
 


0
Atanas Korchev
Telerik team
answered on 14 Nov 2008, 03:53 PM
Hi chrisarauzv,

Did you try my suggestion? What happened when you populated always your panelbar?

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
chrisarauzv
Top achievements
Rank 1
answered on 14 Nov 2008, 05:42 PM
Hi Albert,

Thank you very much, just put EnableviewState = "true" and work as I wanted. My mistake was not see your point, Sorry.

Christopher

Tags
PanelBar
Asked by
chrisarauzv
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
chrisarauzv
Top achievements
Rank 1
Share this question
or