Telerik Reporting Conquers Gaming: Use Our Product in One of Many Extraordinary Ways

Telerik Reporting helps us in transforming data into actionable business insights. Our product is used in many different cases and business scenarios, for example, making data visualizations or business intelligence, however, today we will go beyond and see how to use it in a way that you have never imagined.

Game in Reporting?! Sounds crazy, doesn’t it? Indeed, it is, and, in this blog post you will see that it is completely possible. We will share a special secret formula for creating the popular game tic-tac-toe in the Standalone Report Designer, with no extra custom code. You will see that our product can be used not only for making reports, but for making a lot of fun as well. Stay tuned to get the recipe.

Equipment

We will need the following equipment for building the game:

• 1 x Standalone Report Designer—you don’t have it?! No worries, download a FREE trial today
• 1 x good mood

Firstly, we need to load our super powerful tool for making reports—the Standalone Report Designer. Go to the installation folder of Telerik Reporting, then navigate to the Report Designer folder and run the Telerik.ReportDesigner.exe file.

Ingredients

The required ingredients for our game are:

• 1 x Crosstab
• 1 x Binding
• 2 x Panels
• 3 x Report parameters
• 3 x Navigate to Report Actions
• 8 x PictureBoxes

Main Idea

Instead of using X’s and O’s for marking the squares, we will use the Telerik Ninja and the Kendo UI Kendoka. The playground will be built from a crosstab. Each cell of the crosstab will have an action, so the report will call itself with each click of the players. The crossed cells and the player’s turn will be monitored by report parameters. Once the first player crosses a cell, the report will be reloaded with the new state of the playground. 

Preparation

Step 1: Creating the Report

You have already opened the Standalone Designer and to create a new report, go to the File tab -> New -> Blank report -> Browse -> select location for the report and hit the Save button.

Step 2: Adding the Logo of the Game

Now we want to add the logo of the game in the page header section. For that reason, navigate to the Insert tab -> PictureBox. From the Properties pane, set the Value by selecting the image.

Step 3: Adding the Report Parameters

We will need three report parameters—for the state, user and winner:

• paramState will be used to track when a square was crossed. The parameter should be of type String.
• paramUser will identify the player’s turn. Make the parameter of type Boolean. The parameter is used only to visually distinguish which player has to make the next turn.
• paramWinner—as the name suggests—will define who is the winner. The parameter should be of type String.

You can see the default values of the report parameters in the report, which can be found in the Project section a little bit below.

Step 4: Building the Playground

- Insert a Crosstab to the detail section and delete the headers row. Then add one more column to the right.

- Set Binding property of the crosstab:

• Property path: DataSource
• Expression: = Array(Substr(Parameters.paramState.Value, 0,3), Substr(Parameters.paramState.Value, 3, 3), Substr(Parameters.paramState.Value, 6, 3))

Our goal is to build a 3x3 table for our tic-tac-toe board. We’ve already built the three columns in our designer, but to get the three rows, we have to bind our crosstab to a data source. The data source will be represented by an array of three strings, obtained by splitting the state string into three parts, each containing three characters.

- In each cell of the crosstab, add a PictureBox. Make the following settings of the first one:

• BorderColor: 218, 74, 38
• BorderStyle: Solid
• BorderWidth: 5px
• Value: =Format('player{0}.png', Item(0, Item))
• Action: select Navigate to Report -> Select a report source -> select the same report file. Then click on Edit parameters and set them as follows:

paramState: = Substr(Parameters.paramState.Value,0,CInt((RowNumber()-1) * 3))+ CStr(CInt(Parameters.paramUser.Value))+ Substr(Parameters.paramState.Value,CInt(((RowNumber()-1) * 3) + 1), Len(Parameters.paramState.Value))

Here we just have to admit that this is a very ugly expression and a user function will be a way better choice. But, since it can be done with the expression engine, why bother creating user functions?

- paramUser: = Not Parameters.paramUser.Value

The idea of the action is to reload the report with the selection of the player and pass the new state of the board.

Apply the same steps similarly to the rest of the PictureBoxes.

Step 5: Adding the Players

In this step, we will add the logos of the two players and set their visibility based on the player’s turn.

Add a panel for each player and insert the image of the player in it. Set the Value property of the first one to be:

=Format('player0{0}.png', IIF(Parameters.paramWinner.Value = '0', 'win', IIF(Parameters.paramUser.Value = 0, '', 'bw')))

Also, insert one more PictureBox that will indicate if the player is the winner. We will control its visibility by setting the ConditionalFormatting property. Set the rule as follows:

• Expression: =IIF(Parameters.paramWinner.Value <> '0', True, False)
• Operator: =
• Value: =True

Then go to the Style section and unmark the Visible checkbox.

Project

And here we have the final result:

The full report and assets can be found in our GitHub repository.

Want to Try Telerik Reporting?

Telerik Reporting is a complete, easy-to-use and powerful .NET embedded reporting tool for web and desktop applications that supports: Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET AJAX, HTML5/JS, Angular, React, Vue, WPF, WinForms and UWP. Also available as a part of our Telerik DevCraft bundle, Reporting allows you to create, style, view and export rich, interactive and reusable reports to attractively present analytical and any business data. Add reports to any business application through report viewer controls. Export the ready reports in more than 15 formats.

If you still have not tried it, you can start a free trial to take a closer look. A trial of Telerik DevCraft will include Telerik Reporting, along with modern, feature-rich UI component libraries for web, desktop and mobile applications, document processing and automated testing/mocking tools. We also provide a support service we are proud of and resources that will help you along the way.