Customize Web Form Report Viewer

[Thomas Salt]

Is there a way to customize the loading image as well as the styling text of the ProcessingReportMessage on the Report Viewer?  I know most of your controls are easily customizable, but I cannot seem to find information for this particular task.

I'm hiding the entire report and I just want to show the toolbar (by setting the height = 0px).  However the loading image and text is a little too big and overbearing when accompanied with the toolbar only.

Thanks for the help as always.

[Chavdar]

Hi Thomas Salt,

You can do this by implementing a custom skin for the ReportViewer. A sample Web Site solution which shows how to do this is attached. The skin files are located in the Skins\Custom folder. You can change all of the image files and modify the ReportViewer.css style sheet file to adjust background colors, fonts, sizes, etc. The processing message style is controlled by the .WaitText class.

Hope this helps. Let me know if you have other questions.

Best wishes,
Chavdar
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[John]

Hi Chavdar

I found some problem in your Customize Toolbar
that is, if i input the page textbox which is more than my totalpage number, i'll get Error.

And
Although i input the correct number of page.
but it still stay at same page,or first page.
could you help me to fix this problem?

John

[Steve]

Hi John,

We could not reproduce such a problem. When you try to input a page number bigger than the page count (which is not correct in a first place), the viewer gives warning "Please, select page between 'current pageNumber - page count'".

Sincerely yours,
Steve
the Telerik team

[John]

hi Steve

i'm sorry for my last stubby question.

This problem is happen when i use your demoproject from your blog :
http://blogs.telerik.com/telerikreportingteam/posts/08-10-23/custom_toolbar_for_the_web_reportviewer.aspx

i made some change for my case.all the processing is in aspx like the code below.

                    <telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientButtonClicked="OnClientButtonClickingHandler" OnButtonClick ="RadToolBar1_ButtonClick"
                        Width= "100%">
                        <CollapseAnimation Duration="200" Type="OutQuint" />
                        <Items>
                            <telerik:RadToolBarButton runat="server" ToolTip="第一頁" ImageUrl="~/Skins/Default/FirstPage.gif"
                                DisabledImageUrl="~/Skins/Default/FirstPageDisabled.gif" PostBack="False" >
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton runat="server" ToolTip="前一頁" ImageUrl="~/Skins/Default/PrevPage.gif"
                                DisabledImageUrl="~/Skins/Default/PrevPageDisabled.gif" PostBack="False">
                            </telerik:RadToolBarButton>
                            <%-- John Add - 有Bug，所以先拿掉 2010.005.902 --%>
                            <telerik:RadToolBarButton runat="server" PostBack="False">
                                <ItemTemplate>
                                    <asp:TextBox ID="TextBox1" Width="30px" runat="server" ToolTip="目前頁數">
                                    </asp:TextBox>
                                </ItemTemplate>
                            </telerik:RadToolBarButton>
<%--                            <telerik:RadToolBarButton runat="server">
                                <ItemTemplate>
                                    <asp:Label ID="Label1" Width="40px" runat="server" ToolTip="目前頁數">
                                    </asp:Label>
                                </ItemTemplate>
                            </telerik:RadToolBarButton>--%>

                            <telerik:RadToolBarButton runat="server">
                                <ItemTemplate>
                                    <asp:Label ID="Label2" Width="40px" runat="server" ToolTip="總頁數">
                                    </asp:Label>
                                </ItemTemplate>
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton runat="server" ToolTip="下一頁" DisabledImageUrl="~/Skins/Default/NextPageDisabled.gif"
                                ImageUrl="~/Skins/Default/NextPage.gif" PostBack="False">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton runat="server" ToolTip="最後一頁" DisabledImageUrl="~/Skins/Default/LastPageDisabled.gif"
                                ImageUrl="~/Skins/Default/LastPage.gif" PostBack="False">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton runat="server" ToolTip="另存PDF檔案" DisabledImageUrl="~/Skins/Default/Save.gif"
                                ImageUrl="~/Skins/Default/Save.gif" PostBack="False">
                            </telerik:RadToolBarButton>
                            <%-- John Add - 沒有用處，所以先拿掉 2010.005.902 --%>
                            <%--<telerik:RadToolBarButton runat="server" ToolTip="重新整理" DisabledImageUrl="~/Skins/Default/RefreshDisabled.gif"
                                ImageUrl="~/Skins/Default/Refresh.gif" PostBack="False">
                            </telerik:RadToolBarButton>--%>
                            <telerik:RadToolBarButton runat="server" ToolTip="列印報表" DisabledImageUrl="~/Skins/Default/PrintDisabled.gif"
                                ImageUrl="~/Skins/Default/Print.gif" PostBack="False">
                            </telerik:RadToolBarButton>
                        </Items>
                    </telerik:RadToolBar>

and

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
    var viewer = <%=ReportViewer1.ClientID%>;
    var RPToolbar = document.getElementById(viewer.toolbarID);
    //RPToolbar.style.display = "none";
    var toolbar = null;
    var firstP = null;
    var prevP = null;
    var lastP = null;
    var nextP = null;
    var select = null;
   //頁面載入時，ToolBar按鈕的狀態控制。
   function pageLoad()
        {
                toolbar = $find('<%=RadToolBar1.ClientID %>');
                firstP = toolbar.get_items().getItem(0);
                prevP = toolbar.get_items().getItem(1);
                nextP = toolbar.get_items().getItem(4);
                lastP = toolbar.get_items().getItem(5);
                prevP.disable();
                firstP.disable();
                if(viewer.get_TotalPages() == 1){
                    nextP.disable();
                    lastP.disable();
                    document.getElementById("RadToolBar1_i2_TextBox1").disabled = false;
                }
        }
    viewer.baseOnReportLoaded = viewer.OnReportLoaded;
    viewer.OnReportLoaded = function()
    {
       this.baseOnReportLoaded();
       var textbox = document.getElementById("RadToolBar1_i2_TextBox1");
       textbox.value = this.get_CurrentPage();
       textbox.disabled = false;
       var label2 = document.getElementById("RadToolBar1_i3_Label2");
       label2.innerHTML = " / " + viewer.get_TotalPages();
    }
    function OnClientButtonClickingHandler(sender, eventArgs)
    {
        //第一頁
        if(eventArgs.get_item().get_index() == 0)
        {
            viewer.set_CurrentPage(1);
            prevP.disable();
            firstP.disable();
            nextP.enable();
            lastP.enable();
        }
        //前一頁
        if(eventArgs.get_item().get_index() == 1)
        {
            if (viewer.get_CurrentPage() > 2)
            {
                viewer.set_CurrentPage(viewer.get_CurrentPage() - 1);
                nextP.enable();
                lastP.enable();
            }
            else if (viewer.get_CurrentPage() == 2)
            {
                viewer.set_CurrentPage(viewer.get_CurrentPage() - 1);
                prevP.disable();
                firstP.disable();
                nextP.enable();
                lastP.enable();
            }
        }
        //下一頁
        if(eventArgs.get_item().get_index() == 4)
        {
            if (viewer.get_TotalPages() > viewer.get_CurrentPage() + 1)
            {
                viewer.set_CurrentPage(viewer.get_CurrentPage()+ 1);
                firstP.enable();
                prevP.enable();
            }
            else if (viewer.get_TotalPages() == viewer.get_CurrentPage() + 1)
            {
                viewer.set_CurrentPage(viewer.get_CurrentPage()+ 1);
                firstP.enable();
                prevP.enable();
                nextP.disable();
                lastP.disable();
            }
        }
        //最後一頁
        if(eventArgs.get_item().get_index() == 5)
        {
            viewer.set_CurrentPage(viewer.get_TotalPages());
            firstP.enable();
            prevP.enable();
            nextP.disable();
            lastP.disable();
        }
        //另存PDF檔案
        if(eventArgs.get_item().get_index() == 6)
        {
            viewer.ExportReport("PDF");
        }
        //重新整理報表
        //if(eventArgs.get_item().get_index() == 7)
        //{
        //    viewer.RefreshReport();
        //}
        //列印報表
        if(eventArgs.get_item().get_index() == 7)
        {
            viewer.PrintAs("PDF");
        }
    }
</script>
</telerik:RadCodeBlock>

In your customize toolbar, there is no such a place to control change page by input number.(as i see...)
so, when i try to move to another page, actually it just do a postback, then report refresh to the firstpage.

if i was wrong please tell me ,how can i add this function to the customize toolbar, thx

John

 

[Steve]

Hi John,

This forum thread discusses another report customization and not the one you've pointed out. Nevertheless, I've tested the sample project from the blog post with the latest Telerik Reporting and noticed that there is no action upon using the page number textbox i.e. such functionality has never been implemented. Should you have implemented this yourself, you should make sure the API is correct, add the navigation and handle any errors.

Regards,
Steve
the Telerik team

[John]

Hi Steve 

i had try to add the code below to handle the event at XXX.aspx. but since it wont going into the function.
This code was found from Source Code of Telerik.ReportViewer.WebForms \ Resource \ ReportViewer.js
If there have more hint or example, please give me , thanks

Best Regards

John

ReportViewer.prototype.OnToolbarCmd = function (toolbarBtn)

{

    switch (toolbarBtn.CommandName)

    {

...

         case "PageNumber":

            var pageIndex = parseInt(toolbarBtn.value) - 1;

            if (isNaN(pageIndex) || (pageIndex < 0 || pageIndex >= this.pageCount))

            {

                alert("Please, select page between 1-" + this.pageCount); //TODO: localize

                toolbarBtn.focus();

                toolbarBtn.select();

            }

            else

            {

                this.SetCurrentPageIndex(pageIndex);

            }

            break;

...

}


[John Hughes]

Steve,

Would it be possible for you to post your project where you used the custom toolbar?  I am having trouble with it and an example might help me.

Thanks,

John

[Steve]

Hi John,

Set the Default.aspx page as start page in the web application and you would be able to run it.

Best wishes,
Steve
the Telerik team