Pass Parameters from Web Page to Telerik Report

• Download source (RAR) - 65.8 KB
• Download source - 71.5 KB

Introduction

There are lot of articles to pass parameters within the Telerik report. But in this tip, we will discuss how to pass parameters from aspx web page and JavaScript page to Telerik report.

Pass Report Parameters from aspx Web Page to Telerik Report

As a first step, you have to make the report. To do that, open a new project and add class library to make reports. Add a new report and design it as shown below:

ADO.NET code for retrieving data to report from database is shown below. If you are interested in entity framework or any other technique to retrieve data, you can use it here instead of ADO.NET.

using System.Data.SqlClient;

namespace TelerikReports
{
    using System;
    using System.ComponentModel;
    using System.Drawing;
    using System.Windows.Forms;
    using Telerik.Reporting;
    using Telerik.Reporting.Drawing;

    /// <summary>
    /// Summary description for SampleReport.
    /// </summary>
    public partial class SampleReport : Telerik.Reporting.Report
    {
        public SampleReport(string invoiceNumber)
        {           
            InitializeComponent();

            SqlConnection sqlConnection = new SqlConnection();
            SqlCommand sqlCommand = new SqlCommand();
            SqlDataAdapter sqlDataAdapter = new SqlDataAdapter();

            sqlConnection.ConnectionString = 
            "Data Source=(local);Initial Catalog=ZssDcposDat;" + 
            "Integrated Security=True;MultipleActiveResultSets=True";

            sqlCommand.CommandText = "SELECT ItemDesc,Price,Qty, 
                Total FROM InvoiceLine where InvoiceNo ='" + invoiceNumber + "'";

            sqlCommand.Connection = sqlConnection;

            sqlDataAdapter.SelectCommand = sqlCommand;

            this.DataSource = sqlDataAdapter;
        }
    }
}

Now design the web page as your own. Sample is as shown below:

Add the below code to your web page to pass parameters and to open your report.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using TelerikReports;

namespace TelerikWebAPP
{
    public partial class TelerikReportPage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            var instanceReportSource = new Telerik.Reporting.InstanceReportSource();
            instanceReportSource.ReportDocument = new SampleReport(TextBox1.Text);
            this.ReportViewer1.ReportSource = instanceReportSource;
        }
    }}

Now, you have successfully completed the report. By following this method, you can pass any number of parameters in your report from your own page.

Pass Parameters from JavaScript to Report

Add another web page with Telerik report viewer and programmatically bind the Telerik report. Using “Request.Params”, accept the URL parameters and assign them into variable as shown below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using TelerikReports;

namespace TelerikWebAPP
{
    public partial class FromJavaScripToReport : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            object invocenum = Request.Params["Invocenum"];
            string number = Convert.ToString(invocenum);

            var instanceReportSource = new Telerik.Reporting.InstanceReportSource();
            instanceReportSource.ReportDocument = new SampleReport(number);
            this.ReportViewer1.ReportSource = instanceReportSource;
        }
    }
}

Then, write the JavaScript code as shown below. It should contain Url parameters and the page, which contain the report viewer. By using this method, you can pass any number of parameters to your Telerik report from JavaScript page.

<%@ Page Language="C#" AutoEventWireup="true" 
CodeBehind="WebPageWithJavaScript.aspx.cs" Inherits="TelerikWebAPP.WebPageWithJavaScript" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

        function OpenReport() {
            var invoiceNum = document.getElementById("TextBox1").value;
            window.open('http://localhost:58838/FromJavaScripToReport.aspx?Invocenum=' + 
                invoiceNum, '_blank');
        }
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <input type="button" value="Print Now" onclick="OpenReport()"/>
    </div>
    </form>
</body>
</html>

Note: If you want to debug your Telerik report, you should run with Internet Explorer.

What is Next?

Now, you have successfully studied how to pass report parameters from aspx web page and JavaScript page. In the next tip, we will study more complex Telerik reporting methods.

Special Thanks: Supun Megasmullage