@using Telerik.Reporting
@using Telerik.ReportViewer.Mvc

@{
    ViewBag.Title = "Sample Report";
}

@section styles {

    <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.blueopal.min.css" rel="stylesheet" />

    <style>
        #reportViewer1 {
            position: relative;
            width: 1300px;
            height: 900px;
            font-family: Verdana, Arial;
        }
    </style>
}

@section scripts {
    <!--If Kendo is used it should be added before the report viewer.-->
    <script src="@Url.Content("~/api/reports/resources/js/telerikReportViewer-14.1.20.618.min.js/")"></script>
    
    <!-- Custom Editors -->
    <script>
        function createSingleSelectEditor(placeholder, options) {
            var comboboxElement = $(placeholder).html('<div></div>');
            var parameter,
                valueChangedCallback = options.parameterChanged,
                combobox;

            function onChange() {
                var val = combobox.value();
                valueChangedCallback(parameter, val);
            }

            return {
                beginEdit: function (param) {

                    parameter = param;

                    $(comboboxElement).kendoComboBox({
                        autoWidth: true,
                        dataTextField: "name",
                        dataValueField: "value",
                        value: parameter.value,
                        dataSource: parameter.availableValues,
                        change: onChange
                    });

                    combobox = $(comboboxElement).data("kendoComboBox");
                }
            };
        }

        function createMultiSelectEditor(placeholder, options) {
            var multiSelectElement = $(placeholder).html('<div></div>');
            var parameter,
                valueChangedCallback = options.parameterChanged,
                multiSelect;

            function onChange() {
                var val = multiSelect.value();
                valueChangedCallback(parameter, val);
            }

            return {
                beginEdit: function (param) {

                    parameter = param;

                    $(multiSelectElement).kendoMultiSelect({
                        autoWidth: true,
                        dataTextField: "name",
                        dataValueField: "value",
                        value: parameter.value,
                        dataSource: parameter.availableValues,
                        change: onChange
                    });

                    multiSelect = $(multiSelectElement).data("kendoMultiSelect");
                }
            };
        }

    </script>

}

@(Html.TelerikReporting().ReportViewer()
        .Id("reportViewer1")
        .ServiceUrl(Url.Content("~/api/reports"))
        .ReportSource(new UriReportSource() { Uri = "SampleReport.trdp" })
        .ViewMode(ViewMode.Interactive)
        .ScaleMode(ScaleMode.Specific)
        .Scale(1.0)
        .PersistSession(false)
        .PrintMode(PrintMode.AutoSelect)
        .SendEmail(new SendEmail { Enabled = false })
        .EnableAccessibility(false)
        .ParameterEditors(
            editors => editors
                .SingleSelectEditor("createSingleSelectEditor")
                .MultiSelectEditor("createMultiSelectEditor")
        )
)