declare class ASPxClientReportDesigner extends ASPxClientControl

AddParameterType(
    parameterInfo: DevExpress.Reporting.Designer.Data.IParameterType,
    editorOptions: DevExpress.Analytics.Utils.IEditorInfo
): void

<script type="text/javascript" id="script">
    function init(s) {
        // Specify settings of a parameter type to be registered.
        var parameterInfo = {
            value: "System.Custom",
            displayValue: "Custom Integer",
            defaultValue: 0,
            specifics: "integer",
            valueConverter: function (val) {
                return parseInt(val);
            }
        };

        // Obtain a standard parameter editor for the specified type.
        var parameterEditor = s.GetParameterEditor("System.Int64")

        // Register a custom parameter type.
        s.AddParameterType(parameterInfo, parameterEditor);

        // Remove an existing parameter type.
        s.RemoveParameterType("System.DateTime");
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ClientInstanceName="designer">
     <ClientSideEvents Init="init"/>
</dx:ASPxReportDesigner>

AddToPropertyGrid(
    groupName: string,
    property: DevExpress.Analytics.Utils.ISerializationInfo
): void

static Cast(
    obj: any
): ASPxClientReportDesigner

CloseCurrentTab(): void

CloseTab(
    tab: DevExpress.Reporting.Designer.Tools.NavigateTab,
    force?: boolean
): void

function CloseSecondTab() {
        var tabs = reportDesigner.GetTabs();
        reportDesigner.CloseTab(tabs[1]);
    }

    function ForceCloseSecondTab() {
        var tabs = reportDesigner.GetTabs();
        reportDesigner.CloseTab(tabs[1], true);
    }
    function CloseCurrentTab() {
        reportDesigner.CloseCurrentTab();
    }

GetButtonStorage(): any

<script type="text/javascript" id="script">
    function newReport() {
        reportDesigner.GetButtonStorage()DevExpress.Reporting.Designer.Actions.ActionId.NewReport;
    }

    function saveReport() {
        reportDesigner.GetButtonStorage()DevExpress.Reporting.Designer.Actions.ActionId.SaveAs;
    }

    function openReport() {
        reportDesigner.GetButtonStorage()DevExpress.Reporting.Designer.Actions.ActionId.OpenReport;
    }
</script>

<div style="border: 1px solid black" onclick="newReport()">New Report</div>
<div style="border: 1px solid black" onclick="saveReport()">Save Report</div>
<div style="border: 1px solid black" onclick="openReport()">Open Report</div>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ClientInstanceName="reportDesigner">      
</dx:ASPxReportDesigner>

GetCurrentTab(): DevExpress.Reporting.Designer.Tools.NavigateTab

<script type="text/javascript">       
    function Refresh() {
        var tab = reportDesigner.GetCurrentTab();
        tab.refresh();
    }
</script>

<div onclick="Refresh()">Refresh</div>
<dx:ASPxReportDesigner ID="ASPxReportDesigner1" ClientInstanceName="reportDesigner" runat="server" />

GetDesignerModel(): any

<script type="text/javascript">
    function onInit(s, e) {
        s.GetDesignerModel().updateFont({ 'Arial Unicode MS': 'Arial Unicode MS' });
        var fonts = DevExpress.Analytics.Widgets.Internal.availableFonts();
        delete fonts['Arial'];
    }
</script>
<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">
    <ClientSideEvents Init ="onInit" /> 
</dx:ASPxReportDesigner>

<script type="text/javascript">
    function onInit(s, e) {
        s.GetDesignerModel().updateFont({ 'Arial Unicode MS': 'Arial Unicode MS' });
        var fonts = DevExpress.Analytics.Widgets.Internal.availableFonts();
        delete fonts['Arial'];
    }
</script>

@Html.DevExpress().ReportDesigner(settings => {
    settings.Name = "ReportDesigner1";
    settings.ClientSideEvents.Init = "onInit";
}).BindToUrl("TestReport").GetHtml()

GetJsonReportModel(): string

GetParameterEditor(
    parameterType: string
): DevExpress.Analytics.Utils.IEditorInfo

GetParameterInfo(
    parameterType: string
): DevExpress.Reporting.Designer.Data.IParameterType

GetPreviewModel(): DevExpress.Reporting.Viewer.Utils.IPreviewModel

<script type="text/javascript" id="script">
    function previewParametersReset(s, e) {
        var preview = s.GetPreviewModel();
        if (preview) {
            preview.tabPanel.collapsed(true);
        }
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">      
    <ClientSideEvents PreviewParametersReset="previewParametersReset"/>  
</dx:ASPxReportDesigner>

GetPropertyInfo(
    controlType: string,
    path: string | string[]
): DevExpress.Analytics.Utils.ISerializationInfo

<script type="text/javascript" id="script">
function init(s, e) {
  // Get the property of the XtraReport class with the "Border Color" display name.
  var info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "Border Color");
  // Disable the property's editor if its default value is "Black".
  if (info.defaultVal == "Black") info.disabled = true;

  // Get the XtraReport's property that is located in the "Watermark" section and has the "Image Alignment" display name.
  info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", ["Watermark", "Image Alignment"]);
  // Hide the property in the Property panel.
  info.visible = false;

  // Get the XtraReport.DrawWatermark property.
  info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "DrawWatermark");
  info.visible = false;

  // Get the Separator property (found in the XtraReport.ExportOptions.Csv.Separator path).
  info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "ExportOptions.Csv.Separator");
  info.visible = false;

  // Get the property of the XRLabel class with the "Can Grow" display name.
  info = s.GetPropertyInfo("XRLabel", "Can Grow");
  info.disabled = true;

  // Hide the Edit Options section (the XRLabel.EditOptions property) in the XRLabel's property panel.
  info = s.GetPropertyInfo("XRLabel", "EditOptions");
  info.visible = false;
}
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">        
    <ClientSideEvents Init="init"/> 
</dx:ASPxReportDesigner>

<script type="text/javascript" id="script">
function init(s, e) {
  // Get the property of the XtraReport class with the "Border Color" display name.
  var info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "Border Color");
  // Disable the property's editor if its default value is "Black".
  if (info.defaultVal == "Black") info.disabled = true;

    // Get the XtraReport's property that is located in the "Watermark" section and has the "Image Alignment" display name.
  info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", ["Watermark", "Image Alignment"]);
  // Hide the property in the Property panel.
  info.visible = false;

  // Get the XtraReport.DrawWatermark property.
  info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "DrawWatermark");
  info.visible = false;

  // Get the Separator property (found in the XtraReport.ExportOptions.Csv.Separator path).
  info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "ExportOptions.Csv.Separator");
  info.visible = false;

  // Get the property of the XRLabel class with the "Can Grow" display name.
  info = s.GetPropertyInfo("XRLabel", "Can Grow");
  info.disabled = true;

  // Hide the Edit Options section (the XRLabel.EditOptions property) in the XRLabel's property panel.
  info = s.GetPropertyInfo("XRLabel", "EditOptions");
  info.visible = false;
}
</script>

@Html.DevExpress().ReportDesigner(settings => {
    settings.Name = "ReportDesigner1";
    settings.ClientSideEvents.Init = "init";
}).BindToUrl("TestReport").GetHtml()

GetTabs(): DevExpress.Reporting.Designer.Tools.NavigateTab[]

<script type="text/javascript">
    function CloseSecondTab() {
        var tabs = reportDesigner.GetTabs();
        reportDesigner.CloseTab(tabs[1]);
    }
</script>

<div onclick="CloseSecondTab()">Close the Second Tab</div>
<dx:ASPxReportDesigner ID="ASPxReportDesigner1" ClientInstanceName="reportDesigner" runat="server"/>

IsModified(): boolean

OpenReport(
    url: string
): void

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        function OnClick(s, e) {
            WebReportDesigner1.OpenReport("XtraReport1");
        }
    </script>
    <dx:ASPxButton ID="ASPxButton1" runat="server" Text="Open Report" AutoPostBack="False">
        <ClientSideEvents Click="OnClick" />
    </dx:ASPxButton>
    <dx:ASPxReportDesigner ClientInstanceName="WebReportDesigner1" ID="ASPxReportDesigner1" runat="server">
    </dx:ASPxReportDesigner>
</asp:Content>

<script type="text/javascript">
    function OnClick(s, e) {
        ReportDesigner1.OpenReport("XtraReport1");
    }
</script>

@Html.DevExpress().Button(settings =>
{
    settings.Name = "testButton";
    settings.Text = "Open Report";
    settings.ClientSideEvents.Click = "OnClick";
}).GetHtml()

@Html.DevExpress().ReportDesigner(settings =>
{
    settings.Name = "ReportDesigner1";
}).BindToUrl("TestReport").GetHtml()

PerformCallback(
    arg: string,
    onSuccess?: (arg: string) => void
): void

RemoveParameterType(
    parameterType: string
): void

<script type="text/javascript" id="script">
    function init(s) {
        // Remove a date-time parameter type.
        s.RemoveParameterType("System.DateTime");
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ClientInstanceName="designer">
     <ClientSideEvents Init="init"/>
</dx:ASPxReportDesigner>

ReportStorageGetData(
    url: string
): JQueryPromise<any>

ReportStorageGetUrls(): JQueryPromise<any>

ReportStorageSetData(
    reportLayout: string,
    url: string
): JQueryPromise<any>

ReportStorageSetNewData(
    reportLayout: string,
    url: string
): JQueryPromise<any>

ResetIsModified(): void

RunWizard(
    wizardRunType: DevExpress.Reporting.Designer.Wizard.WizardRunType
): void

<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Run Wizard" AutoPostBack="False">
    <ClientSideEvents Click="function(s, e) { Designer.RunWizard('NewViaReportWizard');}" />
</dx:ASPxButton>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ClientInstanceName="Designer">
</dx:ASPxReportDesigner>

SaveNewReport(
    reportName: string
): JQueryPromise<any>

SaveReport(): JQueryPromise<any>

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        function OnClick(s, e) {
            WebReportDesigner1.SaveReport();
        }
    </script>
    <dx:ASPxButton ID="ASPxButton1" runat="server" Text="Save" AutoPostBack="False">
        <ClientSideEvents Click="OnClick" />
    </dx:ASPxButton>
    <dx:ASPxReportDesigner ClientInstanceName="WebReportDesigner1" ID="ASPxReportDesigner1" runat="server">
    </dx:ASPxReportDesigner>
</asp:Content>

<script type="text/javascript">
    function OnClick(s, e) {
        ReportDesigner1.SaveReport();
    }
</script>

@Html.DevExpress().Button(settings =>
{
    settings.Name = "testButton";
    settings.Text = "Save";
    settings.ClientSideEvents.Click = "OnClick";
}).GetHtml()

@Html.DevExpress().ReportDesigner(settings =>
{
    settings.Name = "ReportDesigner1";
}).BindToUrl("TestReport").GetHtml()

ShowPreview(): void

UpdateLocalization(localization: { [key: string]: string; }): void

<script type="text/javascript" id="script"> 
    function customizeLocalization(s) {
        s.UpdateLocalization({
            'Properties': 'Eigenschaften',
            'Data Source': 'Datenquelle',
            'Data Member': 'Datenelement'
        });
    }
</script> 

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" >     
    <ClientSideEvents CustomizeLocalization="customizeLocalization" />
</dx:ASPxReportDesigner>

BeforeRender: ASPxClientEvent<ASPxClientReportDesignerBeforeRenderEventHandler<ASPxClientReportDesigner>>

BeginCallback: ASPxClientEvent<ASPxClientBeginCallbackEventHandler<ASPxClientReportDesigner>>

CallbackError: ASPxClientEvent<ASPxClientCallbackErrorEventHandler<ASPxClientReportDesigner>>

ComponentAdded: ASPxClientEvent<ASPxClientReportDesignerComponentAddedEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function componentAdded(s, e) {
        var model = e.Model;
        if (model.controlType === "XRLabel") {
            model.text("Label");
            model.textAlignment("MiddleCenter");
            model.font("Calibri, 14.25pt, style=Bold, Underline, Strikeout");
        }
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">
    <ClientSideEvents ComponentAdded="componentAdded"/>
</dx:ASPxReportDesigner>

CustomizeElements: ASPxClientEvent<ASPxClientReportDesignerCustomizeElementsEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function customizeElements(s, e) {
        var toolbarPart = e.GetById(DevExpress.Reporting.Designer.Utils.ReportDesignerElements.Toolbar);
        var index = e.Elements.indexOf(toolbarPart);
        e.Elements.splice(index, 1);
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">        
    <ClientSideEvents CustomizeElements="customizeElements"/> 
</dx:ASPxReportDesigner>

CustomizeFieldListActions: ASPxClientEvent<ASPxClientReportDesignerCustomizeFieldListActionsEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript">
    function customizeFieldListActions(s, e) {           
        if (e.Item instanceof DevExpress.Reporting.Designer.Data.Parameter && e.Item.parameterName() === "parameter1") {
                var removeAction = e.Actions.filter(action => action.displayText() === "Remove parameter")[0];
            removeAction.visible = false;
        }
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" ClientInstanceName="reportDesigner" runat="server">
    <ClientSideEvents CustomizeFieldListActions="customizeFieldListActions"/>
</dx:ASPxReportDesigner>

CustomizeLocalization: ASPxClientEvent<ASPxClientReportDesignerCustomizeLocalizationEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script"> 
    function customizeLocalization(s) {
        s.UpdateLocalization({
            'Properties': 'Eigenschaften',
            'Data Source': 'Datenquelle',
            'Data Member': 'Datenelement'
        });
    }
</script> 

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" >     
    <ClientSideEvents CustomizeLocalization="customizeLocalization" />
</dx:ASPxReportDesigner>

CustomizeMenuActions: ASPxClientEvent<ASPxClientReportDesignerCustomizeMenuActionsEventHandler<ASPxClientReportDesigner>>

<script type="text/html" id="myIcon">
    <svg width="100px" height="100px" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50" style="fill: #FF8C00" />
    </svg>
</script>
<script type="text/javascript">
    function CustomizeMenuActions(s, e) {
        var actions = e.Actions;

        //Get the "Save" action and hide it
        var saveAction = e.GetById(DevExpress.Reporting.Designer.Actions.ActionId.Save);
        if (saveAction)
            saveAction.visible = false;

        //Add a new action
        actions.splice(6,0,{
            text: "Custom Command",
            imageTemplateName: "myIcon",
            disabled: ko.observable(false),
            visible: true,
            hasSeparator: true,
            // The clickAction handler receives the client-side report model 
            // allowing you interact with the currently opened report on the client. 
            clickAction: function (report) {
                alert('Clicked');
            },
            hotKey: { ctrlKey: true, keyCode: "Z".charCodeAt(0) },
            container: "toolbar"
        });
    }
</script>

CustomizeOpenDialog: ASPxClientEvent<ASPxClientReportDesignerCustomizeOpenDialogEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function addReport(url, category, categoryArray, categoryName, reportName, value, koCategory) {
        if(category.length === 0) {
            categoryArray.push({
                key: categoryName, items: [
                    {
                        text: value.Key, displayName: reportName,
                        onClick: function () { url(value.Key); koCategory && koCategory(categoryName); }
                    }
                ]
            });
        } else {
            category[0].items.push({
                text: value.Key, displayName: reportName,
                onClick: function () { url(value.Key); koCategory && koCategory(categoryName); }
            });
        }
    }

    function updateCategories(url, categories, koCategory) {
        DevExpress.Reporting.Designer.ReportStorageWeb.getUrls().done(function(result) {
            var categoryArray = [{ key: "none", items: [] }];
            for(var i = 0; i < result.length; i++) {
                var parts = result[i].Value.split('\\');
                var folder = parts[0];
                var reportName = parts[1];
                if(parts.length === 1) {
                    reportName = parts[0];
                    folder = "none";
                } else if (parts.length > 2) {
                    reportName = parts.pop();
                    folder = parts.join('\\');
                }
                var category = categoryArray.filter(function(item) { return item.key === folder; });
                addReport(url, category, categoryArray, folder, reportName, result[i], koCategory);
            }
            categories(categoryArray);
        });
    }

    function customizeOpenDialog(s, e) {
        e.Popup.width("700px");
        e.Popup.height("476px");
        e.Popup.title = "Open";
        var categories = ko.observableArray([]);
        var koUrl = ko.observable("");
        var koInput = ko.observable("");
        updateCategories(koUrl, categories);

        var model = {
            categories: categories,
            reportUrl: koUrl,
            inputValue: koInput,
            setUrl: function(url) {
                koUrl(url);
            },
            getUrl: function() {
                return koUrl();
            },
            onShow: function(tab) {
                updateCategories(koUrl, categories);
            },
            popupButtons: [
                {
                    toolbar: 'bottom', location: 'after', widget: 'dxButton', options: {
                        text: 'Open', onClick: function() {
                            e.Popup.open(koUrl());
                        }
                    }
                },
                {
                    toolbar: 'bottom', location: 'after', widget: 'dxButton', options: {
                        text: 'Cancel', onClick: function() {
                            e.Popup.cancel();
                        }
                    }
                }
            ]
        }
        e.Customize("open", model)
    }
</script>
<style>
    .dxrd-reportdialog-content .reportdialog-item.dx-texteditor:not(.dx-multiline):not(.dx-textarea) {
        height: 36px;
        margin-bottom: 10px;
    }
</style>

<script type="text/html" id="open">
    <div class="dxrd-reportdialog-content">
        <div style="margin-bottom: 10px;" data-bind="dxTextBox: { height: 36, value: inputValue, 
             valueChangeEvent: 'keyup', placeholder: 'Enter text to search...', showClearButton: true }"></div>
        <div class="dx-default-border-style dxd-border-secondary" data-bind="dxList: {
                    dataSource: categories,
                    height: '260px',
                    grouped: true,
                    searchExpr: 'text',
                    searchValue: inputValue,
                    displayExpr: 'displayName',
                    keyExpr: 'text',
                    collapsibleGroups: true,
                }"></div>
    </div>
</script>

@Html.DevExpress().ReportDesigner(settings =>
{
    settings.Name = "ReportDesigner1";
    settings.ClientSideEvents.CustomizeOpenDialog = "customizeOpenDialog";
}).BindToUrl("Category1\Report1").GetHtml()

CustomizeParameterEditors: ASPxClientEvent<ASPxClientReportDesignerCustomizeParameterEditorsEventHandler<ASPxClientReportDesigner>>

<script type ="text/html" id="categoryID-custom-editor">
    <div data-bind="dxNumberBox: { value: value, showSpinButtons: true, min: 1, max: 8 }"> </div>
</script>

<script type="text/javascript">
    function CustomizeParameterEditors(s, e) {
      if (e.parameter.name == "categoryID") {
          e.info.editor = { header: 'categoryID-custom-editor' };
        }           
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server"> 
    <ClientSideEvents CustomizeParameterEditors="CustomizeParameterEditors" />
</dx:ASPxReportDesigner>

<script type ="text/html" id="categoryID-custom-editor">
    <div data-bind="dxNumberBox: { value: value, showSpinButtons: true, min: 1, max: 8 }"> </div>
</script>

<script type="text/javascript">
    function CustomizeParameterEditors(s, e) {
      if (e.parameter.type === 'System.DateTime') {
          e.info.editor = $.extend({}, e.info.editor);
          e.info.editor.extendedOptions = $.extend(e.info.editor.extendedOptions || {}, { type: 'date' });
      }         
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server"> 
    <ClientSideEvents CustomizeParameterEditors="CustomizeParameterEditors" />
</dx:ASPxReportDesigner>

CustomizeParameterLookUpSource: ASPxClientEvent<ASPxClientReportDesignerCustomizeParameterLookUpSourceEventHandler<ASPxClientReportDesigner>>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">
    <ClientSideEvents CustomizeParameterLookUpSource="function(s, e) {
        var sortRule = ['Produce', 'Meat/Poultry', 'Dairy Products',
            'Grains/Cereals', 'Seafood', 'Confections', 'Condiments', 'Beverages'];

        if(e.parameter.name == 'categoryName') {
            e.items.sort(function(a, b) { 
                if (sortRule.indexOf(a.value) > sortRule.indexOf(b.value)) {
                    return 1;
                }
                if (sortRule.indexOf(a.value) < sortRule.indexOf(b.value)) {
                    return -1;
                }
                return 0;
            });
            e.dataSource = new DevExpress.data.DataSource({ store: e.items});
        }
    }"/>
</dx:ASPxReportDesigner>

CustomizeParameterProperties: ASPxClientEvent<ASPxClientReportDesignerCustomizeParameterPropertiesEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript">
  function customizeParameterProperties(sender, args) {
    if (args.parameter) {
      args.editOptions.allowDelete = false;
    }    
  }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server"> 
    <ClientSideEvents CustomizeParameterProperties="customizeParameterProperties" />
</dx:ASPxReportDesigner>

<script type="text/javascript">
  function customizeParameterProperties(sender, args) {
      if (args.parameter) {
          const name = args.parameter.name;
          if (name === 'parameter1') {
              args.editOptions.allowDelete = false;
          }
      }    
  }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server"> 
    <ClientSideEvents CustomizeParameterProperties="customizeParameterProperties" />
</dx:ASPxReportDesigner>

<script type="text/javascript">
  function customizeParameterProperties(sender, args) {
    if (args.parameter) {
      const name = args.parameter.name;
        if (name === 'parameter1'){
        args.editors.forEach(i => {
            // Hide editors.
            i.visible = false;
            // Disable editors.
            //i.disabled = true;
        });
      }    
    }
  }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server"> 
    <ClientSideEvents CustomizeParameterProperties="customizeParameterProperties" />
</dx:ASPxReportDesigner>

<script type="text/javascript">
  function customizeParameterProperties(sender, args) {
    if (args.parameter) {
        const allowNullInfo = args.getEditor('allowNull');
        if (allowNullInfo) {
            // Hide the Allow null value checkbox.
            allowNullInfo.visible = false;
        }
        const name = args.parameter.name;
        if (name === 'parameter3') {
            const descriptionEditor = args.getEditor('description');
            if (descriptionEditor) {
                // Disable the Description editor.
                descriptionEditor.disabled = true;
            }
        }
    }
    if (args.parameterPanelLayoutItem.layoutItemType === 'Group') {
        const titleEditor = args.getEditor('title')
        // Disable the Title editor.
        titleEditor.disabled = true;
    }    
  }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server"> 
    <ClientSideEvents CustomizeParameterProperties="customizeParameterProperties" />
</dx:ASPxReportDesigner>

CustomizeSaveAsDialog: ASPxClientEvent<ASPxClientReportDesignerCustomizeSaveAsDialogEventHandler<ASPxClientReportDesigner>>

<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" />

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

<style>
    .dxrd-reportdialog-content .dx-list-collapsible-groups .dx-list-group:first-child .dx-list-group-header {
        display: none;
    }

    .dxrd-reportdialog-content .dx-list-collapsible-groups .dx-list-item {
        border-top: 0;
    }

    .dx-designer .dx-popup-bottom.dx-toolbar .dx-toolbar-items-container {
        margin-left: 6px;
    }
</style>

<script>
    function updateCategories(url, categories, koCategory) {
        DevExpress.Reporting.Designer.ReportStorageWeb.getUrls().done(function(result) {
            var categoryArray = [{ key: "", items: [] }];
            (result || []).forEach(function(reportItem) {
                var parts = reportItem.Value.split('\\');
                var reportName = parts.pop();
                var categoryName = parts.length > 0 ? parts.join('\\') : "";

                var category = categoryArray.filter(function(item) { return item.key === categoryName; })[0];
                if(!category) {
                    category = { key: categoryName, items: [] };
                    categoryArray.push(category);
                }
                category.items.push({ text: reportItem.Key, displayName: reportName, onClick: function() { url(reportItem.Key); koCategory && koCategory(categoryName); } });
            })
            categories(categoryArray);
        });
    }

    function customizeSaveAsDialog(s, e) {
        e.Popup.width("700px");
        e.Popup.height("522px");
        e.Popup.title = "Save";
        var categories = ko.observableArray([]);
        var koUrl = ko.observable("");
        var koInput = ko.observable("");
        var koCategory = ko.observable("");

        koUrl.subscribe(function(newVal) {
            newVal = newVal.replace('/', '\\');
            var paths = newVal.split('\\');
            var fileName = paths.pop();
            koInput(fileName);
            var catName = paths.join('\\');
            koCategory(catName);
        });
        var updateReportName = function(reportName) {
            koUrl(koCategory() ? (koCategory() + '\\' + reportName) : reportName);
        };

        koCategory.subscribe(function(newVal) {
            newVal = newVal.replace('/', '\\');
            updateReportName(koInput());
        });
        updateCategories(koUrl, categories);

        var onCustomCategoryCreating = function(data) {
            if(!data.text || data.text === "none") {
                data.customItem = null;
                return;
            }
            data.customItem = { key: data.text, items: [] };
            categories.push(data.customItem);
            koUrl(data.text + '\\' + koInput());
        }

        var model = {
            categories: categories,
            categoryName: koCategory,
            reportUrl: koUrl,
            onReportNameChanged: function(e) {
                updateReportName(e.value);
            },
            onCustomCategoryCreating: onCustomCategoryCreating,
            inputValue: koInput,
            categoryDisplayExpr: function(item) {
                return item && item.key || "none";
            },
            setUrl: function(url) {
                koUrl(url);
            },
            getUrl: function() {
                return koUrl();
            },
            onShow: function(tab) {
                koInput("");
                updateCategories(koUrl, categories, koCategory);
            },
            popupButtons: [
                {
                    toolbar: 'bottom', location: 'after', widget: 'dxButton', options: {
                        text: 'Save', onClick: function() {
                            if(!koInput()) return;
                            e.Popup.save(koUrl());
                        }
                    }
                },
                {
                    toolbar: 'bottom', location: 'after', widget: 'dxButton', options: {
                        text: 'Cancel', onClick: function() {
                            e.Popup.cancel();
                        }
                    }
                }
            ]
        }
        e.Customize("custom-save-as-dialog", model);
    }

    function customizeOpenDialog(s, e) {
        e.Popup.width("700px");
        e.Popup.height("476px");
        e.Popup.title = "Open";
        var categories = ko.observableArray([]);
        var koUrl = ko.observable("");
        var koInput = ko.observable("");
        updateCategories(koUrl, categories);

        var model = {
            categories: categories,
            reportUrl: koUrl,
            inputValue: koInput,
            setUrl: function(url) {
                koUrl(url);
            },
            getUrl: function() {
                return koUrl();
            },
            onShow: function(tab) {
                koInput("");
                updateCategories(koUrl, categories);
            },
            popupButtons: [
                {
                    toolbar: 'bottom', location: 'after', widget: 'dxButton', options: {
                        text: 'Open', onClick: function() {
                            e.Popup.open(koUrl());
                        }
                    }
                },
                {
                    toolbar: 'bottom', location: 'after', widget: 'dxButton', options: {
                        text: 'Cancel', onClick: function() {
                            e.Popup.cancel();
                        }
                    }
                }
            ]
        }
        e.Customize("custom-open-dialog", model)
    }
</script>
<style>
    .dxrd-reportdialog-content .reportdialog-item.dx-texteditor:not(.dx-multiline):not(.dx-textarea) {
        height: 36px;
        margin-bottom: 10px;
    }
</style>
<script type="text/html" id="custom-save-as-dialog">
    <div class="dxrd-reportdialog-content">
        <div style="margin-bottom: 10px;"
             data-bind="dxTextBox: {
                 height: 36,
                 value: inputValue,
                 valueChangeEvent: 'keyup',
                 onValueChanged: onReportNameChanged,
                 placeholder: 'Enter a report name to save...',
                 showClearButton: true
        }"></div>
        <div style="margin-bottom: 10px;"
             data-bind="dxSelectBox: {
                height: 36,
                dataSource: categories,
                value: categoryName,
                valueExpr: 'key',
                displayExpr: categoryDisplayExpr,
                acceptCustomValue: true,
                placeholder: 'Select a category...',
                onCustomItemCreating: onCustomCategoryCreating
        }"></div>
        <div class="dx-default-border-style dxd-border-secondary"
             data-bind="dxList: {
                dataSource: categories,
                height: '260px',
                grouped: true,
                displayExpr: 'displayName',
                keyExpr: 'text',
                collapsibleGroups: true,
        }"></div>
    </div>
</script>

<script type="text/html" id="custom-open-dialog">
    <div class="dxrd-reportdialog-content">
        <div style="margin-bottom: 10px;" data-bind="dxTextBox: { height: 36, value: inputValue, valueChangeEvent: 'keyup', placeholder: 'Enter text to search...', showClearButton: true }"></div>
        <div class="dx-default-border-style dxd-border-secondary"
             data-bind="dxList: {
                dataSource: categories,
                height: '260px',
                grouped: true,
                searchExpr: 'text',
                searchValue: inputValue,
                displayExpr: 'displayName',
                keyExpr: 'text',
                collapsibleGroups: true,
        }"></div>
    </div>
</script>

@(Html.DevExpress().ReportDesigner("reportDesigner")
         .Height("1000px")
         .Bind(@"Category1\Report1")
         .ClientSideEvents(configure => {
             configure.CustomizeSaveAsDialog("customizeSaveAsDialog");
             configure.CustomizeOpenDialog("customizeOpenDialog");
         }));

CustomizeSaveDialog: ASPxClientEvent<ASPxClientReportDesignerCustomizeSaveDialogEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function customizeSaveDialog(s, e) {
        e.Popup.width("500px");
        e.Popup.height("200px");
        e.Popup.title = "Save";
        var koUrl = ko.observable("");
        var model = {
            setUrl: function (url) {
                koUrl(url);
            },
            getUrl: function () {
                return koUrl();
            },
            onShow: function (tab) { },
            popupButtons: [
                { toolbar: 'bottom', location: 'after', widget: 'dxButton', options: {
                        text: 'Yes', onClick: function () {
                            e.Popup.save(koUrl());
                        }
                    }
                },
                { toolbar: 'bottom', location: 'after', widget: 'dxButton', options: {
                        text: 'No', onClick: function () {
                            e.Popup.cancel(koUrl());
                        }
                    }
                },
            ]
        }
        e.Customize("save-this", model)
    }
</script>

<script type="text/html" id="save-this">
        <div>Do you want to save changes?</div>
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ClientInstanceName="reportDesigner">
    <ClientSideEvents CustomizeSaveDialog="customizeSaveDialog"/>
</dx:ASPxReportDesigner>

CustomizeToolbox: ASPxClientEvent<ASPxClientReportDesignerCustomizeToolboxEventHandler<ASPxClientReportDesigner>>

function onCustomizeToolbox(s, e) {
  var labelInfo = e.ControlsFactory.getControlInfo("XRLabel");
  labelInfo.isToolboxItem = false;
}

CustomizeWizard: ASPxClientEvent<ASPxClientReportDesignerCustomizeWizardEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript">
    function beforeInit(args) {
       // ...
    }

    function CustomizeWizard(s, e) {
        if (e.Type === "ReportWizard") {
            e.Wizard.events.addHandler("beforeInitialize", beforeInit)
        }
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">
    <ClientSideEvents CustomizeWizard="CustomizeWizard" />
</dx:ASPxReportDesigner>

EndCallback: ASPxClientEvent<ASPxClientEndCallbackEventHandler<ASPxClientReportDesigner>>

ExitDesigner: ASPxClientEvent<ASPxClientReportDesignerExitDesignerEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function onExitDesigner(s, e) {
        window.location = 'Viewer.aspx';
    }
</script>

<dx:ASPxReportDesigner ClientInstanceName="WebReportDesigner1" ID="ASPxReportDesigner1" runat="server">
    <ClientSideEvents ExitDesigner="onExitDesigner" />
</dx:ASPxReportDesigner>

<script type="text/javascript">
    function onExitDesigner(s, e) {
        window.location = '@Url.Action("Viewer","Home")';
    }
</script>

@Html.DevExpress().ReportDesigner(settings =>
{
    settings.Name = "ReportDesigner1";
    settings.ClientSideEvents.ExitDesigner = "onExitDesigner";
}).Bind("TestReport").GetHtml()

OnServerError: ASPxClientEvent<ASPxClientReportDesignerErrorEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function onError(s, e) {
        alert("Internal Server Error occurs");
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">        
    <ClientSideEvents OnServerError="onError"/> 
</dx:ASPxReportDesigner>

PreviewClick: ASPxClientEvent<ASPxClientWebDocumentViewerPreviewClickEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function previewClick(s, e) {
        e.Brick && alert(e.GetBrickText())
    }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebReportDesigner.XtraReport1">
     <ClientSideEvents PreviewClick="previewClick"/>
</dx:ASPxWebDocumentViewer>

PreviewCustomizeElements: ASPxClientEvent<ASPxClientWebDocumentViewerCustomizeElementsEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function previewCustomizeElements(s, e) {
        var toolbarPart = e.GetById(DevExpress.Reporting.Viewer.PreviewElements.Toolbar);
        var index = e.Elements.indexOf(toolbarPart);
        e.Elements.splice(index, 1);
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">      
    <ClientSideEvents PreviewCustomizeElements="previewCustomizeElements"/> 
</dx:ASPxReportDesigner>

PreviewCustomizeExportOptions: ASPxClientEvent<ASPxClientWebDocumentViewerCustomizeExportOptionsEventHandler<ASPxClientReportDesigner>>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" ClientInstanceName="reportDesigner" runat="server">
    <ClientSideEvents PreviewCustomizeExportOptions="customizeExportOptions"/>
</dx:ASPxReportDesigner>

PreviewCustomizeMenuActions: ASPxClientEvent<ASPxClientWebDocumentViewerCustomizeMenuActionsEventHandler<ASPxClientReportDesigner>>

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
    <script>
        function CustomizeMenuActions(s, e) {
            var actions = e.Actions;

            // Get the "Print Page" action and hide it. 
            var printPageAction = e.GetById(DevExpress.Reporting.Viewer.ActionId.PrintPage);
            if (printPageAction)
                printPageAction.visible = false;

            // Add a new action. 
            actions.push({
                text: "Custom Command",
                imageClassName: "customButton",
                imageTemplateName: "dxrd-svg-wizard-warning",
                hasSeparator: false,
                disabled: ko.observable(false),
                visible: true,
                hotKey: { ctrlKey: true, keyCode: "Z".charCodeAt(0) },
                clickAction: function () {
                    alert('Clicked.');
                }
            })
        };
    </script>

    <dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">
        <ClientSideEvents PreviewCustomizeMenuActions="CustomizeMenuActions" />
    </dx:ASPxReportDesigner>
</asp:Content>

PreviewDocumentReady: ASPxClientEvent<ASPxClientWebDocumentViewerDocumentReadyEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function previewDocumentReady(s, e) {
        var previewModel = s.GetPreviewModel();
        var goToNextPage = function () {
            var pageIndex = previewModel.GetCurrentPageIndex();
            if (e.PageCount <= pageIndex)
                return;
            previewModel.GoToPage(pageIndex + 1);
            setTimeout(function () { goToNextPage(); }, 3000);
        }
        goToNextPage();
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">      
    <ClientSideEvents PreviewDocumentReady="previewDocumentReady"/>  
</dx:ASPxReportDesigner>

PreviewEditingFieldChanged: ASPxClientEvent<ASPxClientWebDocumentViewerEditingFieldChangedEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function previewEditingFieldChanged(s, e) {
        if ((e.Field.id() === "UnitsInStock") && (e.NewValue > 100))
            e.NewValue = e.OldValue;
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">      
    <ClientSideEvents PreviewEditingFieldChanged="previewEditingFieldChanged"/>  
</dx:ASPxReportDesigner>

PreviewParametersReset: ASPxClientEvent<ASPxClientWebDocumentViewerParametersResetEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function previewParametersReset(s, e) {
        var preview = s.GetPreviewModel();
        if (preview) {
            preview.tabPanel.collapsed(true);
        }
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">      
    <ClientSideEvents PreviewParametersReset="previewParametersReset"/>  
</dx:ASPxReportDesigner>

PreviewParametersSubmitted: ASPxClientEvent<ASPxClientWebDocumentViewerParametersSubmittedEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function previewParametersSubmitted(s, e) {
        var preview = s.GetPreviewModel();
        if (preview) {
            preview.tabPanel.collapsed(true);
        }
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">      
    <ClientSideEvents PreviewParametersSubmitted="previewParametersSubmitted"/>  
</dx:ASPxReportDesigner>

ReportOpened: ASPxClientEvent<ASPxClientReportDesignerReportOpenedEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function reportOpened(s, e) {
        e.Report.measureUnit("TenthsOfAMillimeter");
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ClientInstanceName="reportDesigner">  
    <ClientSideEvents ReportOpened="reportOpened" />   
</dx:ASPxReportDesigner>

ReportOpening: ASPxClientEvent<ASPxClientReportDesignerReportOpeningEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function reportOpening(s, e) {
        if (e.Url.toLowerCase().includes("table"))
            e.Cancel = true;
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ClientInstanceName="reportDesigner">  
    <ClientSideEvents ReportOpening="reportOpening" />   
</dx:ASPxReportDesigner>

ReportSaved: ASPxClientEvent<ASPxClientReportDesignerReportSavedEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function reportSaved(s, e) {
        s.CloseCurrentTab();
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ClientInstanceName="reportDesigner">     
    <ClientSideEvents ReportSaved="reportSaved"/>   
</dx:ASPxReportDesigner>

ReportSaving: ASPxClientEvent<ASPxClientReportDesignerReportSavingEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function onReportSaving(s, e) {
        if (e.Url.toLowerCase().includes("table")) {
            e.Cancel = true;
            if (e.Dialog)
                e.Dialog.visible(false);
        }
        if (e.Url.length <= 3)
            e.Cancel = true;
    }
</script>

@Html.DevExpress().ReportDesigner(settings => {
    settings.Name = "ReportDesigner1";
    settings.ClientSideEvents.ReportSaving = "onReportSaving";
}).BindToUrl("TestReport").GetHtml()

ReportTabClosed: ASPxClientEvent<ASPxClientReportDesignerReportTabClosedEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function reportTabClosed(s, e) {
        alert("The " + e.Tab.displayName() + " tab was closed.");
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ClientInstanceName="reportDesigner">  
    <ClientSideEvents ReportTabClosed="reportTabClosed"/>   
</dx:ASPxReportDesigner>

ReportTabClosing: ASPxClientEvent<ASPxClientReportDesignerReportTabClosingEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript" id="script">
    function reportTabClosing(s, e) {
        if (e.Tab.displayName() === "Invoice") {
            e.ReadyToClose.reject();
            e.Handled = true;
        }
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ClientInstanceName="reportDesigner">  
    <ClientSideEvents ReportTabClosing="reportTabClosing"/>   
</dx:ASPxReportDesigner>

SaveCommandExecute: ASPxClientEvent<ASPxClientReportDesignerSaveCommandExecuteEventHandler<ASPxClientReportDesigner>>

TabChanged: ASPxClientEvent<ASPxClientReportDesignerTabChangedEventHandler<ASPxClientReportDesigner>>

<script type="text/javascript">      
    function TabChaged(s, e) {
        alert("The tab was changed to " + e.Tab.displayName());
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">
    <ClientSideEvents TabChanged="TabChaged" />
</dx:ASPxReportDesigner>