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

Accessing dynamically added template items in client side

8 Answers 125 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Senthil
Top achievements
Rank 1
Senthil asked on 24 Nov 2008, 03:16 PM
Hi,

I am using a panel bar object and using dynamic template with few controls (drop-down list, text area). I need to access these controls inside the template in client-side. I am not sure how to do that. Can you point me in the right direction?

I have tried getting the control's (inside the temple) id as attribute in the item (during pre-render) and tried accessing it using the id in client-side. But it does not seem to be working perfectly. Control's rendering id is different from the id I am getting in the PreRender event of the page.

Thanks
Senthil

8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 26 Nov 2008, 10:10 AM
Hi Senthil,

Here is a help article which explains on accessing template controls on  the client side.
Accessing Controls Inside Templates

Shinu.


0
Senthil
Top achievements
Rank 1
answered on 26 Nov 2008, 01:57 PM
Hi Shinu,

Thanks for your help. But this doen't seem to be working for dynamic templates (defined in code-behind) and being used dynamically at runtime.

This might be working for the templates those are defined in the aspx page which will be applied to all the panel items. I created and used templates as defined in this article http://www.telerik.com/help/aspnet-ajax/panel_add-templates-runtime.html

I need the templates to be applied only to certain items (decided at run-time) not to all the panel items.

Senthil
0
Paul
Telerik team
answered on 27 Nov 2008, 01:07 PM
Hi Senthil,

Please find below a sample code snippet that shows the needed approach.

ASPX:
<form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
 
    <script type="text/javascript">  
    function pageLoad()  
    {  
        var label = $get('<%= ((Label)RadPanelBar1.FindItemByValue("child1").FindControl("ItemLabel1")).ClientID %>');  
        alert(label.innerText);  
    }  
    </script> 
 
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server">  
    </telerik:RadPanelBar> 
</form> 

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 _Default : System.Web.UI.Page  
{  
 
    protected void Page_Load(object sender, EventArgs e)  
    {  
        if (!Page.IsPostBack)  
        {  
            RadPanelItem root1 = new RadPanelItem();  
            root1.Text = "PanelItem1";  
            RadPanelBar1.Items.Add(root1);  
 
            RadPanelItem root2 = new RadPanelItem();  
            root2.Text = "PanelItem2";  
            RadPanelBar1.Items.Add(root2);  
 
            RadPanelItem child1 = new RadPanelItem();  
            child1.Value = "child1";  
            root1.Items.Add(child1);  
 
            RadPanelItem child2 = new RadPanelItem();  
            child2.Value = "child2";  
            root2.Items.Add(child2);  
        }  
 
        Label label1 = new Label();  
        label1.ID = "ItemLabel1";  
        label1.Text = "Text1";  
        label1.Font.Size = 15;  
        label1.Font.Bold = true;  
        RadPanelBar1.Items[0].Items[0].Controls.Add(label1);  
 
        Label label2 = new Label();  
        label2.ID = "ItemLabel2";  
        label2.Text = "Text2";  
        label2.Font.Size = 15;  
        label2.Font.Bold = true;  
        RadPanelBar1.Items[1].Items[0].Controls.Add(label2);  
    }  
}  
 


Best wishes,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Senthil
Top achievements
Rank 1
answered on 02 Dec 2008, 04:11 PM
Hi Paul,

Unfortunately this one also does not work for me. Here you are using a static child value (child1) to find the rad panel item.
 
var label = $get('<%= ((Label)RadPanelBar1.FindItemByValue("child1").FindControl("ItemLabel1")).ClientID %>;'); 

What I am trying to achieve is to get the panel item using FindByValue dynamically. In my case, I am trying to pass in the child item value to findItemByValue to get the reference to the particular RadPanelItem before getting the reference to an object inside the template.

Since I have one drop down list and one text area, I found a work around for this. I used some thing like below:

var currentChangeItem = $find('<%=changesPanels.ClientID %>').findItemByValue(childItemValue); 
currentChangeItem.get_element().all.tags('SELECT')[0]; 

Above one works for me. But still, it is not the cleaner way to do this. It would be better to get a permanent solution from Telerik.

Thanks
Senthil
0
Atanas Korchev
Telerik team
answered on 02 Dec 2008, 04:18 PM
Hi Senthil,

What according to you should the cleaner way look like? We are out of any further suggestions.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Senthil
Top achievements
Rank 1
answered on 02 Dec 2008, 04:31 PM
Hi Albert,

Thanks for your quick reply.

Well, in the Pre-Render event of the page, I register the client id's of the needed controls to pass to the JScript function call to get the reference to the object as below:

imgRemove.Attributes.Add("OnClick""removeChange('" + item.Attributes["changeGUID"] + "','" + item.FindControl("ddlStatus").ClientID + "','" + item.FindControl("txtComments").ClientID + "');"); 

It seems that, for some of the items, the ClientID getting from the code above is different from the actual rendering ClientID of the control.

This is what I am getting,

ctl00_MainContent_changesPanels_i3_i4_ddlStatus - ClientID from the Code-Behind (above code)
ctl00_MainContent_changesPanels_i2_i1_ddlStatus - Actual rendered ClientID from the page's source

Again, it is not happening for all the items. It happens randomly and only for few of them. I have 30 items in the panel bar using the template and couple of them are having the above problem.

Thanks
Senthil Subramanian


0
Accepted
Atanas Korchev
Telerik team
answered on 03 Dec 2008, 07:58 AM
Hi Senthil,

The ID of the panel items should be generated in a way which corresponds to their index - i1, i2 etc. Do you insert or remove items after getting the clientid? This seems to be the case.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Senthil
Top achievements
Rank 1
answered on 03 Dec 2008, 01:32 PM
Hi Albert,

I am not adding new items but sorting the already existing items. I think this also has an effect on the ClientIDs of the controls. I moved the code for getting the ClientIDs to the end of the Pre_Render function and it seems to be working fine. I think this fixed it.

Thanks for all your suggestions. I am all set for now.

Thanks
Senthil
Tags
PanelBar
Asked by
Senthil
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Senthil
Top achievements
Rank 1
Paul
Telerik team
Atanas Korchev
Telerik team
Share this question
or