This is a migrated thread and some comments may be shown as answers.

Customize Web Form Report Viewer

8 Answers 452 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Thomas Salt
Top achievements
Rank 1
Thomas Salt asked on 15 Aug 2008, 02:27 PM
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.

8 Answers, 1 is accepted

Sort by
0
Accepted
Chavdar
Telerik team
answered on 15 Aug 2008, 04:18 PM
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.
0
John
Top achievements
Rank 1
answered on 09 Nov 2010, 07:40 AM
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
0
Steve
Telerik team
answered on 11 Nov 2010, 05:24 PM
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
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
0
John
Top achievements
Rank 1
answered on 18 Nov 2010, 04:13 AM
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

 
0
Steve
Telerik team
answered on 23 Nov 2010, 04:24 PM
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
Get started with Telerik Reporting with numerous videos and detailed documentation.
0
John
Top achievements
Rank 1
answered on 29 Nov 2010, 02:10 AM
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;
...
}
0
John Hughes
Top achievements
Rank 1
answered on 18 Feb 2011, 12:43 AM
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
0
Steve
Telerik team
answered on 18 Feb 2011, 09:29 AM
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
Tags
General Discussions
Asked by
Thomas Salt
Top achievements
Rank 1
Answers by
Chavdar
Telerik team
John
Top achievements
Rank 1
Steve
Telerik team
John Hughes
Top achievements
Rank 1
Share this question
or