diff --git a/_config.yml b/_config.yml index 1db7f89de..8d52db4f7 100644 --- a/_config.yml +++ b/_config.yml @@ -45,8 +45,11 @@ navigation: user-guide/components: position: 15 title: "Report Components" + user-guide/customizing-report-items: + position: 15 + title: "Customizing Report Items" styling/rendering-and-paging: - position: 8 + position: 20 title: "Rendering and Paging" styling/rendering-and-paging/design-considerations-for-report-rendering: position: 15 diff --git a/user-guide/assets-manager.md b/user-guide/assets-manager.md new file mode 100644 index 000000000..f94b80b47 --- /dev/null +++ b/user-guide/assets-manager.md @@ -0,0 +1,94 @@ +--- +title: Sharing Resources +page_title: Web Report Designer - Assets Manager +description: To share resources when crafting reports in Telerik Reporting and the Web Report Designer, you can use the Assets Manager. +slug: web-report-designer-user-guide-assets-manager +tags: web, report, design, tool, create, started +published: True +position: 8 +--- + +# Sharing Resources with Assets Manager + +To share resources (like company logos, data files) when crafting reports in the [Web Report Designer](https://demos.telerik.com/reporting/designer), use the **Assets Manager**, which helps you manage shared resources used across multiple reports. It provides centralized resource management, allowing users to upload, organize, rename, and delete various types of assets directly on the server. Shared report resources ensure a unified, consistent look and feel across reports and enable teams to work together—data experts can manage sources, while designers focus on presentation. + +Assets Manager + +You can share and reuse: + +* **Images** (for example, logos, backgrounds): Suitable for using a company logo across multiple reports when the logo is stored at one centralized place. + +* **Data files** (for example, CSV, JSON, shapefiles): Share common data that can be reused across multiple users. + +* **Stylesheets** (for consistent report styling): Styles created in a report can be exported and then used in other reports. + +* **Shared Data Sources** (predefined connections to data): Enable report designers to easily create and reuse a data source component across multiple reports. Read more in [Shared Data Source]({%slug shared-data-source-web-report-designer-user-guide%}) + +* **Report Templates** (.trtx file): Offer initial report layout and styling, and allow creating reports with consistent look and feel. Read more in [Creating and Using Report Templates in Web Report Designer]({%slug web-report-designer-report-templates%}). + +Once uploaded, you can reuse the assets in multiple reports, ensuring consistency and reducing duplication. For example, updating a company logo in the Assets Manager updates it across all reports using that asset. + +## Sharing a Resource + +To share a resource (e.g. an image), you need to invoke the **Assets Manager** in the Telerik Web Report Designer: + +1. Launch the Web Report Designer in your browser. + +1. Click the **Main Menu** at the top left corner. + +1. Select **Assets Manager** from the menu options: + + Assets Manager Main Menu + +You do not always need to go through the menu. When you are editing a report item like a PictureBox, just click the asset picker next to the `Value` field. This will instantly open the Assets Manager so you can select an image right away: + + + +## Resource Folders + +Several default folders that help organizing shared resources for usage across multiple reports are created automatically and cannot be renamed or deleted by end-users, though developers can configure them differently on the backend. + +The main root folder contains three predefined subfolders: + +* `Data`—Stores data files like `.csv`, `.json`, and shapefiles used in Map items) + +* `Images`—Contains image files used in PictureBox items, backgrounds, logos, and so on. + +* `Styles`—Holds stylesheets (for example, `.trdx`, `.css`) used for consistent styling across reports. + +You can create subfolders within these categories to better organize their assets. + +### Reports + +The `Reports` folder is a dedicated folder for storing report definitions, which includes all available reports on the server. It is possible to organize them into subfolders, grouping the reports by category, department, or purpose. Shared reports that can be reused as SubReports in other designs. + +### Shared Data Sources + +The [Shared Data Sources]({%slug shared-data-source-web-report-designer-user-guide%}) folder within the Assets Manager contains reusable data source definitions (.sdsx files) that can be shared across multiple reports. Each .sdsx file encapsulates the configuration for a data source, including: Connection strings, Queries or endpoints, Parameters, Metadata (e.g., name, description). + +## Enhanced UI Features + +To help you manage your shared resources with ease and flexibility, the Assets Manager provides several intuitive features: + +* **Choose Your View: Grid or List**—You can switch between Grid View and List View depending on your workflow. The Grid View also supports column resizing for better visibility. + + + |Grid View|List View| + |----|----| + |Assets Manager Grid View|Assets Manager List View| + +* **Manage Files**—Upload, download, rename, move, or delete files and folders—all in one place. You can also drag and drop files directly into the manager for quick uploads. + +* **View Asset Details**—Selecting an asset and toggling the **View Details** button brings up a panel on the right that shows metadata like file name, type, and size: + + Assets Manager View Details + +* **Quick Access to Recent Assets**—Your recently accessed assets are tracked and easily accessible. + + Assets Manager Recently Used + +* **Organize Reports for Report Books**—If you are creating a Report Book, use the Assets Manager to select and organize individual reports into a cohesive, multi-report document. + +## See Also + +* [Web Report Designer]({%slug user-guide/overview%}) diff --git a/user-guide/components/subreport.md b/user-guide/components/SubReport/creating-master-detail-report.md similarity index 51% rename from user-guide/components/subreport.md rename to user-guide/components/SubReport/creating-master-detail-report.md index a46f5c073..f8c112832 100644 --- a/user-guide/components/subreport.md +++ b/user-guide/components/SubReport/creating-master-detail-report.md @@ -1,12 +1,12 @@ --- -title: SubReport -page_title: SubReport +title: Creating Master-Detail Reports +page_title: Creating Master-Detail Reports description: Learn how to use SubReports in the Web Report Designer to embed reports within other reports for creating master-detail hierarchies and reusable report components. -slug: web-report-designer-user-guide-components-subreport +slug: web-report-designer-user-guide-creating-master-detail-report tags: web, report, design, components, subreport, hierarchy, master, detail published: True reportingArea: WRDHTML5, WRDBlazorWrapper -position: 3 +position: 1 --- -# SubReport +# Creating Master-Detail Reports with SubReports -A SubReport is a report component that allows you to embed one report inside another report. This lets you create complex report layouts, display hierarchical data relationships, and build reusable report components that can be shared across multiple reports. +Using SubReports in the Web Report Designer allows you to embed reports within other reports for creating master-detail hierarchies and reusable report components. -SubReports act as containers that automatically adjust their size based on the content of the embedded report. You can use SubReports to create: - -* Master-detail relationships—Display related data in a parent-child format (for example, customers and their orders). -* Reusable components—Create shared headers, footers, or report sections that can be used across multiple reports. -* Complex layouts—Combine different data sources and report structures within a single report. -* Hierarchical data—Show nested data relationships with proper grouping and organization. - -The next video demonstrates how to [create master-detail](#creating-master-detail-reports-with-subreports) reports by using SubReports in the Telerik Web Report Designer: +The next video demonstrates how to create master-detail reports by using SubReports in the Telerik Web Report Designer following the below steps: -## Prerequisites - -Before working with SubReports, ensure you have: - -* Created and configured [data sources]({%slug web-report-designer-user-guide-components-data-sources%}) for both master and child reports. -* Planned your data relationships and report hierarchy. - -## Creating Master-Detail Reports with SubReports - The following example demonstrates how to create a master-detail report using SubReports. The master report (*CategoriesProducts.trdp*) contains a table with Northwind **Categories** data. The SubReport (*ProductsReport.trdp*) displays Northwind **Products** records filtered by the respective `CategoryID`. > To follow along with the steps below, you need access to an instance of the [Northwind](https://github.com/microsoft/sql-server-samples/tree/master/samples/databases/northwind-pubs) database for [Microsoft SQL Server](https://learn.microsoft.com/en-us/sql/database-engine/install-windows/install-sql-server?view=sql-server-ver17). @@ -152,6 +136,120 @@ The following example demonstrates how to create a master-detail report using Su ![Master-Detail hierarchy ><](images/wrd-components-subreport-master-detail-hierarchy.png) +## Creating Nested Hierarchy with SubReports + +The Web Report Designer provides an alternative approach to parameter binding for hierarchical data using the **DataSource** property of the **SubReport** item. This method is cleaner when your detail report is fully data-bound (not just a table inside it) and works well for hierarchical nested data scenarios. + +Using DataSource on the SubReport item allows you to bind the child report directly to a filtered subset of the parent's data, making the hierarchy more intuitive and reducing parameter code. +The main benefits with this approach are: + +* No need to define and pass parameters manually. +* Works naturally with hierarchical object models or JSON data. +* Cleaner and more maintainable for multi-level hierarchies. + +The following example is purposed to show nested data relationships with proper grouping and organization. + +Let's have JSON data representing a collection of Categories. Each category contains a nested list of its Products. This is a piece of the JSON content to better understand the Categories-Products hierarchical structure: + +```JSON + { + "CategoryID": 1, + "CategoryName": "Electronics", + "Products": [ + { + "ProductID": 100, + "ProductName": "Electronics Item 100", + "Price": 146.34, + }, + { + "ProductID": 101, + "ProductName": "Electronics Item 101", + "Price": 1470.37, + }, + { + "ProductID": 102, + "ProductName": "Electronics Item 102", + "Price": 934.91, + }, + { + "ProductID": 103, + "ProductName": "Electronics Item 103", + "Price": 334.59, + } + ] + }, + { + "CategoryID": 2, + "CategoryName": "Home Appliances", + "Products": [ + { + "ProductID": 104, + "ProductName": "Home Appliances Item 104", + "Price": 1019.39, + }, + { + "ProductID": 105, + "ProductName": "Home Appliances Item 105", + "Price": 1374.47, + }, + { + "ProductID": 106, + "ProductName": "Home Appliances Item 106", + "Price": 1128.34, + }, + { + "ProductID": 107, + "ProductName": "Home Appliances Item 107", + "Price": 1009.11, + }, + { + "ProductID": 108, + "ProductName": "Home Appliances Item 108", + "Price": 1355.37, + }, + { + "ProductID": 109, + "ProductName": "Home Appliances Item 109", + "Price": 386.92, + } + ] + } +``` + +1. Create a new report (e.g. CategoriesReport.trdp) which will be used as our main report for displaying Categories. + +1. Create a [JSONDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#json-data-source) item using the nested JSON collection for Categories and Products. + +1. Use the [Table Wizard]({%slug web-report-designer-user-guide-components-tables%}#using-the-table-wizard) to create a table bound to the JSON source. + + Categories Products Default Table + +1. Select the generated TextBox for the Products field (e.g. the TextBox bound to Fields.Products) + +1. Navigate to the Components tab and click SubReport. Thus, the TextBox item is replaced by a SubReport item. + +1. Using the searchbox, navigate to the `Bindings` section and add a new binding for the **DataSource** field and setting the **Expression** to "=Fields.Products". Thus, the SubReport item will be mapped to the Products list of the respective category record. + + DataSource Binding + +1. Navigate to the `Inner Report` section and select the **UriReportSource** Type. Now, we will need a separate report that will be used as a container for the products for each category. + +1. Create another report (e.g. ProductsReport.trdp) and add two TextBox items. + +1. Using the searchbox, navigate to the **Value** field and bind to **=Fields.ProductName** and **=Fields.Price** respectively. Save the child report. + +1. Go back to the CategoriesReport.trdp and set the newly created ProductsReport.trdp as **Uri** for the UriReportSource. + + Specify Uri report + +1. Click the Preview button and see the products for each category group: + + Preview Categories Products + +A complete step-by-step video is available here: + + + ## See Also * [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) diff --git a/user-guide/components/SubReport/creating-nested-hierarchy-with-subreports.md b/user-guide/components/SubReport/creating-nested-hierarchy-with-subreports.md new file mode 100644 index 000000000..d5dfaffbf --- /dev/null +++ b/user-guide/components/SubReport/creating-nested-hierarchy-with-subreports.md @@ -0,0 +1,129 @@ +--- +title: Creating Nested Hierarchy +page_title: Creating Nested Hierarchy +description: Learn how to use SubReports in the Web Report Designer to create nested hierarchy. +slug: wrd-user-guide-create-nested-hierarchy-with-subreport +tags: web, report, design, components, subreport, hierarchy, master, detail, nested +published: True +reportingArea: WRDHTML5, WRDBlazorWrapper +position: 2 +--- + +# Creating Nested Hierarchy with SubReports + +The Web Report Designer provides an alternative approach to parameter binding for hierarchical data using the **DataSource** property of the **SubReport** item. This method is cleaner when your detail report is fully data-bound (not just a table inside it) and works well for hierarchical nested data scenarios. + +Using DataSource on the SubReport item allows you to bind the child report directly to a filtered subset of the parent's data, making the hierarchy more intuitive and reducing parameter code. +The main benefits with this approach are: + +* No need to define and pass parameters manually. +* Works naturally with hierarchical object models or JSON data. +* Cleaner and more maintainable for multi-level hierarchies. + +The following example is purposed to show nested data relationships with proper grouping and organization. + +Let's have JSON data representing a collection of Categories. Each category contains a nested list of its Products. This is a piece of the JSON content to better understand the Categories-Products hierarchical structure: + +```JSON + { + "CategoryID": 1, + "CategoryName": "Electronics", + "Products": [ + { + "ProductID": 100, + "ProductName": "Electronics Item 100", + "Price": 146.34, + }, + { + "ProductID": 101, + "ProductName": "Electronics Item 101", + "Price": 1470.37, + }, + { + "ProductID": 102, + "ProductName": "Electronics Item 102", + "Price": 934.91, + }, + { + "ProductID": 103, + "ProductName": "Electronics Item 103", + "Price": 334.59, + } + ] + }, + { + "CategoryID": 2, + "CategoryName": "Home Appliances", + "Products": [ + { + "ProductID": 104, + "ProductName": "Home Appliances Item 104", + "Price": 1019.39, + }, + { + "ProductID": 105, + "ProductName": "Home Appliances Item 105", + "Price": 1374.47, + }, + { + "ProductID": 106, + "ProductName": "Home Appliances Item 106", + "Price": 1128.34, + }, + { + "ProductID": 107, + "ProductName": "Home Appliances Item 107", + "Price": 1009.11, + }, + { + "ProductID": 108, + "ProductName": "Home Appliances Item 108", + "Price": 1355.37, + }, + { + "ProductID": 109, + "ProductName": "Home Appliances Item 109", + "Price": 386.92, + } + ] + } +``` + +1. Create a new report (e.g. CategoriesReport.trdp) which will be used as our main report for displaying Categories. + +1. Create a [JSONDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#json-data-source) item using the nested JSON collection for Categories and Products. + +1. Use the [Table Wizard]({%slug web-report-designer-user-guide-components-tables%}#using-the-table-wizard) to create a table bound to the JSON source. + + Categories Products Default Table + +1. Select the generated TextBox for the Products field (e.g. the TextBox bound to Fields.Products) + +1. Navigate to the Components tab and click SubReport. Thus, the TextBox item is replaced by a SubReport item. + +1. Using the searchbox, navigate to the `Bindings` section and add a new binding for the **DataSource** field and setting the **Expression** to "=Fields.Products". Thus, the SubReport item will be mapped to the Products list of the respective category record. + + DataSource Binding + +1. Navigate to the `Inner Report` section and select the **UriReportSource** Type. Now, we will need a separate report that will be used as a container for the products for each category. + +1. Create another report (e.g. ProductsReport.trdp) and add two TextBox items. + +1. Using the searchbox, navigate to the **Value** field and bind to **=Fields.ProductName** and **=Fields.Price** respectively. Save the child report. + +1. Go back to the CategoriesReport.trdp and set the newly created ProductsReport.trdp as **Uri** for the UriReportSource. + + Specify Uri report + +1. Click the Preview button and see the products for each category group: + + Preview Categories Products + +A complete step-by-step video is available here: + + + +## See Also + +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) +* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) diff --git a/user-guide/components/SubReport/creating-org-hierarchy-with-subreports.md b/user-guide/components/SubReport/creating-org-hierarchy-with-subreports.md new file mode 100644 index 000000000..024eb0deb --- /dev/null +++ b/user-guide/components/SubReport/creating-org-hierarchy-with-subreports.md @@ -0,0 +1,107 @@ +--- +title: Creating Organization Hierarchy +page_title: Creating Organization Hierarchy +description: Learn how to use SubReports in the Web Report Designer to create organization self-reference hierarchy. +slug: wrd-user-guide-create-org-hierarchy-with-subreport +tags: web, report, design, components, subreport, hierarchy, master, detail, self, reference, org +published: True +reportingArea: WRDHTML5, WRDBlazorWrapper +position: 3 +--- + +# Creating Organization Hierarchy with SubReports + +An organizational hierarchy is a structured way of arranging roles, responsibilities, and authority within an organization. It defines who reports to whom and how decision-making flows across different levels. This article shows a step-by-step tutorial how to build a similar Org Hierarchy structure as illustrated below: + +
+CEO
+ ├── CTO
+ │    ├── VP of Engineering
+ │    │    ├── Engineering Manager
+ │    │    │    ├── Engineers
+ ├── CFO
+ │    ├── Finance Manager
+ │    │    ├── Accountants
+
+ +The approach uses a recursive SubReport to build an hierarchy from flat data. The main report references itself in a SubReport item, and each subreport filters its data using a Report Parameter passed from the parent. This creates a hierarchical structure until no more child items exist. + +The next video demonstrates how to create Org Hierarchy reports by using SubReports in the Telerik Web Report Designer: + + + +To create the Organizational Hierarchy, follow the steps: + +1. Create a new report (e.g. OrgStructure.trdp) which will be used as our report for displaying Employees. + +1. Delete the Header and Footer. Leave only the [DetailSection]({%slug user-guide/components/report-sections%}). + +1. Create a [CSVDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#csv-data-source) item using the self-referencing flat data for Employees: + + ```CSV + EmployeeID,Name,JobTitle,ManagerID,Department,Location + 1,Alice Johnson,CEO,0,Executive,New York + 2,Bob Smith,CTO,1,Technology,New York + 3,Carol White,CFO,1,Finance,New York + 4,David Brown,VP of Engineering,2,Technology,San Francisco + 5,Eva Green,VP of Product,2,Product,San Francisco + 6,Frank Black,Engineering Manager,4,Technology,Austin + 7,Grace Lee,Engineering Manager,4,Technology,Austin + 8,Henry Adams,Product Manager,5,Product,Seattle + 9,Ivy Clark,Senior Engineer,6,Technology,Austin + 10,Jack Davis,Senior Engineer,7,Technology,Austin + 11,Karen Lewis,Engineer,6,Technology,Austin + 12,Leo Martin,Engineer,7,Technology,Austin + 13,Mia Nelson,Finance Manager,3,Finance,Chicago + 14,Noah Perez,Accountant,13,Finance,Chicago + 15,Olivia Quinn,Accountant,13,Finance,Chicago + 16,Paul Roberts,HR Director,1,Human Resources,New York + 17,Quinn Taylor,HR Manager,16,Human Resources,Chicago + 18,Rachel Scott,Recruiter,17,Human Resources,Chicago + 19,Sam Turner,Legal Counsel,1,Legal,New York + 20,Tina Walker,Compliance Officer,19,Legal,New York + + ``` + + Org Hierarchy Flat Data + +1. Toggle the *"This CSV has header row"* option. + +1. Specify **Integer** type for the `EmployeeID` and `ManagerID` columns. + + Org Hierarchy Flat Data Columns Type + +1. Set the Report's DataSource to the just created CSVDataSource. + +1. Create an Integer report parameter (e.g. reportParameterManagerID) with Value=0. + + Org Hierarchy Report Parameter + +1. Add two TextBox items and bind their values to the Name and JobTitle fields respectively: + + Org Hierarchy TextBox Items + +1. Now, we need to filter the CSV data based on the ManagerID. Add a Filter based on the ManagerID field using the report parameter's value: + + ``` + = Fields.ManagerID = = Parameters.reportParameterManagerID.Value + ``` + +1. Click the `Preview` button and you are expected to see only the CEO (Alice Johnson) because its ManagerID=0 and it meets the filter criterion. + +1. Add a **SubReport** item and specify the `Report source Type` to **UriReportSource** using the same OrgStructure.trdp as `Uri`: + + Org Hierarchy Uri Report Source + +1. Create a parameter (e.g. reportParameterManagerID) which value is bound to the EmloyeeID. Thus, the current EmployeeID will be passed as a value for the ManagerID for the SubReport. + + Org Hierarchy Inner Report Parameter + +1. `Preview` the report and you will see the Organization Hierarchy: + + Org Hierarchy Preview + +## See Also + +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) +* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) diff --git a/user-guide/components/SubReport/images/org-hierarchy-data-columns-type.png b/user-guide/components/SubReport/images/org-hierarchy-data-columns-type.png new file mode 100644 index 000000000..f939f9a23 Binary files /dev/null and b/user-guide/components/SubReport/images/org-hierarchy-data-columns-type.png differ diff --git a/user-guide/components/SubReport/images/org-hierarchy-data.png b/user-guide/components/SubReport/images/org-hierarchy-data.png new file mode 100644 index 000000000..7efaa0c51 Binary files /dev/null and b/user-guide/components/SubReport/images/org-hierarchy-data.png differ diff --git a/user-guide/components/SubReport/images/org-hierarchy-inner-report-parameter.png b/user-guide/components/SubReport/images/org-hierarchy-inner-report-parameter.png new file mode 100644 index 000000000..33a52565b Binary files /dev/null and b/user-guide/components/SubReport/images/org-hierarchy-inner-report-parameter.png differ diff --git a/user-guide/components/SubReport/images/org-hierarchy-preview.png b/user-guide/components/SubReport/images/org-hierarchy-preview.png new file mode 100644 index 000000000..f0d98336c Binary files /dev/null and b/user-guide/components/SubReport/images/org-hierarchy-preview.png differ diff --git a/user-guide/components/SubReport/images/org-hierarchy-report-parameter.png b/user-guide/components/SubReport/images/org-hierarchy-report-parameter.png new file mode 100644 index 000000000..3fda7dc9f Binary files /dev/null and b/user-guide/components/SubReport/images/org-hierarchy-report-parameter.png differ diff --git a/user-guide/components/SubReport/images/org-hierarchy-textbox-items.png b/user-guide/components/SubReport/images/org-hierarchy-textbox-items.png new file mode 100644 index 000000000..5e2aeb3a5 Binary files /dev/null and b/user-guide/components/SubReport/images/org-hierarchy-textbox-items.png differ diff --git a/user-guide/components/SubReport/images/org-hierarchy-uri-report-source.png b/user-guide/components/SubReport/images/org-hierarchy-uri-report-source.png new file mode 100644 index 000000000..f598caa17 Binary files /dev/null and b/user-guide/components/SubReport/images/org-hierarchy-uri-report-source.png differ diff --git a/user-guide/components/SubReport/images/sub-report-datasource-binding.png b/user-guide/components/SubReport/images/sub-report-datasource-binding.png new file mode 100644 index 000000000..0f95b4400 Binary files /dev/null and b/user-guide/components/SubReport/images/sub-report-datasource-binding.png differ diff --git a/user-guide/components/SubReport/images/sub-report-default-table.png b/user-guide/components/SubReport/images/sub-report-default-table.png new file mode 100644 index 000000000..138ce2841 Binary files /dev/null and b/user-guide/components/SubReport/images/sub-report-default-table.png differ diff --git a/user-guide/components/SubReport/images/sub-report-preview-categories-products.png b/user-guide/components/SubReport/images/sub-report-preview-categories-products.png new file mode 100644 index 000000000..2aba7ce57 Binary files /dev/null and b/user-guide/components/SubReport/images/sub-report-preview-categories-products.png differ diff --git a/user-guide/components/SubReport/images/sub-report-products-uri-report.png b/user-guide/components/SubReport/images/sub-report-products-uri-report.png new file mode 100644 index 000000000..0841da5b0 Binary files /dev/null and b/user-guide/components/SubReport/images/sub-report-products-uri-report.png differ diff --git a/user-guide/components/images/wrd-components-subreport-adding-subreport.png b/user-guide/components/SubReport/images/wrd-components-subreport-adding-subreport.png similarity index 100% rename from user-guide/components/images/wrd-components-subreport-adding-subreport.png rename to user-guide/components/SubReport/images/wrd-components-subreport-adding-subreport.png diff --git a/user-guide/components/images/wrd-components-subreport-bind-product-fields.png b/user-guide/components/SubReport/images/wrd-components-subreport-bind-product-fields.png similarity index 100% rename from user-guide/components/images/wrd-components-subreport-bind-product-fields.png rename to user-guide/components/SubReport/images/wrd-components-subreport-bind-product-fields.png diff --git a/user-guide/components/images/wrd-components-subreport-create-categories-table.png b/user-guide/components/SubReport/images/wrd-components-subreport-create-categories-table.png similarity index 100% rename from user-guide/components/images/wrd-components-subreport-create-categories-table.png rename to user-guide/components/SubReport/images/wrd-components-subreport-create-categories-table.png diff --git a/user-guide/components/images/wrd-components-subreport-create-report-parameter.png b/user-guide/components/SubReport/images/wrd-components-subreport-create-report-parameter.png similarity index 100% rename from user-guide/components/images/wrd-components-subreport-create-report-parameter.png rename to user-guide/components/SubReport/images/wrd-components-subreport-create-report-parameter.png diff --git a/user-guide/components/images/wrd-components-subreport-master-detail-hierarchy.png b/user-guide/components/SubReport/images/wrd-components-subreport-master-detail-hierarchy.png similarity index 100% rename from user-guide/components/images/wrd-components-subreport-master-detail-hierarchy.png rename to user-guide/components/SubReport/images/wrd-components-subreport-master-detail-hierarchy.png diff --git a/user-guide/components/images/wrd-components-subreport-new-report.png b/user-guide/components/SubReport/images/wrd-components-subreport-new-report.png similarity index 100% rename from user-guide/components/images/wrd-components-subreport-new-report.png rename to user-guide/components/SubReport/images/wrd-components-subreport-new-report.png diff --git a/user-guide/components/images/wrd-components-subreport-report-data-source.png b/user-guide/components/SubReport/images/wrd-components-subreport-report-data-source.png similarity index 100% rename from user-guide/components/images/wrd-components-subreport-report-data-source.png rename to user-guide/components/SubReport/images/wrd-components-subreport-report-data-source.png diff --git a/user-guide/components/images/wrd-components-subreport-setup-productcategoryid-report-parameter.png b/user-guide/components/SubReport/images/wrd-components-subreport-setup-productcategoryid-report-parameter.png similarity index 100% rename from user-guide/components/images/wrd-components-subreport-setup-productcategoryid-report-parameter.png rename to user-guide/components/SubReport/images/wrd-components-subreport-setup-productcategoryid-report-parameter.png diff --git a/user-guide/components/images/wrd-components-subreport-update-sql-select.png b/user-guide/components/SubReport/images/wrd-components-subreport-update-sql-select.png similarity index 100% rename from user-guide/components/images/wrd-components-subreport-update-sql-select.png rename to user-guide/components/SubReport/images/wrd-components-subreport-update-sql-select.png diff --git a/user-guide/components/images/wrd-components-subreport-urireportsource.png b/user-guide/components/SubReport/images/wrd-components-subreport-urireportsource.png similarity index 100% rename from user-guide/components/images/wrd-components-subreport-urireportsource.png rename to user-guide/components/SubReport/images/wrd-components-subreport-urireportsource.png diff --git a/user-guide/components/images/wrd-components-subreport.png b/user-guide/components/SubReport/images/wrd-components-subreport.png similarity index 100% rename from user-guide/components/images/wrd-components-subreport.png rename to user-guide/components/SubReport/images/wrd-components-subreport.png diff --git a/user-guide/components/SubReport/subreport.md b/user-guide/components/SubReport/subreport.md new file mode 100644 index 000000000..1e2359c8f --- /dev/null +++ b/user-guide/components/SubReport/subreport.md @@ -0,0 +1,41 @@ +--- +title: Overview +page_title: SubReport - Overview +description: Learn how to use SubReports in the Web Report Designer to embed reports within other reports for creating master-detail hierarchies and reusable report components. +slug: web-report-designer-user-guide-components-subreport +tags: web, report, design, components, subreport, hierarchy, master, detail +published: True +reportingArea: WRDHTML5, WRDBlazorWrapper +position: 0 +--- + + + +# SubReport + +A SubReport is a report component that allows you to embed one report inside another report. This lets you create complex report layouts, display hierarchical data relationships, and build reusable report components that can be shared across multiple reports. + +SubReports act as containers that automatically adjust their size based on the content of the embedded report. You can use SubReports to create: + +* [Master-detail relationships]({%slug web-report-designer-user-guide-creating-master-detail-report%})—Display related data in a parent-child format (for example, customers and their orders). +* Reusable components—Create shared headers, footers, or report sections that can be used across multiple reports. +* Complex layouts—Combine different data sources and report structures within a single report. +* [Hierarchical data]({%slug wrd-user-guide-create-nested-hierarchy-with-subreport%})—Show nested data relationships with proper grouping and organization. +* [Organization Structure]({%slug wrd-user-guide-create-org-hierarchy-with-subreport%})—Use recursive SubReports and a self-referencing flat data source. The hierarchy is achieved by having the main report reference itself as a SubReport, passing a parameter that filters child records based on the parent’s ID. + +## Prerequisites + +Before working with SubReports, ensure you have: + +* Created and configured [data sources]({%slug web-report-designer-user-guide-components-data-sources%}) for both master and child reports. +* Planned your data relationships and report hierarchy. + +## See Also + +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) +* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) diff --git a/user-guide/customizing-report-items/conditional-formatting.md b/user-guide/customizing-report-items/conditional-formatting.md new file mode 100644 index 000000000..d60f22b70 --- /dev/null +++ b/user-guide/customizing-report-items/conditional-formatting.md @@ -0,0 +1,61 @@ +--- +title: Conditional Formatting +page_title: Web Report Designer - Conditional Formatting +description: Learn how to apply conditional formatting in Telerik Web Report Designer to dynamically style report items based on data values or expressions, improving readability and visual impact. +slug: wrd-conditional-formatting +tags: web, report, design, customize, style, condition, formatting, properties, area +published: True +position: 1 +--- + + +# Using Conditional Formatting + +To visually highlight important data, **Conditional formatting** lets you automatically style report items based on the values they display. This makes your reports more dynamic and easier to read. For example, you can set a TextBox showing revenue to turn red if the value drops below 10,000. This helps you draw attention to numbers that need review or action. + +Apply Conditional formatting + +Preview Conditional formatting + +## Formatting a Single Item + +[Your text explaining when to use conditional formatting for a single item]. + +[Simplified step-by-step instructions]. + +The quick video tutorial below shows how to apply conditional formatting to a LineTotal TextBox in a table by changing its color to red when a value is less than 50. + + + +## Formatting Multiple Items + +If you want to apply the same rule to the entire row with data, it requires you to apply rules **individually** to each item: + +>tip To save time, you can group items inside a Panel and apply the conditional formatting to the panel itself. This way, all nested items inherit the style based on the condition. This approach is shown in the following video: + + + +## Alternating Row Style + +To make it easier for users to distinguish between rows, especially in large tables or lists, applying alternating background colors (e.g., white and orange) improves readability. + +Alternating Row + +This is done by setting the following conditional formatting rule to one single item or all items within the row. + +|Expression|Operator| Value| +|----|----|----| +|= RowNumber()%2|Equal|1| + +The following video shows how to achieve alternating row style which prevents misreading values by visually separating rows, which is critical for accuracy in data-heavy reports. + + + +## See Also + +* [Web Report Designer]({%slug user-guide/overview%}) +* [Styling the Report]({%slug telerikreporting/designing-reports/styling-reports/using-styles-to-customize-reports%}) diff --git a/user-guide/customizing-report-items/customizing-report-items-overview.md b/user-guide/customizing-report-items/customizing-report-items-overview.md new file mode 100644 index 000000000..b925cf87d --- /dev/null +++ b/user-guide/customizing-report-items/customizing-report-items-overview.md @@ -0,0 +1,64 @@ +--- +title: Overview +page_title: Web Report Designer - Customizing Report Items Overview +description: Learn how to customize the visuals of your report using the fine-grained, built-in styling model, similar to the Cascading Style Sheets (CSS) model. +slug: web-report-designer-customizing-report-items +tags: web, report, design, customize, style, condition, formatting, properties, area +published: True +position: 0 +--- + + +# Customizing Report Items: Overview + +Styling report items serves both, functional and aesthetic, purposes. Visual consistency (e.g., using a theme or style rules) improves user experience and brand alignment. It allows you to improve readability and clarity in your reports. Applying different colors or fonts distinguishes separate sections or highlight key information. +To customize or style report items in the Telerik Web Report Designer, you can use its + +* [Confitional Formatting]({%slug wrd-conditional-formatting%}) option +* Built-in CSS-like [styling model]({%slug wrd-stylesheet-formatting%}) +* Properties Area. + +## Properties Area + +The **Properties Area** represents the section on the right-side where you can view and edit the properties of the currently selected report item. This area lets you control how each report item looks and behaves. Whether you are working with a TextBox, Table, Chart, or Image, this panel gives you access to all the relevant settings in one place: + +* **Appearance**: Change fonts, colors, borders, background, padding, and more. Apply [conditional formatting]({%slug wrd-conditional-formatting%}): dynamically change appearance based on data values. +* **Data**: Connect report items to fields or expressions from your data source. +* **Layout**: Modify size, position, alignment, and visibility. +* **Behavior**: Set actions like navigation, visibility rules, or interactivity. + + Customizing Report Items Properties Area + +### Key Features + +To facilitate the easier styling of your report, the Properties Panel offers several features that simplify access to the built-in styling tools: + +* **Different Views**: Choose the layout that fits your style: + + * **Categorized view**: Groups properties by function (like Appearance, Layout, Data), making it easier to find what you need. + * **Alphabetical view**: Lists everything in order—perfect when you know exactly what you're looking for. + +|Categorized|Alphabetical| +|----|----| +|![Properties Area Categorized View ><](images/wrd-properties-area-categorized-area.png) |![Properties Area Alphabetical View><](images/wrd-properties-area-alphabetical-view.png)| + +* **Indent Guides**: In case of nested properties Indent Line Guides help you see how settings are structured, so you can navigate complex items with confidence: + +![Indent Line Guides in Properties Area ><](images/wrd-properties-area-indent-line-guides.png) + +* **Search Box**: Use the Global Search bar at the top to instantly locate any property or editor. No more scrolling through long lists! + +![Properties Area Global Search ><](images/wrd-properties-area-global-search.gif) + +* **Reset Value**: If you have made a change you want to undo, note that each editable property has a `Reset button` next to it. Just click it to revert that setting to its default - without affecting anything else. + +![Properties Area Reset Button ><](images/wrd-properties-area-reset-button.gif) + +## See Also + +* [Conditional Formatting]({%slug wrd-conditional-formatting%}) +* [Stylesheet Formatting]({%slug wrd-stylesheet-formatting%}) diff --git a/user-guide/customizing-report-items/images/wrd-alternating-row-style.png b/user-guide/customizing-report-items/images/wrd-alternating-row-style.png new file mode 100644 index 000000000..18ec88276 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-alternating-row-style.png differ diff --git a/user-guide/customizing-report-items/images/wrd-apply-external-stylesheet.png b/user-guide/customizing-report-items/images/wrd-apply-external-stylesheet.png new file mode 100644 index 000000000..6a4240a6e Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-apply-external-stylesheet.png differ diff --git a/user-guide/customizing-report-items/images/wrd-customizing-report-items-properties-area.png b/user-guide/customizing-report-items/images/wrd-customizing-report-items-properties-area.png new file mode 100644 index 000000000..597163677 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-customizing-report-items-properties-area.png differ diff --git a/user-guide/customizing-report-items/images/wrd-preview-external-stylesheet.png b/user-guide/customizing-report-items/images/wrd-preview-external-stylesheet.png new file mode 100644 index 000000000..bf28f54d3 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-preview-external-stylesheet.png differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-alphabetical-view.png b/user-guide/customizing-report-items/images/wrd-properties-area-alphabetical-view.png new file mode 100644 index 000000000..d5ca2ea39 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-alphabetical-view.png differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-categorized-area.png b/user-guide/customizing-report-items/images/wrd-properties-area-categorized-area.png new file mode 100644 index 000000000..90a389f46 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-categorized-area.png differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-conditional-formatting.png b/user-guide/customizing-report-items/images/wrd-properties-area-conditional-formatting.png new file mode 100644 index 000000000..d63a5fc66 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-conditional-formatting.png differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-global-search.gif b/user-guide/customizing-report-items/images/wrd-properties-area-global-search.gif new file mode 100644 index 000000000..4816acbe7 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-global-search.gif differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-indent-line-guides.png b/user-guide/customizing-report-items/images/wrd-properties-area-indent-line-guides.png new file mode 100644 index 000000000..494df3428 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-indent-line-guides.png differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-preview-conditional-formatting.png b/user-guide/customizing-report-items/images/wrd-properties-area-preview-conditional-formatting.png new file mode 100644 index 000000000..031b09c47 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-preview-conditional-formatting.png differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-reset-button.gif b/user-guide/customizing-report-items/images/wrd-properties-area-reset-button.gif new file mode 100644 index 000000000..397fd323b Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-reset-button.gif differ diff --git a/user-guide/customizing-report-items/stylesheet-formatting.md b/user-guide/customizing-report-items/stylesheet-formatting.md new file mode 100644 index 000000000..ca425f03e --- /dev/null +++ b/user-guide/customizing-report-items/stylesheet-formatting.md @@ -0,0 +1,102 @@ +--- +title: Using Style Sheets +page_title: Web Report Designer - Using Style Sheets +description: Learn how to customize the visuals of your report using the fine-grained, built-in styling model, similar to the Cascading Style Sheets (CSS) model. +slug: wrd-stylesheet-formatting +tags: web, report, design, customize, style, condition, formatting, properties, area +published: True +position: 3 +--- + + +# Using Style Sheets in Reports + +Using style sheets in the Web Report Designer lets you apply centralized, reusable styles to multiple report items, similar to CSS in web development. + + +The Web Report Designer allows you to use two types of style sheets: +* Quick style sheets that you create for each report and that live within each report +* External style sheets that live in a separate file and that you can reuse across reports + +## How to Create a StyleSheet + +In the Web Report Designer: + +1. Select the **Report** object. + +1. Go to the StyleSheet property. + +1. Click the `+` button to open the **StyleRule Collection Editor**. + +1. Click Add to create a new StyleRule. + +1. Define the Style (e.g., background color, font, borders). + +1. Add Selectors to target specific items (e.g., all TextBox, PictureBox items). + +The following tutorial shows how to define a StyleRule in the report's StyleSheet and apply the style to multiple items using selectors (e.g., by item name or type): + + + +## Using External StyleSheets + +External style sheets (XML files) allow you to reuse style rules across multiple reports. This type of style sheets are external to each report and this allows you to reference them from an arbitrary number of reports. Each style sheets file contains one or more style rules that define how report items must look. + +You can apply styles based on: + +* **TypeSelector**: Applies to all items of a specific type (e.g., all TextBox items). +* **AttributeSelector**: Applies to items with specific attributes. +* **StyleSelector**: Applies to items with a specific StyleName. +* **DescendantSelector**: Applies to items nested within others. + +To add an External StyleSheet in the Web Report Designer: + +1. Select the **Report** object. + +1. Go to the **External style sheets** property. + +1. Click the `+` button to add an external StyleSheet. + +You can define an external style sheet with: + +* **Absolute** Path/URL: for example *C:\Application1\StyleSheets\StyleSheet1.xml* or *https://www.mysite.com/Application1/StyleSheets/StyleSheet1.xml* +* **Relative** Path/URL: for example *.\StyleSheets\StyleSheet1.xml* or *~/StyleSheets/StyleSheet1.xml* + +![Apply External StyleSheet ><](images/wrd-apply-external-stylesheet.png) + +## Sample StyleRule + +Here's an example that styles all TextBox items with a light gray background, dark blue text, and bold Arial font: + +```XML + + + + + + + + + + +``` +And here's how it looks in the report preview: + +![Preview External StyleSheet ><](images/wrd-preview-external-stylesheet.png) + +## See Also + +* [Web Report Designer]({%slug user-guide/overview%}) +* [Styling the Report]({%slug telerikreporting/designing-reports/styling-reports/using-styles-to-customize-reports%}) diff --git a/user-guide/expression-editor.md b/user-guide/expression-editor.md new file mode 100644 index 000000000..d693cfd05 --- /dev/null +++ b/user-guide/expression-editor.md @@ -0,0 +1,55 @@ +--- +title: Expression editor +page_title: Expression editor - Web Report Designer User Guide +description: "Learn more about the Expression editor in Web Report Designer, where and how you may configure and use it in your Reports." +slug: expression-editor-web-report-designer-user-guide +tags: expression,editor,web,report,designer,design,create,report,web +published: True +reporting_area: WRDHTML5, WRDBlazorWrapper +position: 100 +--- + + +# Customize Report Behavior Using the Expression Editor + +Instead of manually entering fixed values, you can use expressions to make your report items smarter and more dynamic. This means your reports can automatically adapt to changing data or conditions—saving you time and reducing errors. The expression editor helps you build these expressions easily, offering ready-to-use elements and clear descriptions so you can focus on getting the result you need without digging through documentation. + +With expressions, you can quickly build your pricing logic by combining database fields with custom values—just type your formula or double-click elements to add them. + +![How to create an Expression Editor ><](images/CreatingExpressionEditorWRD.png) + +## Designing Expressions with Built-in Elements + +By using the predefined expression components in the Web Report Designers, you can build flexible expressions with minimal effort, eliminating the need for coding or manual calculations. + +| Name | Description | +| ------ | ------ | +| `Constants` | Use fixed values like numbers, text, dates, and booleans to ensure consistent logic and formatting that stays unchanged during report execution | +| `Fields – mainDataSource` | Represent the actual data columns from your connected data source | +| `Functions` | Predefined formulas that perform calculations or logic using values like fields, constants, or other functions to create dynamic expressions | +| `Global Objects` | Built-in objects that provide access to report-wide information such as current user identity, execution time, page numbers, rendering format, and environment details | +| `Operators` | Symbols used in expressions to perform calculations, comparisons, logic, or string operations—like '+', '=', 'AND', or 'LIKE'. | +| `Report Parameters` | User-defined inputs that control report content, filtering, or layout—often used to pass values, filter data, or link related reports | +| `Reporting Constants` | Predefined values used to control report layout and styling—such as alignment, borders, image sizing, and page behavior | + + + +>tip You can add a new line as a string in the Expression with the `Edit Expression` dialog. +> +>```` +>= Fields.FirstLine + " +>" + Fields.SecondLine +>```` +> +>The result will be the values of the two fiedls being displayed one above the other in the corresponding report item. + +## See Also + +* [Functions Overview]({%slug telerikreporting/designing-reports/connecting-to-data/expressions/expressions-reference/functions/overview%}) +* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) +* [Approaches for Adding Report Parameters]({%slug telerikreporting/designing-reports/connecting-to-data/report-parameters/how-to-add-report-parameters%}#web-report-designer) +* [Aggregate Functions Overview]({%slug telerikreporting/designing-reports/connecting-to-data/expressions/expressions-reference/functions/aggregate-functions%}) diff --git a/user-guide/images/AllSharedDataSources.png b/user-guide/images/AllSharedDataSources.png new file mode 100644 index 000000000..a7f349d4d Binary files /dev/null and b/user-guide/images/AllSharedDataSources.png differ diff --git a/user-guide/images/CreatingExpressionEditorWRD.png b/user-guide/images/CreatingExpressionEditorWRD.png new file mode 100644 index 000000000..f19244f48 Binary files /dev/null and b/user-guide/images/CreatingExpressionEditorWRD.png differ diff --git a/user-guide/images/CreatingSdsxFile.png b/user-guide/images/CreatingSdsxFile.png new file mode 100644 index 000000000..64386ccf5 Binary files /dev/null and b/user-guide/images/CreatingSdsxFile.png differ diff --git a/user-guide/images/CreatingSharedDataSource.png b/user-guide/images/CreatingSharedDataSource.png new file mode 100644 index 000000000..ae92fee1e Binary files /dev/null and b/user-guide/images/CreatingSharedDataSource.png differ diff --git a/user-guide/images/QueryBuilderWRD.png b/user-guide/images/QueryBuilderWRD.png new file mode 100644 index 000000000..952c367c5 Binary files /dev/null and b/user-guide/images/QueryBuilderWRD.png differ diff --git a/user-guide/images/SchemaRestrictionsQueryBuilderWDR_1.png b/user-guide/images/SchemaRestrictionsQueryBuilderWDR_1.png new file mode 100644 index 000000000..3ce99725d Binary files /dev/null and b/user-guide/images/SchemaRestrictionsQueryBuilderWDR_1.png differ diff --git a/user-guide/images/SchemaRestrictionsQueryBuilderWDR_2.png b/user-guide/images/SchemaRestrictionsQueryBuilderWDR_2.png new file mode 100644 index 000000000..e239fe0fc Binary files /dev/null and b/user-guide/images/SchemaRestrictionsQueryBuilderWDR_2.png differ diff --git a/user-guide/images/wrd-assets-manager-grid-view.png b/user-guide/images/wrd-assets-manager-grid-view.png new file mode 100644 index 000000000..f3606fd3f Binary files /dev/null and b/user-guide/images/wrd-assets-manager-grid-view.png differ diff --git a/user-guide/images/wrd-assets-manager-list-view.png b/user-guide/images/wrd-assets-manager-list-view.png new file mode 100644 index 000000000..f1ac38d96 Binary files /dev/null and b/user-guide/images/wrd-assets-manager-list-view.png differ diff --git a/user-guide/images/wrd-assets-manager-main-menu.png b/user-guide/images/wrd-assets-manager-main-menu.png new file mode 100644 index 000000000..36468e4dd Binary files /dev/null and b/user-guide/images/wrd-assets-manager-main-menu.png differ diff --git a/user-guide/images/wrd-assets-manager-recently-used.png b/user-guide/images/wrd-assets-manager-recently-used.png new file mode 100644 index 000000000..af29b813f Binary files /dev/null and b/user-guide/images/wrd-assets-manager-recently-used.png differ diff --git a/user-guide/images/wrd-assets-manager-view-details.gif b/user-guide/images/wrd-assets-manager-view-details.gif new file mode 100644 index 000000000..30d53258d Binary files /dev/null and b/user-guide/images/wrd-assets-manager-view-details.gif differ diff --git a/user-guide/images/wrd-assets-manager.png b/user-guide/images/wrd-assets-manager.png new file mode 100644 index 000000000..b3eed0fae Binary files /dev/null and b/user-guide/images/wrd-assets-manager.png differ diff --git a/user-guide/images/wrd-using-query-builder.gif b/user-guide/images/wrd-using-query-builder.gif new file mode 100644 index 000000000..43b3ea666 Binary files /dev/null and b/user-guide/images/wrd-using-query-builder.gif differ diff --git a/user-guide/images/wrd-workspace-preferences-main-menu.png b/user-guide/images/wrd-workspace-preferences-main-menu.png new file mode 100644 index 000000000..4a3b3bd5e Binary files /dev/null and b/user-guide/images/wrd-workspace-preferences-main-menu.png differ diff --git a/user-guide/images/wrd-workspace-preferences-snap-to-snap-lines.gif b/user-guide/images/wrd-workspace-preferences-snap-to-snap-lines.gif new file mode 100644 index 000000000..a6e77cb46 Binary files /dev/null and b/user-guide/images/wrd-workspace-preferences-snap-to-snap-lines.gif differ diff --git a/user-guide/images/wrd-workspace-preferences.png b/user-guide/images/wrd-workspace-preferences.png new file mode 100644 index 000000000..781872835 Binary files /dev/null and b/user-guide/images/wrd-workspace-preferences.png differ diff --git a/user-guide/query-builder.md b/user-guide/query-builder.md new file mode 100644 index 000000000..45263472b --- /dev/null +++ b/user-guide/query-builder.md @@ -0,0 +1,146 @@ +--- +title: Building SQL Queries +page_title: Query Builder in the Web Report Designer +description: "Learn more about the Query Builder in the Web Report Designer and how to use it to create basic queries easily in Telerik Reporting." +slug: user-guide/query-builder +tags: query,builder,web,report,designer +published: True +reportingArea: WRDHTML5, WRDBlazorWrapper +position: 200 +--- + + + +# Building SQL Queries the Easy Way + +The Web Report Designer lets you build SQL queries in two ways: by using a visual tool (where you click and select options) or a text tool (where you type the query). + +A query is just a set of instructions that tells the system what data you want from a database. By using a query, you connect your report only to the data you need. The Web Report Designer works with most common data providers (like ADO.NET, ODBC, or OLEDB) as long as they can share details about the columns in the database using a feature called `GetSchema`. + +![The Graphical SQL Query Builder Form of the Web Report Designer ><](images/QueryBuilderWRD.png) + +The graphical query builder helps you find information in a database without writing code. You can click to choose the tables and columns you need, and then see the results. If you use more than one table, you need to show how the tables are connected. + +## Schema Restrictions + +As of 2025 Q1, the Web Report Designer’s Query Builder has a new option called `Schema Restrictions`. This option lets you choose which parts of the database to load by listing them with commas. It helps report creators see only the needed information and makes loading faster. + +```` +null,Production,ProductCategory +```` + +> Schema restrictions are sensitive to uppercase and lowercase letters, and empty values are allowed. If you need to set a value to nothing, use the word null as shown in the example. These rules only work with .NET 8 or newer. + +![Image of the SQL Data Source wizard showing the schema restrictions field ><](images/SchemaRestrictionsQueryBuilderWDR_1.png) + +![Image of the SQL Data Source wizard showing the query builder dialog ><](images/SchemaRestrictionsQueryBuilderWDR_2.png) + +## Query Builder Areas + +The following sections describe the function of each area + +| Name | Description | +| ------ | ------ | +| [Database View](#database-view-pane) | Displays a structured list of tables and views grouped by database sections | +| [Selected Fields](#selected-fields-pane) | Displays the list of field names from the selected items in the database view | +| [Relationships](#relationships-pane) | Displays how the selected tables are connected | +| [Filters](#filters-pane) | Displays a list of options you can use to filter tables or views | +| [Result](#result-pane) | Displays example data for the query that was created automatically | + +### Database View Pane + +On the left side of the screen, you’ll see the Database View. It shows details about the database items you’re allowed to access, based on your login. The items are organized in a tree structure by category. Click a category to see its tables and views, and click a table or view to see its columns. + +When you check a column in this pane, it will automatically move to the Selected Fields pane. If you check a table, all its columns will be added to the Selected Fields pane. If you check more than one table, the Relationship Editor pane will open automatically. + +### Selected Fields Pane + +The Selected Fields pane shows the columns you chose to include in your query. These columns become the set of fields used for your report. You can use these fields to display data in tables, charts, and other report elements when viewing the report. + +The following columns are displayed: + +| Name | Description | +| ------ | ------ | +| Column name | Displays the names of the selected fields, grouped by the table or view they come from | +| Alias | If the last added field name is already used, an alias will be created automatically. You can also change or add aliases manually | +| Grouped | Displays a checkbox that lets you choose if the field should be used for grouping | +| Aggregate | Displays the calculation that will be applied to the field. You can choose `Count`, `Max`, `Min`, `Average`, or `Sum`. If a field is grouped, it cannot have a calculation. By default, `Sum` is used for all fields that are not grouped when the `Grouped` checkbox is selected | +| Sorting type | Displays the sorting type for the field. You can choose `(none)`, `Ascending` (A to Z or smallest to largest), or `Descending` (Z to A or largest to smallest). By default, `(none)` is selected, which means the field will not be sorted | +| Sort order | Displays the order in which the field sortings should be applied | +| Remove | Includes a button to remove this field from the query. You will be asked to confirm before the field is deleted | + +### Relationships Pane + +The Relationships pane shows how the selected tables are linked together, using SQL JOIN statements (which are instructions that tell the database how to combine data from different tables). + +The following option is available: + +* __Add new relationship__ Opens the relationship editor, which lets you set up connections between tables or views. These relationships tell the system how to combine data. When using multiple relationships in a query, each new table must be related to one that is already included. + +The following columns are available: + +| Name | Description | +| ------ | ------ | +| Left table | Displays the name of the first table that is part of the join relationship | +| Join type | Displays the type of SQL join used in the automatically created query. The join types you can choose from are `Inner`, `Left`, `Right`, `Outer`, and `Unrelated` | +| Right table | Displays the name of the second table that is part of the join relationship | +| Left table field | Displays which field from the left table will be used to match data in the join statement | +| Operator | Displays the operator used on the left and right fields from the joined tables | +| Right table field | Indicates which field from the right table should be used in the join statement | +| Edit/Remove | Contains buttons to edit or remove the current relationship | + +### Filters Pane + +The Filters pane shows the conditions used to narrow down the data you see. These conditions help the system choose only the rows that match and create a rule for finding them. + +The following option is available: + +| Name | Description | +| ------ | ------ | +| Logical operator | Choose how the filters in this group should work together. The available options are `And` and `Or` | +| Add Expression | Add a new filter expression to the current group | +| Add Group | Add a new filter group that can have a different logical operator. Filter groups can be defined hierarchically | +| Close | Remove the current filter group and all of its child filter expressions | + +The following columns are displayed: + +| Name | Description | +| ------ | ------ | +| Field Name | Displays the name of the field to apply the criteria | +| Operator | The operator to use in the filter expression | +| Value/Parameter name | The value or parameter name to add to the query | +| Preview value | The value to use for the Result pane | +| Delete | Remove the current filter expression from the expression group | + +### Result Pane + +The Result pane shows the query that is created based on your choices in the other sections. It can also give you a preview of the data that will appear when the query runs. The columns you see in the results are the fields you selected earlier. + +The report does not store the actual data. The data is only fetched when the report is generated. + +The following options are available: + +* __Preview button__ Preview the query created from your selections or see the data it will return + +* __SQL/Data switch__ Choose whether to preview the SQL query that was created for you or the data it will return. + +![How to use the Query Builder ><](images/wrd-using-query-builder.gif) + +## Query Builder State + +When you click Save, the [SqlDataSource Wizard]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/tools/data-source-wizards/sqldatasource-wizard/overview%}) Select Statement will be replaced by the new SQL query that was generated. + +The Query Builder keeps your current settings. But if you change the SQL query manually and then use the Query Builder again, it will replace your changes with its own version. + +## See Also + +* [Getting Started Video Tutorial Part 1](https://www.youtube.com/embed/L-utkcB8-5c?si=bmJU9ggpSOykHdLK&start=188) +* [Getting Started Video Tutorial Part 2](https://www.youtube.com/watch?v=DXKlgq-MYIU) +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) +* [WebServiceDataSource]({%slug telerikreporting/designing-reports/connecting-to-data/data-source-components/webservicedatasource-component/overview%}) +* [WebServiceDataSource Wizard]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/tools/data-source-wizards/webservicedatasource-wizard%}) diff --git a/user-guide/shared-data-source.md b/user-guide/shared-data-source.md new file mode 100644 index 000000000..424ac2486 --- /dev/null +++ b/user-guide/shared-data-source.md @@ -0,0 +1,65 @@ +--- +title: Shared Data Source +page_title: Shared Data Source - Web Report Designer User Guide +description: "Learn more about the Shared Data Source Component in Web Report Designer, where and how you may configure and use it in your Reports." +slug: shared-data-source-web-report-designer-user-guide +tags: shared,data,source,web,report,designer,design,create,report,web +published: True +reporting_area: WRDHTML5, WRDBlazorWrapper +position: 10 +--- + + +# Sharing and Reusing a Data Source + +Instead of configuring a data connection every time you build a report, the Shared [Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) component lets you set it up once and reuse it across multiple reports. This saves you time, reduces errors, and keeps your data connections consistent. Whether you're pulling data from a database, a file, or a web service, this approach helps you stay organized and efficient. + +You can easily connect your reports to a variety of data sources — giving you flexibility to work with the formats you already use, such as: + + * [SqlDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#sql-data-source) + * [WebServiceDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#web-service-data-source) + * [ObjectDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#object-data-source) + * [JsonDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#json-data-source) + * [CsvDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#csv-data-source) + +## Configuring a Shared Data Source + +To create a shared data source: + +1. In the Web Report Designer, open an existing report that already has a data source. +1. Go to the **Explorer** tab, click the ellipsis button (**...**) next to the data source, and then select **Save as Shared Data Source** from the context menu. + + ![Saving a data source as Shared ><](images/CreatingSharedDataSource.png) + +After saving a data source as shared, the Web Report Designer generates an `.sdsx` file. This file represents the shared data source definition that you can open directly in the designer for further configuration. + + ![Creating a SDSX file ><](images/CreatingSdsxFile.png) + +To view all existing Shared Data Sources, open the [Assets Manager]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/shared-resources%}#assets-manager) from the main menu. + + ![Use Assets Manager to view your Shared Data Sources ><](images/AllSharedDataSources.png) + +The next video demonstrates how to create a Shared Data Source from an existing report. + + + +## Differences between Shared Data Source and Data Source + +In the Web Report Designer, both Data Source and Shared Data Source are used to define connections to external data. However, they differ in scope, usage, and maintainability. + +| Data Source | Shared Data Source | +| ------ | ------ | +| Defined within a single report | Defined outside of individual reports and stored as an `.sdsx` filee | +| Cannot be reused across other reports | Can be reused across multiple reports | +| Changes to the data source affect only the report where it is defined | Changes to the shared data source affect all reports that reference it | +| Suitable for simple or one-off reports | Ideal for centralized data management and large-scale reporting solutions | + +## See Also + +* [Web Report Designer User Guide: An Overview]({%slug user-guide/overview%}) +* [App Tour of the Web Report Designer]({%slug user-guide/app-tour%}) +* [Create a Simple Report]({%slug web-report-designer-user-guide-getting-started%}) diff --git a/user-guide/workspace-preferences.md b/user-guide/workspace-preferences.md new file mode 100644 index 000000000..d137d4556 --- /dev/null +++ b/user-guide/workspace-preferences.md @@ -0,0 +1,58 @@ +--- +title: Configuring the User Preferences +page_title: Web Report Designer - Workspace Preferences +description: The Workspace Preferences section is designed to let users customize the look and behavior of their design environment for better productivity and comfort. +slug: web-report-designer-user-guide-workspace-preferences +tags: web, report, design, workspace, settings, preferences +published: True +position: 9 +--- + +# Configuring the User Preferences in Web Report Designer + +The **Workspace Preferences** provide options for personalizing the Web Report Designer interface without affecting the actual report content. These settings are user-specific and typically stored in the browser. + +Workspace Preferences + +To open the **Preferences** panel: + +1. Open the Web Report Designer in your browser. + +1. Click the **Main Menu** at the top left corner. + +1. Select **Workspace Preferences** from the menu options: + + Workspace Preferences + +The Workspace Preferences are split into two categories: +* [Snapping](#snapping)—this category lists the options related to the automatic alignment of objects on the design surface of the Web Report Designer. +* [General](#general)—this category list options related to the behavior of the Web Report Designer. + +## Snapping + +Snapping is a feature that detects alignment opportunities while designing the report. You can configure the following snapping options: + +* **Snap to grid lines** (*Currently Not Supported*)—When enabled and you move or resize report items (like TextBoxes, Tables, Charts) on the design surface, their edges automatically align to the nearest grid line on the underlying grid system. When disabled, you can freely position items without restrictions. + + + * Moving an item makes it jump to the nearest grid intersection. + * Resizing an item makes its edges align with the grid lines. + + +* **Snap to snap lines**—Helps you position elements relative to each other (for example, aligning TextBoxes, Charts, or Tables). Snap lines appear temporarily as you drag items and they are based on the edges or centers of nearby items. + +Snap to snap lines + + +>tip Snap to grid uses a static grid on the canvas, while snap lines are dynamic and context-sensitive, appearing only when items are close enough. + +## General + + +* **Preserve open reports on exit**—Controls whether the designer remembers which reports were open when you closed the application and automatically restores them at the next launch. + +* **Collect non-personal usage data**—Controls whether to collect non-personal usage data. The data contains usage information about the software's screens and tools and is being used to improve its functionality. + +## See Also + +* [Web Report Designer]({%slug user-guide/overview%})