Telerik Reporting - Easy and Fast reports for your .NET MVC website

For quite some time I was wondering what the best way would be to make reports from various websites that I work on.

The first time I used Telerik product was Kendo UI - At that time I saw they offered a wide variety of tools for .NET but never realized that I would come back to them and use their reporting tools.

If you ever had to use Crystal Reports then you will love this; Simply because it is everything you wished for from Crystal- In a simple to install and minimal effort configuration, yet truly versatile.


After installing it you simply create new folder in your solution where you will keep your files.




I use it within a MVC 3.0 site (even though it not fully compatible but they are working on it)

It works well for me. Besides telerik have ample examples, good forum posts and you even get support during the trial. Fantastic.
Right click on your new folder and click add new item. On the left menu list select reports and you will see Telerik Report Icon.

The first time you add a report it will add references to your project automatically, for the core report engine, Visual Studio plugin and ReportViewer User Control for front end support.


As mentioned earlier if you ever used crystal reports you will see a worryingly familiar screen.. but once you start using it the relief kicks in, of how easy it Terlerik Reports actually are to use.  At this point you should most likely use the documentation that got installed and do the Tutorials. They show how to bind to SQL data sources.



I am not going to repeat myself with that here so I will show you how to generate dynamic reports based on custom classes that get populated from you MVC Repositories for example. Then how to use the ASP.NET ReportViewer UseControl within MVC 3.0

First of all I created a file with its own namespace and some classes. I do this so that I can design the reports during design time and allows me to pipe data from my repositories.



namespace MySuperProject.web.TReports
{
    public class ReportExamplesGraphCount1
    {
        public int Count1 { get; set; }
        public int Count2 { get; set; }
        public int Count3 { get; set; }
     }
 
    public class ReportLetterHead
    {
        public string PlaceName { get; set; }
        public string PlaceAddress { get; set;}
        public string Body { get; set; }
        public string Footer { get; set; }
        public string ToName { get; set; }
 
    }
 
}



I will show you how to populate a graph dynamically. At first it baffled me on how to bind data to the graph, because the Graph is a separate object within the Report... and you cannot just do report.graph.datasource; as you would with your report object.




  1. Create a new report. I called it ReportGraph.cs (cancel the wizard)
  2. From the toolbox  find the Chart item and drop it within the report section "detail" (i actually deleted the header and footer)
  3. Click on the Chart and in the Properties Window, click Events; In "NeedDataSource" type a function name like "GetTheData" and press enter. You will land up in the code with a new function that will fire when the chart needs data.
    private void GetTheData(object sender, EventArgs e)
        {

            var chart = sender as Telerik.Reporting.Processing.Chart;
            chart.DataSource = this.DataSource;
 
        }












    

  • This actually referes to the Report - not the chart object. That line is the part that threw me off. In order to assign a data source to the chart.. you need to assign a data source to the report first! then within the 'chart.needData event' assign the Chart Objects Datasource to the Reports datasource that was assigned from out controller dynamically (sounds a bit strange but that is how it all drills through for embedded charts)
    • 

  • i.e.
    a) Data binds -> Chart.Datasource
    b) Chart fires needDataSourceEvent
    c) Event code binds Report.Datascource to Chart (this.Datasource)
    • 

  • Unfortunately you cannot see the chart in design time as is now.. but if you tinkered around a bit with the dataSource and need dataSource to check; if data source is empty just create some test data and bind to that for design time.
    • 






So the Report and the embedded Chart are now ready. So, how do we bind data dynamically and then display it to your users? First of all if you are using MVC 3.0 you should watch the video provided by Telerik.

















The stuff that interests us is at about 1:56 and watch till about 3:25 (the CSS problem)





Now lets wire the Controller in. My controller is called... ReportController.cs








        public ActionResult Report()
        {
            var serv = new MySuperProject.Domain.PoCService(1);

            var PeopleList = serv.GetPeopleMembers();
 
            var ex1 = new TReports.ReportExamplesGraphCount1();
            ex1.Count1 = PeopleList.Count(p => p.Forename.Contains("P"));
            ex1.Count2 = PeopleList.Count(p => p.Forename.Contains("A"));
            ex1.Count3 = PeopleList.Count(p => p.Forename.Contains("R"));
            ViewBag.ReportGrpah = ex1;
 
            return View();
        }

The class, called PoCService that created an object with access do data and then 


i get a list of People called "PeopleList" from that object that i defined


within my models. 


ex1 is the custom class we made within our Report folder to hold our strongly 


typed data. I just assign arbitrary data using some simple linq to each property


res within the report. As shown in the video, the apsx page we add our datasource


that we assigned to our viewbag at controller level to the report.


Now in the view we just have to assign the Datasource to the REPORT and the 


chart will use that Reports Datasource when the needData event fires.






  protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
 
        var report = (Telerik.Reporting.Report)this.ReportViewer2.Report;
        report.DataSource = ViewBag.ReportGrpah;
 
    }




    

  • Telerik will build the chart (bars) based on these values automatically- Its awesome and easy.
    • 

















For more info, check the Telerik website




PS How the heck do you fix the "CSS Problem" - Well i just ripped the CSS 
out from the telerik examples and adjusted the CSS.
Its not 100% but it works for me.




Here you gohttp://pkula.blogspot.co.uk/2012/06/css-for-telerik-reports-in-mvc-30.html



























































Comments








Post a Comment