Modify control inside Radwindow using javascript

8 posts, 1 answers
  1. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 09 Sep 2011 Link to this post

    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
  2. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 09 Sep 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 09 Sep 2011 Link to this post

    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>
  5. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 09 Sep 2011 Link to this post

    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!");
  6. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 09 Sep 2011 Link to this post

    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
  7. Answer
    Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 09 Sep 2011 Link to this post

    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 :)
  8. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 09 Sep 2011 Link to this post

    Thanks  Steve!
  9. Zhuoyun
    Zhuoyun avatar
    5 posts
    Member since:
    Jan 2014

    Posted 22 Jul 2014 in reply to Steve Link to this post

    Thanks, it definitely helps!!!!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017