10000 Update how-to-pass-values-to-report-parameters.md · telerik/reporting-docs@9128907 · GitHub
[go: up one dir, main page]
Skip to content

Commit 9128907

Browse files
todorarabadzhievtodorarabadzhiev
authored
Update how-to-pass-values-to-report-parameters.md
1 parent 239aa9f commit 9128907

File tree

1 file changed

+6
-106
lines changed

1 file changed

+6
-106
lines changed

‎embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/how-to-pass-values-to-report-parameters.md

Lines changed: 6 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -22,127 +22,27 @@ To give an example, we will use the Invoice report from our examples and will up
2222
1. Add a new html page `CustomParameters.html` to the _CSharp.Html5Demo_ or _VB.Html5Demo_ project.
2323
1. Add the references to all required JavaScript libraries and stylesheets:
2424

25-
{{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\customize\AddRequiredSriptsAndStyles.html}}
25+
{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\AddRequiredSriptsAndStyles.html}}
2626

2727
1. Add the custom parameter UI - a dropdown selector with a few values:
2828

29-
````HTML
30-
<div id="invoiceIdSelector">
31-
<label for="invoiceId">Invoices</label>
32-
<select id="invoiceId" title="Select the Invoice ID">
33-
<option value="SO51081">SO51081</option>
34-
<option value="SO51082" selected="selected">SO51082</option>
35-
<option value="SO51083">SO51083</option>
36-
</select>
37-
</div>
38-
````
39-
29+
{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\AddCustomDropDown.html}}
4030

4131
1. Add the ReportViewer placeholder
4232

43-
````HTML
44-
<div id="reportViewer1">
45-
loading...
46-
</div>
47-
````
48-
33+
{{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\AddTrvPlaceHolder.html}}
4934

5035
1. Now, initialize the report viewer. We will use the minimal set of all [possible options]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/report-viewer-initialization%}). Please note how the value from the custom UI is used to set the __OrderNumber__ report parameter initially:
5136

52-
````JavaScript
53-
$(document).ready(function () {
54-
$("#reportViewer1").telerik_ReportViewer({
55-
serviceUrl: "api/reports/",
56-
reportSource: {
57-
report: "Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary",
58-
parameters: { OrderNumber: $('#invoiceId option:selected').val() }
59-
},
60-
ready: function () {
61-
//this.refreshReport();
62-
}
63-
});
64-
});
65-
````
66-
37+
{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\TrvInitialize.js}}
6738

6839
1. Add code that updates the ReportSource parameters collection with the selected __Invoice Id__ from the dropdown box:
6940

70-
````JavaScript
71-
$('#invoiceId').change(function () {
72-
var viewer = $("#reportViewer1").data("telerik_ReportViewer");
73-
viewer.reportSource({
74-
report: viewer.reportSource().report,
75-
parameters: { OrderNumber: $(this).val() }
76-
});
77-
//Setting the HTML5 Viewer's reportSource causes a refresh automatically
78-
//if you need to force a refresh for other cases, use:
79-
//viewer.refreshReport();
80-
});
81-
````
82-
41+
{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\UpdateReportSource.js}}
8342

8443
1. The HTML page that we have just created should look like this:
8544

86-
````HTML
87-
<!DOCTYPE html>
88-
<html xmlns="http://www.w3.org/1999/xhtml">
89-
<head>
90-
<title>Telerik HTML5 Report Viewer Demo With Custom Parameter</title>
91-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
92-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
93-
<link href="https://kendo.cdn.telerik.com/{{kendosubsetversion}}/styles/kendo.common.min.css" rel="stylesheet" />
94-
<link href="https://kendo.cdn.telerik.com/{{kendosubsetversion}}/styles/kendo.blueopal.min.css" rel="stylesheet" />
95-
<script src="/ReportViewer/js/telerikReportViewer.kendo.{{buildversion}}.min.js"></script>
96-
<script src="ReportViewer/js/telerikReportViewer-{{buildversion}}.min.js"></script>
97-
<style>
98-
#reportViewer1 {
99-
position: absolute;
100-
left: 5px;
101-
right: 5px;
102-
top: 40px;
103-
bottom: 5px;
104-
overflow: hidden;
105-
font-family: Verdana, Arial;
106-
}
107-
</style>
108-
</head>
109-
<body>
110-
<div id="invoiceIdSelector">
111-
<label for="invoiceId">Invoices</label>
112-
<select id="invoiceId" title="Select the Invoice ID">
113-
<option value="SO51081">SO51081</option>
114-
<option value="SO51082" selected="selected">SO51082</option>
115-
<option value="SO51083">SO51083</option>
116-
</select>
117-
</div>
118-
<div id="reportViewer1">
119-
loading...
120-
</div>
121-
<script type="text/javascript">
122-
$(document).ready(function () {
123-
$("#reportViewer1").telerik_ReportViewer({
124-
serviceUrl: "api/reports/",
125-
reportSource: {
126-
report: "Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary",
127-
parameters: { OrderNumber: $('#invoiceId option:selected').val() }
128-
},
129-
});
130-
});
131-
$('#invoiceId').change(function () {
132-
var viewer = $("#reportViewer1").data("telerik_ReportViewer");
133-
viewer.reportSource({
134-
report: viewer.reportSource().report,
135-
parameters: { OrderNumber: $(this).val() }
136-
});
137-
//Setting the HTML5 Viewer's reportSource causes a refresh automatically
138-
//if you need to force a refresh for other cases, use:
139-
//viewer.refreshReport();
140-
});
141-
</script>
142-
</body>
143-
</html>
144-
````
145-
45+
{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\CustomPage-01.html}}
14646

14747
1. Run the project and verify that the __Invoice Id__ selection really updates the report.
14848

0 commit comments

Comments
 (0)
0