Accessing dynamically added template items in client side

[Senthil]

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

[Shinu]

Hi Senthil,

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

Shinu.

[Senthil]

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

[Paul]

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.

[Senthil]

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

[Atanas Korchev]

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.

[Senthil]

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

[Atanas Korchev]

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.

[Senthil]

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