EnVisageOnline/Main/Source/EnVisage/Views/Reporting/Index.cshtml

@using EnVisage.Code
@using Telerik.ReportViewer.Mvc
@using Telerik.Reporting
@model System.Type
@{
    ViewBag.Title = "Reports";
}
@section stylesheets
{
    @Styles.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_STYLES_KENDO_PATH, "kendo-reportstyles"))

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

@section scripts
{
    @Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "kendo-reporting"))
    @(Html.TelerikReporting().DeferredScripts())
    
    <script type="text/javascript">
        function createMultiSelectEditor(placeholder, options) {
            var dropDownElement = $(placeholder).html('<div></div>'),
                selectAllElement = $(placeholder).append('<a href="javascript"'),
                parameter,
                valueChangedCallback = options.parameterChanged,
                dropDownList;

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

            return {
                beginEdit: function (param) {
                    parameter = param;
                    //if (parameter.availableValues.length > 0)
                    //    parameter.availableValues.unshift({ name: "", value: "ALL" });

                    $(dropDownElement).kendoMultiSelect({
                        dataTextField: "name",
                        dataValueField: "value",
                        value: parameter.value,
                        dataSource: parameter.availableValues,
                        change: onChange,
                        select: function (e) {
                            var dataItem = this.dataSource.view()[e.item.index()];
                            var values = this.value();

                            if (dataItem.value === "ALL") {
                                var selectedValues = "";
                                var strComma = "";
                                for (var i = 0; i < this.dataSource.data().length; i++) {
                                    var item = this.dataSource.data()[i];
                                    selectedValues += strComma + item.value;
                                    strComma = ",";
                                }
                                this.value(selectedValues.split(","));
                            }
                            else if (values.indexOf("ALL") !== -1) {
                                values = $.grep(values, function (value) {
                                    return value !== "ALL";
                                });
                                this.value(values);
                            }
                        }
                    });
                    dropDownList = $(dropDownElement).data("kendoMultiSelect");
                }
            };
        }


        function createSingleSelectEditor(placeholder, options) {
            var dropDownElement = $(placeholder).html('<div></div>');
            var parameter,
                  valueChangedCallback = options.parameterChanged,
                  dropDownList;

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

            return {
                beginEdit: function (param) {

                    parameter = param;

                    $(dropDownElement).kendoDropDownList({
                        dataTextField: "name",
                        dataValueField: "value",
                        value: parameter.value,
                        dataSource: parameter.availableValues,
                        change: onChange
                    });

                    dropDownList = $(dropDownElement).data("kendoDropDownList");
                }
            };
        }

        function buildFilters(dataItems) {
            var filters = [];
            var length = dataItems.length;
            var per;
            var idx = 0;
            for (; idx < length; idx++) {
                per = parseInt(dataItems[idx].value);

                //if (!isNaN(supplierID)) {
                filters.push({
                    field: "Per",
                    operator: "eq",
                    value: per
                });
                //}
            }
            return filters;
        }

        function rptError(e, args) {
            args = args.replace(/Error creating report instance \(.*?\).<br\/>Missing or invalid parameter value. Please input valid data for all parameters./gi, "Please enter valid filter parameters");

            $("#reportViewer1").find(".trv-error-message").html(args);
        }

    </script>
}

<div class="container-fluid" id="team-container">
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-white panel-compact">
                <div class='panel-body' style="overflow:auto">
                    @(Html.TelerikReporting().ReportViewer()
        // Each report viewer must have an id - it will be used by the initialization script
        // to find the element and initialize the report viewer.
        .Id("reportViewer1")
        // The URL of the service which will serve reports.
        // The URL corresponds to the name of the controller class (ReportsController).
        // For more information on how to configure the service please check http://www.telerik.com/help/reporting/telerik-reporting-rest-conception.html.
        .ServiceUrl(Url.Content("/api/reports/"))
        // The URL for custom report viewer template. The template can be edited -
        // new functionalities can be added and unneeded ones can be removed.
        // For more information please check http://www.telerik.com/help/reporting/html5-report-viewer-templates.html.
        // .TemplateUrl(Url.Content("/ReportViewer/templates/telerikReportViewerTemplate-10.0.16.113.html"))
        // Strongly typed ReportSource - TypeReportSource or UriReportSource.
        .ReportSource(new TypeReportSource() { TypeName = Model.AssemblyQualifiedName })
        // Specifies whether the viewer is in interactive or print preview mode.
        // PrintPreview - Displays the paginated report as if it is printed on paper. Interactivity is not enabled.
        // Interactive - Displays the report in its original width and height with no paging. Additionally interactivity is enabled.
        .ViewMode(ViewMode.Interactive)
        // Sets the scale mode of the viewer.
        // Three modes exist currently:
        // FitPage - The whole report will fit on the page (will zoom in or out), regardless of its width and height.
        // FitPageWidth - The report will be zoomed in or out so that the width of the screen and the width of the report match.
        // Specific - Uses the scale to zoom in and out the report.
        .ScaleMode(ScaleMode.Specific)
        // Zoom in and out the report using the scale
        // 1.0 is equal to 100%, i.e. the original size of the report
        .Scale(1.0)
        // Sets whether the viewer’s client session to be persisted between the page’s refreshes(ex. postback).
        // The session is stored in the browser’s sessionStorage and is available for the duration of the page session.
        .PersistSession(false)
        .ParametersAreaVisible(true)
        // Sets the print mode of the viewer.
        .PrintMode(PrintMode.AutoSelect)
        .Deferred()
        .ParameterEditors(editors => editors.MultiSelectEditor("createMultiSelectEditor"))
        .ParameterEditors(editors => editors.SingleSelectEditor("createSingleSelectEditor"))
        .ClientEvents(e => e.Error("rptError"))
                    )

                </div>
            </div>
        </div>
    </div>
</div>