Create a RDLC report

Report Definition Language Client-side, is the extension of the report file. The RDLC files does not require the SQL Server Reporting Services to process the reports.

This section describes step by step procedure to create an RDLC report in JavaScript Report Designer.

Create an application

Create a Web Report Designer javascript application, by following the steps provided in Add Web Report Designer to a javascript application section.

Set report type property

On report designer control initialization, set the reportType property as RDLC.

Add the following code in the <body> tag of the web Report Designer HTML page.

    <!-- Creating a div tag which will act as a container for ejReportDesigner widget.-->
    <div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div>
    <script type="text/javascript">
        $(function () {
            $("#designer").ejReportDesigner({
                serviceUrl: "/api/ReportingAPI",
                reportType: ej.ReportDesigner.ReportType.RDLC
            });
        });
    </script>

When you run the application the report designer will be rendered like below.

Create new reporting application project

Create data

  1. Click the Data icon in the configuration panel to open a Data configuration panel. Create new reporting application project
  2. Click on the NEW DATA button in DATA panel. Create new reporting application project
  3. Now, the Data Fields dialog will be opened like below. Create new reporting application project
  4. Edit the name of the Data in the Name field, if required.
  5. To create fields for the dataset, click on the ADD button. Create new reporting application project
  6. Provide the Field Name in the first drop-down list.
  7. In the second drop-down list, choose the datatype for the respective field. Create new reporting application project
  8. Similarly, you can create multiple fields for the dataset. Create new reporting application project
  9. Click on the OK button. Now, the dataset will be listed under the DATA pane like below. Create new reporting application project

Assign data

  1. Drag and drop a chart report item to the design area. Create new reporting application project
  2. Switch to the DATA tab in the properties panel. Create new reporting application project
  3. Select and drag the numeric column (measure element) or the numeric expression column from the Measure section and drop it in the Y Values section.
  4. Select and drag the dimension element from the Dimensions section to measure against any of the selected numeric column(s) in Y Value(s) section, and drop into the Column(s) section. Create new reporting application project
  5. Now, the final design will look like below. Create new reporting application project

Preview report

  1. Click on the Preview button in the toolbar. Now, the following view will be displayed. Create new reporting application project

  2. To bind data to the widgets, provide valid JSON array collection as shown in following sample code.

    [{
"ProdCat": "Accessories", "SubCat": "Helmets", "OrderYear": "2002", "OrderQtr": "Q1", "Sales": 4945.6925
},
{
"ProdCat": "Components", "SubCat": "Road Frames", "OrderYear": "2002", "OrderQtr": "Q3", "Sales": 957715.1942
},
{
"ProdCat": "Components", "SubCat": "Forks", "OrderYear": "2002", "OrderQtr": "Q4", "Sales": 23543.1060
},
{
"ProdCat": "Bikes", "SubCat": "Road Bikes", "OrderYear": "2002", "OrderQtr": "Q1", "Sales": 3171787.6112
},
{
"ProdCat": "Accessories", "SubCat": "Helmets", "OrderYear": "2002", "OrderQtr": "Q3", "Sales": 33853.1033
},
{
"ProdCat": "Components", "SubCat": "Wheels", "OrderYear": "2002", "OrderQtr": "Q4", "Sales": 163921.8870
},
{
    "ProdCat": "Bikes", "SubCat": "Road Bikes", "OrderYear": "2003", "OrderQtr": "Q2", "Sales": 4119658.6506
},
{
    "ProdCat": "Clothing", "SubCat": "Socks", "OrderYear": "2003", "OrderQtr": "Q3", "Sales": 6968.6884
},
{
    "ProdCat": "Bikes", "SubCat": "Road Bikes", "OrderYear": "2003", "OrderQtr": "Q4", "Sales": 3734891.6389
},
{
    "ProdCat": "Components", "SubCat": "Mountain Frames", "OrderYear": "2002", "OrderQtr": "Q3", "Sales": 608352.8754
}]

    Create new reporting application project

  3. Now, the report preview will be displayed like below. Create new reporting application project

See Also