Finding asp.net controls on RadPageView with Javascript

[Blake]

I have a question regarding how to find and get the value of asp.net controls that are located within a RadPageView using Javascript.  I have a form where I use the RadTabStrip in conjunction with the RadMultiPage.  Each tab and RadPageView contain a User control which contains several asp.net label controls that display various data. 

I need to access the values of several of these fields using Javascript.  To do so, I had a javascript routine that got a reference to the PageView on the currently selected tab as follows:

// This function returns a reference to the pageview of the currenlty selected tab.
function GetCurrPageView() {
    var rtabCarrLoc = $find("<%= rtabCarrierInfo.ClientID %>");
    var rselectedtab = rtabCarrLoc.get_selectedTab();
    if (rselectedtab) {
        var rpageview = rselectedtab.get_pageView();
        return rpageview;
    }
}

The plan was then to use that reference to find, for example, a label control and extract its value.  This proved difficult since the RadPageView does not seem to provide any methods to find controls contained within it.

I opened a support ticket with Telerik to solve this problem.  They provided a solution to extract the contents of a label by using a unique CSS class by which I could find the label and get the contents.  See the following for an example:

// Get and set the location name.
var rpageview = GetCurrPageView();
if (rpageview) {
    var lblLocName = $telerik.$(".cdhdr-carrlocationheader", rpageview._element).html();
    if (lblLocName) {
        var DULocName = document.getElementById("<%= lblDataUpdLocName.ClientID %>");
        DULocName.innerText = lblLocName;
    }
}

The ".cdhdr-carrlocationheader" is the custom css class assigned to the label control that I extracted the value for.  This works althought they never did explain exactly how.  I have no idea what the "$telerik.$" function is, the parameters it offers, or how it works.

Anyway, my problem now is that I would also like to be able to find some "HiddenFields" on the pageview and extract their values.  The above solution will not work for them since you cannot assign a CSS class to a Hiddenfield. 

Does anyone know how I could do this?  Any help would be greatly appreciated.

[msigman]

Blake,

"$telerik.$" is a reference to the jQuery function included with the Telerik tools.  You can check here for some reading material about jQuery.
To get a reference to a hidden field, I would set the ClientIDMode="Static" and ID="hdnField" (you can change this as desired).  This causes the ID to be emitted to the page exactly as you've defined it in the markup, so we can find it again using jQuery like this:

var hdnFieldName = $telerik.$("#hdnField").html();

This is assuming you have .NET 4.0.  If you are on a previous version, then you can add an attribute "class" to the <asp:HiddenField> element directly and give it a class name.  It will be emitted as-is to the page.  Then again you can use jQuery to find it:

var hdnFieldName = $telerik.$(".hdnField").html();

[Blake]

Thanks for the quick reply.  As is your suggestion is not working for me but I neglected to mention one thing.  The PageViews all use the same user control and therefore, the HiddenFields all have the same name.  I would think that would be a problem if we set the ClientModeID to static.

Also, your suggestion does not reference the current PageView.  How can we then get the HiddenControl that is within the specific current PageView?

Thanks.

Blake

BTW, I am working in .Net 4.0.

[msigman]

Hi Blake,

I think the original solution provided by Telerik would work still, just add the "class" attribute to your <asp:HiddenField> (don't try to use CssClass).  Add the class to each hidden field, then use this JavaScript to access it:

var rpageview = GetCurrPageView();

if (rpageview) {

    var hdnFieldName = $telerik.$(".hdnField", rpageview._element).val();
}

[Blake]

msigman,

Thanks again for the response.  At the risk of sounding like an idiot, could you please tell me how to add an attribute to a Hiddenfield?  I tried simply doing this:

<

 

 

asp:HiddenField ID="hfLocationID" runat="server" Class="hflocid-class" />

 

However, when I tried to run the page I got a Parser Error stating that 'System.Web.UI.WebControls.HiddenField' does not have a public property named 'Class'.

Thanks.

Blake

[msigman]

Blake,

No problem, your question is a good one.  You are correct -- the parser gives the error mentioned with using an <asp:HiddenField>.  Instead, let's use a standard div and apply the runat="server" attribute to it, as such:

<div class="hdnField" runat="server" id="divHiddenField"></div>

Then, you just assign your value to the field as usual.  In this example I'm doing it from the CodeBehind file:

divHiddenField.InnerText = "Test data";

Finally, you can now access it using the jquery I'd provided earlier:

var rpageview = GetCurrPageView();
if (rpageview) {
    var hdnFieldName = $telerik.$(".hdnField", rpageview._element).val();
}

Hopefully we've got it nailed down this time.

[Blake]

msigman,

Thanks again for your help on this.  I did not try your suggestion as I received a response from Telerik from a support ticket I posted.  Their suggestion worked like a charm.  Here it is for anyone interested:

var hfnote1 = $telerik.$("[id$='hfNotes1']", rcurrpage._element).attr("Value");

Thanks again.

Blake

[Antonio]

I've a problem trying to update values in that way with jquery: I've tried:

 

var multiPage = $find("<%= RadMultiPage1.ClientID %>");

var pageView = multiPage.findPageViewByID("RadPageViewDatosRepuesto");

var controlActual5 = $telerik.$("[id$='CantidadMaxima']", pageView._element).attr("Value") * 100;

 $telerik.$(

"[id$='CantidadMaxima']", pageView._element).attr("Value", controlActual5);

This the case when I want to update a value of RadNumericBox "CantidadMaxima", when a value has changed in a RadComboBox. The value of var controlActual5 is OK, so accessing the value of "CantidadMaxima" is Ok too.
The problem is that I can't assign the new value for "CantidadMaxima", what am I doing wrong?
Must I "refresh" the value of the RadNumericControl? How can I do this?
Thanks in advance. 

 

 

[msigman]

Antonio,

The problem is that jQuery will find the element in the DOM, but what you want is the ASP.NET reference.  Behind the scenes the Telerik controls hide the "real" inputs (that you're finding in the DOM) and replace them with special ones that can be styled.  You need to use the $find() function to get a reference to the controlActual5  ASP.NET control.