Search results

Integrate the component with Report Server

You can integrate Report Designer with Report Server to create, edit, browse and publish reports using the Report Server built-in API service.

  • The Report Designer requires the serviceAuthorizationToken to perform the API actions with Syncfusion Report Server. Create a token for the user by using the server RESTful API, you can use the following code in Default.aspx.cs file to generate the token.
     public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.designer.ServiceAuthorizationToken = this.GenerateToken("http://reportserver.syncfusion.com/", "guest", "demo");
        }

        public string GenerateToken(string serverUrl, string userName, string password)
        {
            using (var client = new HttpClient())
            {
                client.BaseAddress = new Uri(serverUrl);
                client.DefaultRequestHeaders.Accept.Clear();

                var content = new FormUrlEncodedContent(new[]
                {
                new KeyValuePair<string, string>("grant_type", "password"),
                new KeyValuePair<string, string>("username", userName),
                new KeyValuePair<string, string>("password", password)
                  });

                var result = client.PostAsync("/api/Token", content).Result;
                string resultContent = result.Content.ReadAsStringAsync().Result;
                var token = JsonConvert.DeserializeObject<Token>(resultContent);

                return token.token_type + " " + token.access_token;
            }
        }
    }

    public class Token
    {
        public string access_token { get; set; }

        public string token_type { get; set; }

        public string expires_in { get; set; }

        public string userName { get; set; }

        public string serverUrl { get; set; }

        public string password { get; set; }
    }
  • Set the Syncfusion Report Server built-in service URL to the serviceUrl property and assign the created token to serviceAuthorizationToken property. You can use the following complete code in your CSHTML page.
    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ReportDesignerSample._Default" %>

    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <link href="Content/reports/default-theme/ej.reports.all.min.css" rel="stylesheet" />
        <link href="Content/reports/default-theme/ej.reportdesigner.min.css" rel="stylesheet" />
        <script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="https://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js" type="text/javascript"></script>
        <script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script>
        <script src="Scripts/CodeMirror/lib/codemirror.js"></script>
        <script src="Scripts/CodeMirror/addon/hint/show-hint.js"></script>
        <script src="Scripts/CodeMirror/addon/hint/sql-hint.js"></script>
        <script src="Scripts/CodeMirror/mode/sql/sql.js"></script>
        <script src="Scripts/CodeMirror/mode/vb/vb.js"></script>
        <script src="Scripts/reports/common/ej.reporting.common.min.js"></script>
        <script src="Scripts/reports/common/ej.reporting.widgets.min.js"></script>
        <script src="Scripts/reports/common/ej.report-designer-widgets.min.js"></script>
        <!--Chart component script added before the report designer script to render chart report item in reports-->
        <script src="Scripts/reports/data-visualization/ej.chart.min.js"></script>
        <!-- Report Viewer component script-->
        <script src="Scripts/reports/ej.report-viewer.min.js"></script>
        <!-- Report Designer component script-->
        <script src="Scripts/reports/ej.report-designer.min.js"></script>
        <div style="height: 650px;width: 950px">
        <SF:ReportDesigner runat="server" ID="designer" ServiceUrl="http://reportserver.syncfusion.com/ReportService/api/Designer">
        </SF:ReportDesigner>
        </div>
    </asp:Content>