Skip to main content Skip to footer

How to Add a Custom WYSIWYG Table to a .NET Report Application

Currently, end-users drag-and-drop tables from the ActiveReports Toolbox and bind each table cell with database fields manually (see example). This makes report designing more inefficient, especially in cases of reports with large tables.

For example, if a table contains more than 10 columns, it becomes difficult to identify which dataset field is already included in the table and which are not. User needs to look at the field name of the previous cell and find the next field from the dataset field list. This makes creaitng the report tedious and time-consuming for the end-user.

It is often said that we must start with user experience and work backwards towards technology - not the other way around. In my experience, this is the absolute truth as shifting demographics and ever-changing technologies are actively transforming the ways people work.

Because we value and prioritize user experiences, ActiveReports is excited to introduce Table Builder for the WebDesigner! Users can embed this component into web applications to create and edit Page and RDL reports. Table Builder also helps non-technical users create tables by simply dragging-and-dropping data fields.

Read on to explore more of this new feature, its interface, and how this component seamlessly handles multiple data fields.

An Introduction to the Table Builder

The new Table Builder simplifies the process of creating a table in the report. You can either:

  • Drag-and-drop the whole dataset to create a table containing columns for each field of the dataset

or

  • Drag-and-drop multiple fields from the database to create the table

It is possible to drag-and-drop to add multiple data fields to an existing table.

Using the Table Builder for .NET Reporting Applications

Let's learn how to use the Table Builder.

To begin, drag-and-drop the dataset to create the table.

When a dataset is dragged-and-dropped from the data window, it creates the table containing columns for each field in the dataset.

How to Add a Custom WYSIWYG Table to a NET Report Application

Now, drag-and-drop multiple fields from the dataset to create the table.

The following GIF shows how to select multiple fields from the dataset and then dragging-and-dropping them to create the table.

How to Add a Custom WYSIWYG Table to a NET Report Application

Drag-and-drop multiple fields from the dataset in an existing table.

The following GIF shows how to select multiple fields from the dataset and drag-and-drop them into an existing table.

How to Add a Custom WYSIWYG Table to a NET Report Application

Reorder the columns.

It is possible to reorder the columns by simple drag-drop operation.

How to Add a Custom WYSIWYG Table to a NET Report Application

Group the table.

It is possible to group the table by a simple drag-and-drop into the field.

How to Add a Custom WYSIWYG Table to a NET Report Application

Creating the Reporting Using the Table Builder Feature

For example, a retail store manager may need to create a report will full customer details that shows sales per city and country.

How to Add a Custom WYSIWYG Table to a .NET Report Application

In order to create this report, add the multiples column in the table to show order details. With Table Builder, you can drag-and-drop fields to create a table from the dataset easily.

Step 1

Create a new report and bind the data using this link:

Step 2

Select the fields from the dataset that you want to drag-and-drop to create the table.

How to Add a Custom WYSIWYG Table to a NET Report Application

Step 3

Group the table by dragging-and-dropping grouped fields like "Country" and "City".

How to Add a Custom WYSIWYG Table to a NET Report Application

You can now style your report to enhance the look and feel. Check out the attached report example: rpt_SalesReport.rdlx

How do you use Table Builder in your reports? Please post comments in the section below.


Mohit Garg

Software Engineer
comments powered by Disqus