Create a RDLC report

To create an RDLC (Report Definition Language Client-side) report in the Bold Reports® JavaScript Report Designer, set the reportType property to RDLC, create the data fields, assign them to a report item, and bind JSON data when you preview the report. RDLC files do not require the SQL Server Reporting Services to process the reports.

The following steps show how to create an RDLC report in the JavaScript Report Designer.

Create an application

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

How do I set the report type to RDLC in the JavaScript Report Designer?

When you initialize the Report Designer, set the reportType property to RDLC.

Add the following code in the <body> tag of the 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 renders as follows:

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 the NEW DATA button in the DATA panel. Create new reporting application project
  3. The Data Fields dialog opens. 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 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 the OK button. The dataset is listed under the DATA pane. 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. The final design looks like the following image: Create new reporting application project

Preview report

  1. Click the Preview button in the toolbar. The following view is displayed. Create new reporting application project

  2. To bind data to the report, provide a valid JSON array collection as in the 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. The report preview is displayed. Create new reporting application project

See Also