Print Pane with RadTextBox (and value)

16 posts, 0 answers
  1. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 17 Apr 2010 Link to this post

    I have a splitter and I print the contents of one of the panes using the following. The pane contains a textbox which users can enter data into prior to printing. It seems that this method of printing does not include the value of the textbox when rendering the print view. Is there a way to get a rad pane to print with the text box contents?

                function PrintReport() {  
                    var splitter = $find("<%= rsReport.ClientID %>");  
                    var pane = splitter.getPaneById("<%= rcPane.ClientID %>");  
     
                    if (!pane) return;  
     
                    var cssFileAbsPaths = new Array();  
                    cssFileAbsPaths[0] = '<%= Me.MyAppPath %>/global/css/global.css';  
                    cssFileAbsPaths[1] = '<%= Me.MyAppPath %>/common/css/tools.css';  
                    pane.Print(cssFileAbsPaths);  
     
                } 
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 21 Apr 2010 Link to this post

    Hi Albert,

    I am not sure what causes the problem you describe and we have not been reported with such so far. I prepared a test demo based on your explanation but unfortunately to no avail. What I did was to type some value in the textbox and then to click the button to print the content but the value of the textbox is visible in the print preview window. Please, test my demo page I attached for your reference and let me know if I am doing something wrong.


    Regards,
    Svetlina
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hubert Frick
    Hubert Frick avatar
    8 posts
    Member since:
    Nov 2009

    Posted 01 Jul 2010 Link to this post

    Hello!

    I think I have the same problem:

    I have a splitter within two panes. In the first pane there is a Radgrid and in the second pane there is a Html-Table which holds a number of RadTextBoxes. The values of the RadTextBoxes are updated when the client-event Rowselected is fired, for example

    function RowSelected(sender, args) { 
     
    var DtlTitel = $find('<%= DtlTitel.ClientID %>'); 
     
    DtlTitel.set_value(args.getDataKeyValue("GmldTitel")); 
     
    ... 
     
     

     

    Everything is OK.

    Now I want to print the content of the second pane by calling this javascript function:

            function PrintPane(paneID) { 
     
                var splitter = $find('<%= RadSplitter1.ClientID%>'); 
     
                var pane = splitter.GetPaneById(paneID); 
     
                if (!pane) return
     
                var cssFileAbsPath = "../Template/printStyles.css"
     
                var arrExtStylsheetFiles = [cssFileAbsPath]; 
     
                pane.Print(arrExtStylsheetFiles); 
     
            } 

     

    My problem is that in IE all the RadTextBoxes show their contents, but in Firefox they are empty.  And in Firebug I can see that the value-property of all this elements are empty.  When I set the Text-Property of one of the RadTextBoxes to a default value (for testing) the content of this textbox is going to print…

    I also testet a asp:Textbox, but the problem must be somewhere else because the situation is the same.

    Do you have any idea?

  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 06 Jul 2010 Link to this post

    Hello guys,

    Thank you for this additional information, we were now able to reproduce the problem under Firefox. It comes from the fact that the print method of the RadPane uses the innerHTML property and it behaves differently in this case under Firefox - when you type in the input, the value is not modified in the DOM and as a result it is not taken when getting the inner HTML. Since this is browser specific behavior we cannot fix it in our code but a possible solution is to handle the blur event and reset the value as shown below:

    <script type="text/javascript">
        function PrintReport()
        {
            var splitter = $find("<%= rsReport.ClientID %>");
            var pane = splitter.getPaneById("<%= rcPane.ClientID %>");
            if (!pane) return;
            var cssFileAbsPaths = new Array();
            cssFileAbsPaths[0] = 'myStyleSheet1.css';
            cssFileAbsPaths[1] = 'myStyleSheet2.css';
            pane.Print(cssFileAbsPaths);
        }  
      
    </script>
    <telerik:RadSplitter ID="rsReport" runat="server" Width="100%" Height="100%">
        <telerik:RadPane ID="pane" runat="server">
            <asp:Button ID="btn" runat="server" Text="Print right pane" OnClientClick="PrintReport();return false;" />
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
        <telerik:RadPane ID="rcPane" runat="server">
            <asp:TextBox ID="test" runat="server" onblur="this.setAttribute('value', this.value);"></asp:TextBox>
        </telerik:RadPane>
    </telerik:RadSplitter>

    The same logic can be used for fixing the problem with the RadTextBox as well with all same scenarios which use an INPUT element.

    More information about this is available below:

    http://forums.whirlpool.net.au/forum-replies-archive.cfm/385091.html

    This solution works fine on our side, let us know how it goes on yours.

    Kind regards,
    Svetlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Hubert Frick
    Hubert Frick avatar
    8 posts
    Member since:
    Nov 2009

    Posted 08 Jul 2010 Link to this post

    Hello,
    for my solution I don't need it any more, because I changed on Telerik Reporting...
    Nevertheless I tried your sample, but in my RadTextBox or also in my asp:TextBox the onblur - event is not known ("Attribute 'onblur' is not a valid attribute of element 'TextBox').

    Greetings
  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 13 Jul 2010 Link to this post

    Hi Hubert Frick,

    The logic you should follow is the same as with the standard TextBox but you should use the RadTextBox's API instead. For your convenience I modified the previous sample code to use a RadTextBox instead and I pasted it below:


    <script type="text/javascript">
        function PrintReport()
        {
            var splitter = $find("<%= rsReport.ClientID %>");
            var pane = splitter.getPaneById("<%= rcPane.ClientID %>");
            if (!pane) return;
            var cssFileAbsPaths = new Array();
            cssFileAbsPaths[0] = 'myStyleSheet1.css';
            cssFileAbsPaths[1] = 'myStyleSheet2.css';
            pane.Print(cssFileAbsPaths);
        }
        function ResetValue(sender, args)
        {
            var displayValue = sender.get_displayValue();
            var input = $get("<%= test.ClientID %>" + '_text');
            input.setAttribute('value', displayValue);
        }
    </script>
    <telerik:RadSplitter ID="rsReport" runat="server" Width="100%" Height="100%">
        <telerik:RadPane ID="pane" runat="server">
            <asp:Button ID="btn" runat="server" Text="Print right pane" OnClientClick="PrintReport();return false;" />
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
        <telerik:RadPane ID="rcPane" runat="server">
            <telerik:RadTextBox ID="test" runat="server" ClientEvents-OnBlur="ResetValue">
            </telerik:RadTextBox>
                </telerik:RadPane>
    </telerik:RadSplitter>


    I hope that my reply is helpful, let me know how it goes.

    All the best,
    Svetlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 12 Apr 2011 Link to this post

    I am running into this issue again. The proposed solution for rad textbox doesn't appear to work in Firefox 4. The textBox text does get transferred to the printed version in IE8.

    Also, I have the same issue with other input controls such as those that are rendered with the ASP.NET CheckBoxLIst or RadioButtonList controls. The "Checked" value is not transferring to the printed version in either IE or Firefox.
  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 15 Apr 2011 Link to this post

    Hi Albert,

    I tested the code under FF 4 but it works as expected - here is my video capture of testin the sampel code under FF4:

    http://screencast.com/t/oNus3YuyU

    In addition, this is simple javascript and also the problem is not directly related to RadSplitter. Would you please make sure that you have correctly attached the ResetValue function? I believe that this should work on your side, too.

    As to your other questions for other controls - please us eteh same approach or find anotehr general solution for teh problem on the net.

    In case you reproduc ethe problem only when there is splitter and the problem disappears when you remov ethe splitter, send me sampel reproduction code and I will do my best to help. 

    All the best,
    Svetlina
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 16 Aug 2012 Link to this post

    The provided solution of using s ResetValue function has been working for me. However, I have run into this issue again. This time its with a multiline text box. It appears the ResetValue function doesn't work in this mode. I'm guessing a multiline text box is rendered differently by telerik. What sort of changes would be necessary to the ResetValue function in order to get it to work with a multline textbox?
  11. Vessy
    Admin
    Vessy avatar
    1383 posts

    Posted 17 Aug 2012 Link to this post

    Hi Albert,

    As you have guessed the issue with the code above when you are using a textbox with multiline mode is connected with the way the control is being rendered. In multiline mode the control is rendered as a textarea HTML element, which does not offer a text property.

    Here are the changes that should be made:
    <script type="text/javascript">
            function PrintReport() {
                var splitter = $find("<%= rsReport.ClientID %>");
                var pane = splitter.getPaneById("<%= rcPane.ClientID %>");
                if (!pane) return;
                var cssFileAbsPaths = new Array();
                cssFileAbsPaths[0] = 'myStyleSheet1.css';
                cssFileAbsPaths[1] = 'myStyleSheet2.css';
                pane.Print(cssFileAbsPaths);
            }
            function ResetValue(sender, args) {
                var displayValue = sender.get_displayValue();
                var textArea = $get("<%= test.ClientID %>");
                textArea.innerHTML = displayValue;
            }
        </script>
        <telerik:RadSplitter ID="rsReport" runat="server" Width="100%" Height="100%">
            <telerik:RadPane ID="pane" runat="server">
                <asp:Button ID="btn" runat="server" Text="Print right pane" OnClientClick="PrintReport();return false;" />
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
            <telerik:RadPane ID="rcPane" runat="server">
                <telerik:RadTextBox ID="test" runat="server" ClientEvents-OnBlur="ResetValue" TextMode="MultiLine">
                </telerik:RadTextBox>
            </telerik:RadPane>
        </telerik:RadSplitter>


    Greetings,
    Veselina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  12. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 17 Aug 2012 Link to this post

    thanks for the help, but I need my code to be generic so it can be used for multiple textboxes. The code I use for a regular single-line box is:

    function ResetRadInputValue(sender, args) {
        var displayValue = sender.get_displayValue();
        var input = $get(sender.get_element().id + '_text');
        ResetInputAttribute(input, 'value', displayValue);
        ResetInputAttribute(input, 'style.border', '0');
    }
     
    function ResetInputAttribute(input, attributeName, attributeValue) {
        input.setAttribute(attributeName, attributeValue);
    }

    This resets the value and removes the box border for printing purposes.

    How would I get the textarea object instead of the input object as shown here?
  13. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 19 Aug 2012 Link to this post

    FYI, I tried the follwoing and it did not work:

    function ResetRadInputValueFoMultiline(sender, args) {
      
        var displayValue = sender.get_displayValue();
      
        var input = $get(sender.get_element().id);
      
       input.innerHTML = displayValue;
      
    }
  14. Vessy
    Admin
    Vessy avatar
    1383 posts

    Posted 21 Aug 2012 Link to this post

    Hi Albert,

    A possible way to make ResetInputAttribute() more flexible and use it even when there is no attributeName parameter which to be passed is to pass a sample value (like "none").

    The other things you have to pay attention to are the rows in the multiline textbox. A sample way to print the whole textbox's content is to reset its rows count depepending on the actual lines in the field:
    <script type="text/javascript">
        function ResetRadInputValue(sender, args) {
            var displayValue = sender.get_displayValue();
            console.log(displayValue);
            var input = $get(sender.get_element().id);
            console.log(input);
            ResetInputAttribute(input, 'none', displayValue);
            ResetInputAttribute(input, 'style', 'border: none');
        }
        function ResetInputAttribute(input, attributeName, attributeValue) {
            if (attributeName == 'none') {
                var n = 1;
                for (var i = 0; i < attributeValue.length; i++) {
                    if (attributeValue[i] == "\n") {
                        n++;
                    }
                }
                input.setAttribute("Rows", n);
                input.innerHTML = attributeValue;
            }
            else {
                input.setAttribute(attributeName, attributeValue);
            }
        }
    </script>


    All the best,
    Veselina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  15. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 21 Aug 2012 Link to this post

    I tried your suggestion and it didn't work. All it seems to do is specify the rows attribute, which is normaly going to be 1 regardless. The RadTextbox contents still do not print in Firefox (Version 14 on my computer), even though I can look internally in the function and do see the input, displayValue and innerHTML values appear to be set correctly.

    I have attached a screen capture (sample.jpg) so you can see this. The red circle in the lower right shows the multi-line text box with some sample text. The other circle shows a single-line textbox.  I click on a link which executes the "PrintReport" funciton provided in the first post of this thread. Firefox opens a new window with the contents to be printed along with its printdialog. As you can see, the contents to be printed do not include the text in the multi-line box. The contents of the single-line box are shown. 
  16. Vessy
    Admin
    Vessy avatar
    1383 posts

    Posted 22 Aug 2012 Link to this post

    Hi Albert,

    A possible reason why this code does not work on your side could be the version of the RadControls. Which version of the controls are you using?

    Note that the element value of the textbox depends on the RadControls' version which is used, so the problem may be caused by that (refer to this help article):

    Version 2012.2.724 (the latest release):
    var input = $get(sender.get_element().id);

    Some of the previous releases:
    var input = $get(sender.get_element().id + "_text");

    For your convenience I am attaching a sample page, including both a single-line and a multi-line RadTextBox along with a screenshot showing hot the print preview looks on our side.

    Could you, please, examine the page and tell me how it differs from yours? Could you modify it to a point where the problem occurs and send it back?

    Thank you in advance for your cooperation.

    Greetings,
    Veselina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  17. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 22 Aug 2012 Link to this post

    That did it. It would seem this is a breaking change. Is it documented somewhere?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017