Skip to main content Skip to footer

Localizing C1ReportViewer- New in 2012 V3

C1ReportViewer is an advanced control which provides a great user interface for viewing , printing and exporting reports to various formats and much more. This feature makes it a widely used control. However, this also brought up the need to localize the control's user interface for different languages and cultures. Keeping in mind the diverse customer base, a new propertyLocalization has been introduced in the C1ReportViewer control with the build 4.0/3.5.20122.77 . This property allows you to localize the Left Pane area, the Footer messages, Tooltips of the various icons and the Print dialog to some extent. You can either use localized strings or may set custom messages to the sub-properties for this single property Localization. See the following screenshot for all the options. Following code implementation localizes various Footer Messages when a report is being generated. For this blog's implementation, we have localized the strings to Japanaese Language.


<wijmo:C1ReportViewer ID="C1ReportViewer1" runat="server" Height="600px" Width="800px" FileName="CommonTasks.xml">  
    <Localization buttonPrint="印刷" toolNameOutline="アウトライン"  
    activityGenerating="生成中..."  
    activityGeneratingDocument="ドキュメントを生成しています..."  
    activityLoading="読み込み中..." activityLoadingOutline="アウトラインを読み込んでいます"  
    activityReportneedsparameters="レポートでパラメータが必要です。"  
    activityStatusFormat="レポートが生成中です。ページ数が変更される可能性があります。現在のページ数: {0}, 終了率 {1}%"  
    activityStatusReadyFormat="レポートが完全に生成されました。ページ数: {0}"  
    buttonCancel="キャンセル" buttonPrintTips="印刷ヒント" labelPrint="印刷"  
    messageFileNameNotSpecified="レポート定義ファイルが指定されていません。"  
    outlineStatus="[アウトラインなし]" toolNameSearch="検索"  
    toolNameThumbs="サム"  
    activityStatusReceived="ドキュメントステータスを受け取りました。, 状態は {0}"  
    activityStatusSearchingText="テキストを検索中..."  
    activityUpdatingPages="ページを更新中"  
    activityWaitingForInput="入力中..."  
    buttonSetparameters="パラメータ"  
    messageGenerateInDisabledState="生成処理を実行できません。, レポートビューワは無効です。"  
    searchMatchesFoundFormat="{0}件を検索"  
    searchNoMatchesFoundFormat="'{0}'に該当したコードはありません。"  
    searchResultPageFormat="ページ {0}:" titleReportparameters="レポートのパラメータ" />  
</wijmo:C1ReportViewer>  

Given screenshots shows the modified footer and other localized messages, when report is generated. I would like to mention that this property localizes most of the parts of C1ReportViewer, but the Toolbar icons, ** Export Options dropdown and Print Dialog** are not completely localized. But we can do the same at client side using the CSS classes that applies. Following is the code implementaion for the same.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>  
<script type="text/javascript">  
  $(document).ready(function () {  
    //Toolbar buttons  
    $(".wijmo-wijreportviewer").find(".print")[0].title = "PRINT";  
    $(".wijmo-wijreportviewer").find(".export")[0].title = "EXPORT";  
    $(".wijmo-wijreportviewer").find(".select\_export\_format")[0].title = "SELECT EXPORT FORMAT";  
    $(".wijmo-wijreportviewer").find(".firstpage")[0].title = "FIRST PAGE";  
    $(".wijmo-wijreportviewer").find(".previouspage")[0].title = "PREVIOUS PAGE";  
    $(".wijmo-wijreportviewer").find(".nextpage")[0].title = "NEXT PAGE";  
    $(".wijmo-wijreportviewer").find(".lastpage")[0].title = "LAST PAGE";  
    $(".wijmo-wijreportviewer").find(".zoomout")[0].title = "ZOOM OUT";  
    $(".wijmo-wijreportviewer").find(".zoomin")[0].title = "ZOOM IN";  
    $(".wijmo-wijreportviewer").find(".zoom")[0].title = "ZOOM";  
    $(".wijmo-wijreportviewer").find('label')[1].title = "CONTINUOUS VIEW"; //continuous view  
    $(".wijmo-wijreportviewer").find('label')[2].title = "FULLSCREEN"; //fullscreen  

    // Localize Export Options dropdown  
    $(".select\_export\_format").click(function () {  
       var count = 1;  
       $(".wijmo-wijreportviewer").find(".wijmo-wijmenu").find(".wijmo-wijmenu-link").each(function () {  
          switch (count) {  
             case 1: $(this)[0].innerText = "ADOBE PDF"; count++; break;  
             case 2: $(this)[0].innerText = "OPEN XML EXCEL"; count++; break;  
             case 3: $(this)[0].innerText = "OPEN XML WORD"; count++; break;  
             case 4: $(this)[0].innerText = "MICROSOFT EXCEL"; count++; break;  
             case 5: $(this)[0].innerText = "RICH TEXT FORMAT"; count++; break;  
             case 6: $(this)[0].innerText = "C1 OPEN XML DOCUMENT"; count++; break;  
           }  
        });  
    });  
    //Localize PrintDialog  
    $(".wijmo-wijreportviewer").find(".print").click(function () {  
       //titlebar icons  
        $(".wijmo-wijdialog-titlebar-maximize")[0].title = "MAXIMIZE";  
        $(".wijmo-wijdialog-titlebar-close")[0].title = "CLOSE";  
        //Print and Preview panes  
        setTimeout(function () {  
         //Preview Pane  
          $(".c1-c1reportviewer-print-dialog td")[1].childNodes[1].childNodes[1].innerText = "PREVIEW";  
          //Print Pane  
          $(".c1-c1reportviewer-print-dialog .printoptions").children()[0].innerText = "PRINT";  
          $(".c1-c1reportviewer-print-dialog .printoptions").children()[1].childNodes[2].data = "ALL";  
          $(".c1-c1reportviewer-print-dialog .printoptions").children()[2].childNodes[2].data = "VISIBLE PAGES";  
          $(".c1-c1reportviewer-print-dialog .printoptions").children()[3].childNodes[2].data = "PAGES";  
          $(".c1-c1reportviewer-print-dialog .printoptions").children()[4].childNodes[0].data = "SUBSET";  
          $(".c1-c1reportviewer-print-dialog .printoptions").children()[5].childNodes[2].data = "REVERSE PAGES";  
          //Localize PrintRange-Subset dropdown  
          var select = $(".c1-c1reportviewer-print-dialog .printoptions").children()[4].childNodes[1];  
          select[0].innerText = "ALL PAGES";  
          select[1].innerText = "ODD PAGES";  
          select[2].innerText = "EVEN PAGES";  
         }, 1000);  
    });  
});  
</script>

In the above code snippet, customized strings have been used for this blog demonstration. However, any Localized strings can be used to fully localize the C1ReportViewer. See the following screenshot for customized PrintDialog as seen after using the above javascript code. Thats it..!! Now you have a complete localized C1ReportViewer with tooltips, footer messages, print dialog and dropdowns. Download Sample for Complete implementation. :)

MESCIUS inc.

comments powered by Disqus