Multicolumn report - Horizontal display

[Paul]

Hello,

I'm creating a multicolumn report where i need to display pictures related to an item.
Let's say the item have 5 different pictures and i need to display 3 pictures per row.

Her's my example on how i wish to display pictures of the item:
Column1             Column2             Column3
Image1.gif            Image2.gif            Image3.gif         
Image4.gif            Image5.gif            

So i set up the number of column (ColumnCount) to 3 for the detail section. 
But the only problem i found is the report won't display the pictures in the way i want. The report start displaying pictures column by column. And, if these 5 pictures doesn't fit in one column then the report will fill the 2nd column and so on...

Here's the output of the report:
Column1             Column2             Column3
Image1.gif            Image5.gif
Image2.gif            
Image3.gif            
Image4.gif            

So my whole target is to have a way to diplay my picture in an horizontal way (as shown in the example above) and not in vertical way.

Does anyone have an idea on how to fix my problem ?
Thank you.

Paul

[Steve]

Hi Paul,

Currently we do not support cross to down direction for the items. Unfortunately we cannot engage with a specific time-frame for this functionality as our current goal is to cover some other major features that are still missing such as richtextbox item, crosstab, table item etc.

Sorry for the inconvenience.

Regards,
Steve
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Paul]

Hi Steve,

Thank you for your quick answer ...
I hope you can this feature in the upcoming versions ...

Is there any other way to do what i'm looking for ? Like doing some loops and add dynamically images while rendering my report ?
If yes, can you send me a sample code  ?

Thank you,

Paul

[John]

We recently started using Telerik Reporting and was interested to know if there is any update on when this feature might be added to the reporting package?

We have multiple reports that would benefit from cross to down rendering of data.

Any answer would be helpful,

John Burkle

[Steve]

Hello John,

The current logic of the multicolumn implementation does not allow for such change in feasible way. If we figure out a way to change this, we would do it, but for the time being we would support only down then across layout.

Greetings,
Steve
the Telerik team

[Joel Reinford]

Am I to understand that Telerik's position on multi-column layout direction is "we can't do it?" That answer is hard to accept. Please clarify if this is on a future roadmap or if you have no plans to implement this feature.

[Louis Bouchard]

I'm facing the same problem and it's ***crucial*** for me to print some information in the horizontal display.  Can you suggest some workaround please?

[John]

I devised a workaround to solve my issue requiring a horizontal display of data although it may not work for all problems.

I use the NeedDataSource method and build a DataSet/DataTable to binf to the report's DataSource. Here is some example code (C#):

using System.Data;

private void MyReport_NeedDataSource(object sender, EventArgs e)
        {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            DataColumn dc;
            DataRow dr;

            #region Build Column Structure

            dc = new DataColumn();
            dc.DataType = Type.GetType("System.String");
            dc.ColumnName = "Display1";
            dt.Columns.Add(dc);

            dc = new DataColumn();
            dc.DataType = Type.GetType("System.String");
            dc.ColumnName = "Value1";
            dt.Columns.Add(dc);

            dc = new DataColumn();
            dc.DataType = Type.GetType("System.String");
            dc.ColumnName = "Display2";
            dt.Columns.Add(dc);

            dc = new DataColumn();
            dc.DataType = Type.GetType("System.String");
            dc.ColumnName = "Value2";
            dt.Columns.Add(dc);

            dc = new DataColumn();
            dc.DataType = Type.GetType("System.String");
            dc.ColumnName = "Display3";
            dt.Columns.Add(dc);

            dc = new DataColumn();
            dc.DataType = Type.GetType("System.String");
            dc.ColumnName = "Value3";
            dt.Columns.Add(dc);

            dc = new DataColumn();
            dc.DataType = Type.GetType("System.String");
            dc.ColumnName = "Display4";
            dt.Columns.Add(dc);

            dc = new DataColumn();
            dc.DataType = Type.GetType("System.String");
            dc.ColumnName = "Value4";
            dt.Columns.Add(dc);

            dc = new DataColumn();
            dc.DataType = Type.GetType("System.String");
            dc.ColumnName = "Display5";
            dt.Columns.Add(dc);

            dc = new DataColumn();
            dc.DataType = Type.GetType("System.String");
            dc.ColumnName = "Value5";
            dt.Columns.Add(dc);

            ds.Tables.Add(dt);

            #endregion Build Column Structure

                var aMyData = MyDataFromTheDataBase.ToArray();

                int rows = Convert.ToInt32(Math.Ceiling(Convert.ToDouble(aMyData.Count()) / 5));

                for (int k = 0; k < rows; k++)
                {
                    dr = dt.NewRow();

                    for (int r = 1; r <= 5; r++)
                    {
                        int optionIndex = (5 * k) + (r - 1);

                        if (optionIndex < aMyData.Count())
                        {
                            MyData data = (MyData)aMyData[optionIndex];

                            switch (r % 5)
                            {
                                case 0:
                                    dr["Value5"] = data.Value;
                                    dr["Display5"] = data.Display;
                                    break;
                                case 1:
                                    dr["Value1"] = data.Value;
                                    dr["Display1"] = data.Display;
                                    break;
                                case 2:
                                    dr["Value2"] = data.Value;
                                    dr["Display2"] = data.Display;
                                    break;
                                case 3:
                                    dr["Value3"] = data.Value;
                                    dr["Display3"] = data.Display;
                                    break;
                                case 4:
                                    dr["Value4"] = data.Value;
                                    dr["Display4"] = data.Display;
                                    break;
                            }
                        }
                    }

                    dt.Rows.Add(dr);
                }
            }

            this.DataSource = ds.Tables[0].DefaultView;
        }

Then in the report Details section there is:
    [=Display1]        [=Display2]        [=Display3]        [=Display4]        [=Display5]    
    [=Value1]           [=Value2]          [=Value3]           [=Value4]           [=Value5]    

[Carsten Koster]

Hi Steve,
this is also important for us.
We also want to display Images in Multi-Columns.
Please work on this feature...
Thanxs

Carsten

[Steve]

Hi guys,

The detail section is printed once for every row in the data source similarly to a repeater and this happens vertically. The columns actually represent the separate pages of the report, which are treated as logical pages rendered on the same physical page. Columns are arranged from left to right, top to bottom, and are separated by white space between each, and data flow in the columns is top to bottom, left to right. If the report is divided into more than one column, each physical page is divided vertically into columns, each of which is considered a logical page. The easiest way to visualize this is imagining the columns in a newspaper.
That said, the current implementation of multi-column layout is not due to technical limitation, but it represents our understanding on the functionality. Standards for mailing label for example cover their size, space between columns etc, but the flow is not standardized and can be handled as needed.

The inclusion of Crosstab item to Telerik Reporting allows you to handle such scenario with some manual preparation of the data. We have prepared a sample project and video showing how to accomplish this task.

Regards,
Steve
the Telerik team

[great neal]

Good job, thx Steve.

[Pierrick]

Hello,

I need to create a similar report. I manage to have each item of my report going from left to right. 

Unfortunately my customer wants dynamic content. Which means dynamic number of columns and being able to select the data that will be displayed inside a cell. It's to generate a product catalog.

I used a similar layout than the Product Tag demo:
http://demos.telerik.com/reporting/product-tags/html5Demo.aspx

So basically I built a report with all the possible data my customer wants to show. by using CanShrink property to Tru on textBox I manage to get everything condensed when I ask the report to hide some data.

By using the ItemDataBinding event I manage to resize the Height of the panel containing all my textboxes.

private void panelDetail_ItemDataBinding(object sender, EventArgs e)
{
      ReportItem lastItem = (ReportItem)(this.panel2.Items.Where(item => item.Visible == true).Last());
      this.panel2.Height = Unit.Cm(lastItem.Location.X.Value + lastItem.Height.Value);
}

I would like to be able to resize the row of my table as well. I tried a similar approach. 

foreach (TableBodyRow row in this.table1.Body.Rows)
{
    row.Height = Unit.Cm(this.panel2.Location.X.Value + this.panel2.Height.Value + 0.3);
}

I tried as well to change the size of all parents Items of my panel2 (which is resized correctly). 

But unfortunately all my rows keep the initial height define in the designer.

Is there any way to bind the Height of the table directly to an expression which will get the position of my panel2?

I attached some pictures to explain better the issue. basically I want to reduce the area with the red arrows at the minimum.


EDIT:
Actually I was setting a much lower value than expected to the row. I succesfully with this code manage to increase the size of my row but it's not possible de reduce the size. Any idea?

[Stef]

Hi Pierrick,

Instead of using events, try to use conditional formatting rules to show/hide items in the report and bindings as described in the Collapse the container when hiding child report items KB article to reduce the section's Height.

About hiding Table/Crosstab rows, please use Filter defined on the row/column group. This can be done from the Group Explorer. Whether the row/column will be filtered in/out (shown/hidden) can depend on a report parameter or other custom expression based on data field from the item's DataSource.

If you need further help, please elaborate on the scenario and how the user controls what will be visible, and the report layout and how it is built.

Regards,
Stef
Telerik

[Pierrick]

Hello,

Due to time constraint I didn't had the time the test your solution yet. I manage to have the expected result by manually creating the controles in code behind during the NeedDataSource event.

Basically the user is using a web application with a form containing check boxes so they can select wich field will be available in the report for each item. Such as "Code Article" in the previous screenshot. They can choose to hide or display it.

I will try your solution to bind the Height to 1px to see if I can remove all my code behind. and will let you know how it goes.

Thanks for your answer.

Pierrick

[Pierrick]

Hello,

I finally got some time for testing your answer.

It seems that I'm facing some problem linked to the fact I'm using a table. As said before I need to display items in a catalogue with flexible number of columns. To achieve this I used a table.

In attachment you'll have a screenshot of the report explorer to see the hierarchie of report items.

I added in my table a list. By doing so in the properties I don't see the Height property anymore but only a RowHeight property which is not available in the list of Bindings. Is it possible to bind "1px" to RowHeight property? 

So I tried to bound the Height of my table to 1px but it didn't change anything.

[Peter]

Hello Pierrick,

The solution with setting the height property is only relevant for report sections/items. In case of table/list/crosstab items our recommendation is to use group filters. This can be done from the Group Explorer. Whether the row/column will be filtered in/out (shown/hidden) can depend on a report parameter or other custom expression

If you want to hide certain textbox from the list's panel, you can decrease the panel height and set the textbox visible property with binding.

If you need additional assistance we will appreciate if you open a support thread to send us the problematic report definition to review on our end.

Regards,
Peter
Telerik

[IamSalik]

Hello Steve,

 I am looking for across then down data rendering solution for stand alone (.trdx) reports. Is it available now?

[Nasko]

Hello IamSalik,

The scenario is supported via the List report item. For more information, please refer to the How to: Create Multi-Column Report - Across the Page and Then Down KB article.

Regards,
Nasko
Telerik

[IamSalik]

Thanks a lot Telerik Team,

I got it my solution and very pleased with your service :)

Thanks again
Regards
Salik