Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET
Tip/Trick

Pass Parameters from Web Page to Telerik Report

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
19 Jan 2015CPOL2 min read 23.7K   350   2   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:

Image 1

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.

C#
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:

Image 2

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

C#
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:

C#
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.

ASP.NET
<%@ 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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead ISM APAC (Pvt) Ltd
Sri Lanka Sri Lanka
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
PraiseThanks Sir Pin
Member 1255632030-May-16 22:18
Member 1255632030-May-16 22:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.