10000 Update how-to-create-a-custom-parameter-editor.md · telerik/reporting-docs@3e33987 · GitHub
[go: up one dir, main page]
Skip to content

Commit 3e33987

Browse files
todorarabadzhievtodorarabadzhiev
authored
Update how-to-create-a-custom-parameter-editor.md
1 parent b025d41 commit 3e33987

File tree

1 file changed

+9
-55
lines changed

1 file changed

+9
-55
lines changed

‎embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-create-a-custom-parameter-editor.md

Lines changed: 9 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -13,72 +13,26 @@ position: 4
1313
The article elaborates on how to change the default editors for visible parameters in the Blazor Report Viewer's Parameters Area.
1414

1515
Custom parameter editors are defined through the `ParameterEditors` ([Report Viewer Initialization]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/report-viewer-initialization%})) array of `ParameterEditor` objects passed as an option when creating the report viewer widget.
16-
Each object represents a parameter editor factory for creating editors suitable to edit a specific report parameter configuration.
16+
Each object represents a parameter editor factory for creating editors suitable for editing a specific report parameter configuration.
1717

18-
Each editor is a `ParameterEditor` instance which contains two string properties: `Match` and `CreateEditor`. These strings should point to a global JS variable defined on the [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) object. This variable should have a _match_ and _createEditor_ javascript methods.
18+
Each editor is a `ParameterEditor` instance, which contains two string properties: `Match` and `CreateEditor`. These strings should point to a global JS variable defined on the [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) object. This variable should have a _match_ and _createEditor_ JavaScript methods.
1919

20-
The `match` method accepts a report parameter to be edited as an argument and returns a boolean value which indicates whether the parameter editor is suitable for this parameter. The parameter variable exposes the properties of the report parameter like name, *allowNull*, *availableValues*, *multiValue*, *type*, etc.
20+
The `match` method accepts a report parameter to be edited as an argument and returns a boolean value that indicates whether the parameter editor is suitable for this parameter. The parameter variable exposes the properties of the report parameter like name, *allowNull*, *availableValues*, *multiValue*, *type*, etc.
2121

22-
The main work for creating and utilizing the parameter editor is done in the `createEditor` method. Its purpose is to create the parameter editor UI and wire it to the `parameterChanged` callback when a new value is selected. The returned result is a new object containing the `beginEdit` method which is the entry point for creating the editor from the viewer.
22+
The main work for creating and utilizing the parameter editor is done in the `createEditor` method. Its purpose is to create the parameter editor UI and wire it to the `parameterChanged` callback when a new value is selected. The returned result is a new object containing the `beginEdit` method, which is the entry point for creating the editor from the viewer.
2323

24-
This global variable with the _match_ and _createEditor_ methods can be initialized in `\_Host.cshtml/\_Layout.cshtml` for the Blazor Server project and for Blazor WebAssembly can be used in the `wwwroot/index.html` file.
24+
This global variable with the _match_ and _createEditor_ methods can be initialized in `\_Host.cshtml/\_Layout.cshtml` for the Blazor Server project, and for Blazor WebAssembly, can be used in the `wwwroot/index.html` file.
2525

26-
The following example uses the **Dashboard** example report that we ship with the installation of Telerik Reporting and illustrates how to use the [Kendo DropDownList](https://demos.telerik.com/kendo-ui/dropdownlist/index) widget for a single parameter value parameter editor which also has available values:
26+
The following example uses the **Dashboard** example report that we ship with the installation of Telerik Reporting and illustrates how to use the [Kendo DropDownList](https://demos.telerik.com/kendo-ui/dropdownlist/index) widget for a single parameter value parameter editor, which also has available values:
2727

2828
- In **\_Host.cshtml**
2929

30-
````HTML
31-
<!--Kendo all is needed for the DropDownList widget itself-->
32-
<script src="https://kendo.cdn.telerik.com/{{kendosubsetversion}}/js/kendo.all.min.js"></script>
33-
34-
<script>
35-
window.trvParameterEditors = {
36-
37-
matchFunction: function (parameter) {
38-
return Boolean(parameter.availableValues) && !parameter.multivalue;
39-
},
40-
41-
createEditorFunction: function createEditorFunction(placeholder, options) {
42-
43-
let dropDownListElement = $(placeholder).html('<input style="width: 50px;" />');
44-
let valueChangedCallback = options.parameterChanged;
45-
let parameter;
46-
47-
function onChange(e) {
48-
var years = $(dropDownListElement).data("kendoDropDownList");
49-
var val = years.value();
50-
valueChangedCallback(parameter, val);
51-
}
52-
53-
return {
54-
beginEdit: function (param) {
55-
parameter = param;
56-
57-
$(dropDownListElement).kendoDropDownList({
58-
dataSource: param.availableValues.map((el) => el.value),
59-
change: onChange
60-
});
61-
62-
dropDownList = $(dropDownListElement).data("kendoDropDownList");
63-
}
64-
};
65-
}
66-
}
67-
</script>
68-
````
30+
{{source=CodeSnippets\BlazorAppSnippets\Components\Shared\_CustomParameterEditor_Host.cshtml}}
6931

7032
- Then in the Blazor Report Viewer Initialization:
7133

72-
````CSHTML
73-
<ReportViewer @ref="reportViewer1"
74-
ViewerId="rv1"
75-
ServiceUrl="/api/reports"
76-
ReportSource="@(new ReportSourceOptions
77-
{
78-
Report = "Dashboard.trdp",
79-
})"
80-
ParameterEditors="@(new ParameterEditor[] { new ParameterEditor() { CreateEditor = "trvParameterEditors.createEditorFunction", Match = "trvParameterEditors.matchFunction" } })"
81-
````
34+
{{source=CodeSnippets\BlazorAppSnippets\Components\Shared\_CustomParameterEditor_Viewer.cshtml}}
35+
8236

8337
## See Also
8438

0 commit comments

Comments
 (0)
0