Modify control inside Radwindow using javascript

[Prava kafle]

Hi,

I have a Asp.Net Label control  and few Button controls ( "OK", Cancel" and "Submit" Buttons) inside rad window.
I want to modify the Label's text and toggle the visibility of these buttons using javascript. I tried following code


function showConfirmationBox(){
     var Radwindow1 = $find("<%=Radwindow1.ClientID %>");
     var confirmWinContentTemplate =  Radwindow1.get_contentFrame().contentWindow;
     var label1 = _confirmWin.getElementById("Label1");
     var submitBtn = _confirmWin.getElementById("SubmitBtn1");
     label1.innerHTML ="Error in code!";
     submitBtn.style.display = "none";
     submitBtn.style.visibility = "hidden";

 
     ......
      ....
    Radwindow1.show();
}
 

Any idea?

Thanks,
Prava

[sitefinitysteve]

It'd be SUPER easy with jQuery if the content in the window was inside the ContentTemplate instead of an iFrame.  Is there a reason why it needs to be in a separate page?

There isn't many details on your post, but perhaps it's that the content in the iframe isn't loaded yet?  Perhaps try and put the code in the RadWindow client function "OnClientPageLoad "

function OnClientPageLoad(sender, args){

}

Documentation says that it fires when the content in the window finishes loading.

(sidenote)
...here's an article on using jQuery to find stuff LINK

[Prava kafle]

Hi Steve,

 I have a content template inside Rad Window and the controls are inside it. I am dragging records from grid and dropping to rad scheduler. I am using web service and java script functions in external java script files to handle these drag and drop event.

When a record is dropped to scheduler, it calls a java script fxn to process recently dropped record. I need to show Radwindow by updating the text and changing the button visibility using  javascript. Is there an easy way to get these controls from external javasript files. I passed rad window as an argument to javascript fxn and am  trying to get childnode of it using the id.
 

function _showConfirmationMessageBox( _RadWindow1){
   var content = _RadWindow1.get_element();
        var msgBoxChildNodes = content.childNodes;
}

Thanks,
Prava

<telerik:RadWindow ID="ConfirmWin"  runat="server" DestroyOnClose="true"  AutoSize="true"  Behaviors="Close, Move"   OnClientClose="RadWindowClosed"   VisibleStatusbar="false"  >
                    <ContentTemplate>
                           <div id="cLblDiv"   style=" margin-top:20px;  text-align:center; white-space:normal;  min-height:120px; min-width:450px;">
                               <div id="lbMsg" style="text-align:left; word-spacing:normal; white-space:normal; word-wrap:break-word;" >
                                  <asp:Label ID="Label1" runat="server"  Text="Insert Message Here"  style="position:relative; margin-left:40px; " />
                                  <p  >  <asp:Label ID="Label2" runat="server"  Text=" "  style="position:absolute;  margin-top:20px;  margin-left:40px;" />
                                  </p>
                               </div>
                           </div>
                           <div id="CBtnDiv" runat="server" wrap="true"  style=" position:relative; margin-top:5px; text-align:center; min-height:30px; min-width:450px; " title="M4 Workforce" >
                                <telerik:RadButton ID="CYesBtn" runat="server" Text="Yes" style="position:relative;  margin-right:5px;"  OnClick="CYesBtn_Click" OnClientClicked="CloseCurrentWindow" Width="70px"   AutoPostBack="true"   >
                                </telerik:RadButton>
                                <telerik:RadButton ID="CNoBtn" runat="server" text="No"   style=" position:relative; margin-right:5px;"  OnClientClicked="CloseCurrentWindow" AutoPostBack="true"  Width="70px"  OnClick="CNoBtn_Click"    >
                                </telerik:RadButton>
                            </div>
                     </ContentTemplate>
                 </telerik:RadWindow>

[sitefinitysteve]

Ok well since they're in the content template you should be able to see them perfectly fine with no hassle

var yesButtonID = $telerik.$("[id$='CYesBtn']").attr("id"); //Gets the ID, this is external JS safe...you can use the = .ClientID asp method though
var yesButton = $find(yesButtonID); //Find the telerik clientside object

So in this case the jQuery syntax above finds the "CYesBtn" with an "EndsWith" clause (the $= )....so in your external JS jQuery will parse the page to get the clientside ID of that guy

Or if you're using .Net4 put ClientIDMode="Static" on the RadButton then you just need to do this as the clientid will never get mangled by asp

var yesButtonjQuery = $telerik.$("#CYesBtn");
var yesButtonTelerik = $find("CYesBtn");

So now if we have those objects you can pick which one to use...but to hide the button you could easily now do

yesButtonjQuery.hide();

...or show it

yesButtonjQuery.show();

...and if you're setting Label1 in just javascript this might be easier (asp control is heavier than a span tag and if you don't need to change any values on the server side, then this is way easier)

<span id="errorLabel" style="position:relative; margin-left:40px; "></span>

With the javascript being

$telerik.$("#errorLabel").text("Error in code!");

[Prava kafle]

Hi Steve,

Thank you very much for the code, its exactly what I was looking for. I have one more question, if I am to use Asp.NET Label control instead of span  following code doesnot work. How can I find and set text of Label control using  external javascript files.

//This code does not work
 var label1ClientID = $telerik.$("[id$='Label1']").attr("id");
  var label1 = $find( label1ClientID);   ////This returns null
 label1.innerHTML = "Error in code!";


So I  took an alternative route
         var label1ClientID = $telerik.$("[id$='Label1']").attr("id");
        var label1CID = "#" + label1ClientID;
        $telerik.$(label1CID).text("Error in code!");

I am using Lable control instead of span because I have to show Radwindow  even from serverside.
Thanks,
Prava

[sitefinitysteve]

If you need to SET the text in the label from the server then yeah, go ahead and use the asp:Label, but if you're only ever changing it from the client, then use a span.

This would probably return null, I dont know if they have clientside objects like the telerik controls

var label1 = $find( label1ClientID);   ////This returns null

So yeah, you're workaround is close to how I would have done it...although like I said, if you're using .net4, on the label set ClientIDMode="Static" and the code simplifies to this

$telerik.$("#Label1").text("Error in code!");

If no .Net 4, then this might be easier than 3 lines

$telerik.$("[id$='Label1']").text("Error in code!");

The selector gets the object then sets the text, the way you had it, you find the object, get it's ID, then append a #, then RE-find the object setting the text based on the ID.  So if we remove .attr('id'), then we can just manipulate the dude by itself :)

Id really appreciate clicking Marked as Answered on the post if you don't mind as well :)

[Prava kafle]

Thanks  Steve!

[Zhuoyun]

Thanks, it definitely helps!!!!

[nitin]

@Steve: Thanks, below code helped me.

 

var yesButtonID = $telerik.$("[id$='CYesBtn']").attr("id"); //Gets the ID, this is external JS safe...you can use the = .ClientID asp method though
var yesButton = $find(yesButtonID); /