Angular Designer - language selection not working

[Antonin H.]

Hello,

I am using the Stimulsoft Designer component for Angular and I ran into a problem with language selection.

I provide a directory with languages with the following code:

Code: Select all

public static void SetLocalizationDirectory(this StiAngularDesignerOptions options, string subdirectory)
{
            var localizationDirectory = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, subdirectory);
            options.LocalizationDirectory = localizationDirectory;
}

The code is run (and the designer options are therefore correctly updated in the backend controller constructor, so definitely before getting a new designer result from the backend .NET server. Upon opening the designer I then see the selection options:



However when I try to select any of the language options, the language does not switch and I get the following client-side error:

Code: Select all

ERROR TypeError: Cannot read properties of undefined (reading 'action')
    at StiMobileDesigner.GetMvcActionUrl (<anonymous>:28549:84)
    at StiMobileDesigner.PostForm (<anonymous>:28604:42)
    at locControl.action (<anonymous>:129125:30)
    at locMenu.action (<anonymous>:129100:28)
    at menuItem.action (<anonymous>:115470:14)
    at menuItem.onclick [as __zone_symbol__ON_PROPERTYclick] (<anonymous>:115437:14)

When making the selection, no call to the server seems to happen, no data is transferred, the whole interaction gets cut off by this bug.

The XML localization files all are present on the server and they match with the selection of languages seen in the screenshot above. The documentation for Angular does not contain anything about the language selection UI element.
Am I missing something or is this a known Stimulsoft Angular issue?

Thanks in advance for any information about this topic.

[Vadim]

Hello

Will be fixed from next version.
Note that it will not change Designer language automatically - you need to reload Designer to apply changes

[Antonin H.]

Hello,

Thank You for the quick response. I will wait for the next version then.

If the selection will require reloading a designer, will I be able to react to some sort of language change action or something like that in a way that will allow me to return a new designer result after the change is made without losing unsaved changes on the report?

[Vadim]

Hello

You should control unsaved changes yourself.
Here is sample code to catch SetLocalization menu action:

Code: Select all

<stimulsoft-designer-angular #designer (designerLoaded)="designerLoaded()">
...
@ViewChild('designer') designer: StimulsoftDesignerComponent;
...
designerLoaded() {
    let jsObject = this.designer.designerEl.nativeElement.firstChild.jsObject;

    jsObject.localizationControl.action = () => {
      alert(jsObject.localizationControl.locName);
    }   
  }

[Martin Michalik]

Hello,

I've tried to make the language select work, but the only way I've managed that is by reloading the designer component in the

Code: Select all

localizationControl.action

by removing it from the dom and then adding it back in.
What I currently have is:

Code: Select all

// report-designer.component.html
@if (show) {
  <stimulsoft-designer-angular
    #designer
    [requestUrl]="getRequestUrl(reportId, locale)"
    [height]="'100%'"
    [width]="'100%'"
    (designerLoaded)="designerLoaded()">
  </stimulsoft-designer-angular>
}

// report-designer.component.ts
  reloadDesigner() {
    this.show = false;

    setTimeout(() => {
      this.show = true;
    }, 50);
  }

  designerLoaded() {
    const jsObject =
      this.stiDesigner?.designerEl.nativeElement.firstChild.jsObject;

    jsObject.localizationControl.action = () => {
      this.locale = jsObject.localizationControl.locName;
      this.reloadDesigner();
    };
  }

but this does not feel like a great solution. Do you think there is a better solution to this?

Thanks in advance

[Vadim]

Hello

This is the only way, to apply different language you need to reload designer.