ReportDesignerClientSideEventsBuilder.ComponentAdded(String) Method

Sets the name of the JavaScript function or the entire code that will handle the Web Report Designer‘s ComponentAdded client-side event.

Namespace: DevExpress.AspNetCore.Reporting.ReportDesigner

Assembly: DevExpress.AspNetCore.Reporting.v24.1.dll

NuGet Package: DevExpress.AspNetCore.Reporting

Declaration

C#

public ReportDesignerClientSideEventsBuilder ComponentAdded(
    string callback
)

VB.NET

Public Function ComponentAdded(
    callback As String
) As ReportDesignerClientSideEventsBuilder

Parameters

Name	Type	Description
callback	String	The name of a JavaScript function or the entire JavaScript function code used to handle the ComponentAdded event.

Returns

Type	Description
ReportDesignerClientSideEventsBuilder	A ReportDesignerClientSideEventsBuilder that can be used to further configure the Report Designer Client Side Events.

Remarks

The ComponentAdded event occurs after a component has been dropped onto the report that is currently edited in the Web Report Designer. When implementing a handling function, use the objects passed as parameters. The first parameter passes the event sender that is the ClientReportDesigner object. The second one is an object with the following structure.

• Model
  The model of the component that has been added to a report.

• Parent
  The control on which the component has been dropped.

The code sample below demonstrates how to use this event to change the text and textAlignment properties of label controls added to the report.

CSHTML

@{
    var designer = Html.DevExpress().ReportDesigner("reportDesigner1").Height("1000px")
        .Bind(Model.Report)
        .DataSources(configureDS => { foreach (var ds in Model.DataSources) { configureDS.Add(ds.Key, ds.Value); } })
        .ClientSideEvents(configure => { configure.ComponentAdded("componentAdded"); });
}
@designer

JavaScript

<script type="text/javascript" id="script"> 
    function componentAdded(s, e) {
        var model = e.Model;
        if (model.controlType === "XRLabel") {
            model.text("Label");
            model.textAlignment("MiddleCenter")
        }
    }
</script>