Print Pane with RadTextBox (and value)

[Albert Shenker]

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);

            }

[Svetlina Anati]

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.

[Hubert Frick]

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?

[Svetlina Anati]

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

[Hubert Frick]

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

[Svetlina Anati]

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

[Albert Shenker]

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.

[Svetlina Anati]

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

[Albert Shenker]

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?

[Vessy]

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

[Albert Shenker]

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?

[Albert Shenker]

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;

}

[Vessy]

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

[Albert Shenker]

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. 

[Vessy]

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

[Albert Shenker]

That did it. It would seem this is a breaking change. Is it documented somewhere?