Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Pass Parameters from Web Page to Telerik Report

0.00/5 (No votes)
19 Jan 2015 1  
In this tip, we discuss how to pass report parameters from web page to Telerik report programmatically.

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here