Designer.cshtml

@using ReportWizardCustomizationServiceAspNetCoreExample.Models
@model ReportDesignerCustomModel

@{
    var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
        .Height("100%")
        .ClientSideEvents((events) => {
            events.CustomizeWizard("CustomizeReportWizard");
        })
        .Bind(Model.ReportDesignerModel);
    @designerRender.RenderHtml()
}

@section Scripts {
    <link href="~/css/dx-reporting-skeleton-screen.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/viewer.part.bundle.css" />
    <link rel="stylesheet" href="~/css/designer.part.bundle.css" />
    <link rel="stylesheet" href="~/css/ace/ace.bundle.css" />
    <link rel="stylesheet" href="~/css/dx.material.blue.light.bundle.css" />

    <script src="~/js/reporting.thirdparty.bundle.js"></script>
    <script src="~/js/viewer.part.bundle.js"></script>
    <script src="~/js/designer.part.bundle.js"></script>
    <script src="~/js/reportWizardCustomization.js"></script>

    <script type="text/html" id="instant-report">
        <svg viewBox="-2 -5 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="Layer_1" transform="translate(-2, -5)" style="enable-background:new 0 0 32 32">
            <g id="Check">
              <polygon class="dxd-icon-fill" points="27,5 11,21 5,15 2,18 11,27 30,8  " fill="#727272" />
            </g>
          </g>
        </svg>
    </script>

    <script type="text/html" id="wizard-labels-page">
            <div class="dxrd-wizard-type-page dxrd-wizard-type-page-labels">
                <div class="page-title">Custom Wizard Page</div>
                <div class="dx-fieldset">
                    <div class="dx-field">
                        <div class="dx-field-label">Report Name</div>
                        <div class="dx-field-value">
                            <div data-bind="dxTextBox: { value: label4Value }"></div>
                        </div>
                    </div>
                    <div class="dx-field">
                        <div class="dx-field-label">Label1: </div>
                        <div class="dx-field-value">
                            <div data-bind="dxTextBox: { value: label1Value }"></div>
                        </div>
                    </div>
                    <div class="dx-field">
                        <div class="dx-field-label">Label2: </div>
                        <div class="dx-field-value">
                            <div data-bind="dxTextBox: { value: label2Value }"></div>
                        </div>
                    </div>
                    <div class="dx-field">
                        <div class="dx-field-label">Label3: </div>
                        <div class="dx-field-value">
                            <div data-bind="dxTextBox: { value: label3Value }"></div>
                        </div>
                    </div>
                </div>
            </div>
    </script>


    <link href="~/css/reportWizardCustomization.css" rel="stylesheet" />

    @designerRender.RenderScripts()
}