Walk Through Images With Multiple Datasets in Same RDLC Report

In this article you will walk through images with multiple datasets in the same RDLC Report.

Scenario

Suppose we have a product to develop and this product needs a main setting to print a header with company information.

On the other hand, there are other reports with pictures such as clients or product pictures.

image1.png

Creating a project


In this exercise, I'll create a client's table that stores pictures for each client, in addition to the rest of the client's info.

It important to scale client information to fit properly in the report, on the other hand performance is better when retrieving data to the form and report!

image2.png

Have a look at the main window of our little application; you see a main form that can add and update client information by adding a picture for this client.

In the settings tool strip menu you can load a main setting window that stores the company information to a XML file and stores the image logo to the same folder with the name Mainsettings_Logo.

image3.png

Finally the report form will contain the report viewer to display the report.

Working with Report

Once you have created the RDLC Report, now it is time to create your own fields to preview the company information and client table data.

I have already created two Model-views to manage what the report will show.

The first one, called mainSettingView, will preview the company information and it will have this context:

class MainSettingView
{
   
public virtual string Name { get; set; }
   
public virtual string Address { get; set; }
   
public virtual string AuthNumber { get; set; }
   
public virtual string PhoneNumaber { get; set; }
   
public virtual string Fax { get; set; }
   
public virtual string Email { get; set; }
   
public virtual string LogoPath { get; set; }
   
public virtual Image LogoImage { get; set; }
    .
    .
//other Methods to retrieve data from xml file
    .
}

The other one is the ClientView that will preview the client information in the table:

class ClientView
{
   
public virtual int Id { get; set; }
   
public virtual string ClientName { get; set; }
   
public virtual string ClientAddress { get; set; }
   
public virtual string ClientPhone { get; set; }
   
public virtual string ClientEmail { get; set; }
   
public virtual string ClientPicture { get; set; }// yes it's a string !!
}

Before continuing, you have successfully built the project.

Now we must add two data sets to the Report by clicking "New" - "Dataset" then choose the object's data then choose mainSettingView. Do the same thing for the Clients dataset.

After creating fields for the header you must set an expression to set every field to the first item in the main settings view and create it like this: =First(Fields!Name.Value, "HeaderDataSet").

Now we will make a tablix and assign it to the dataset.

image4.png

Then drag the clientView dataset fields to the tablix, we will make the picture column hidden.

Then we must add a new image control and add it to the tablix.

Converting Image To 64BaseString

As you know, the image is stored in the database as binary and we need to convert it to a byte array to apply the Convert method; its simple. After retrieving the client entity from the database using LINQ as in the folllowing:

Convert.ToBase64String(c.ClientPicture.ToArray());

And the entire method will be:

List<ClientView> cls = new List<ClientView>();
foreach (var c in context.Clients.ToList())
{
   
ClientView cl = new ClientView();
    cl.Id = c.Id;
    cl.ClientName = c.ClientName;
    cl.ClientAddress = c.ClientAddress;
    cl.ClientEmail = c.ClientEmail;
    cl.ClientPhone = c.ClientPhone;
    cl.ClientPicture =
Convert.ToBase64String(c.ClientPicture.ToArray());
    cls.Add(cl);
}

Note that we assigned the converted image to the hidden field in the tablix report.

Now we will retrieve the image in binary from this field by converting the 64BaseString to binary in the image.value= =Convert.FromBase64String(ReportItems!ClientPicture.Value)

We use the ReportItem that has the pictureClient.value and convert it to binary.

In the same way we will do the header logo by adding a TextBox and assigning the hidden value to true to convert the header logo image from this TextBox to binary.

Finally

How to use this sample


In the Solution Explorer open the file named "Model1.exmx.sql", then right-click on the opened file, then execute the SQL command.