Save report from embedded report designer using code

[Krunal]

In my Angular application, I'm using Telerik Reporting and have embedded report designer in web page. That works well i.e. I'm able to load the reports from my server and load them in embedded report designer. Now when user is done with designing the report, I need to save the report manually using the code and not using the save button available in the Menu. This is required because I need to store some of the report information to my backend as well. I have following UI design at the moment and I would like trigger the report save when user presses "Publish" button.

 

I I can't seem to find any way to achieve this. What I'm looking for is some kind of reporting api/hook kind of thing which will enable me to trigger the save report process from my code. Can any one pls help on how to achieve this?

Also, how I can hide the buttons from Menu i.e. I want to hide few buttons i.e. Save, Save As from embedded report designer menu so user can only save the report using the buttons which I'm providing to them in UI.

Any help on this will be much appreciated. Thanks!!

[Krunal]

It's really poor on Telerik support team/forum that even after 24 hours have elapsed since my question, there were just 5 views to the question and no reply. Ultimately, I had no option but to get it done myself through lots of searching and trial n error with code. I'm sharing my solution herewith for someone who may be in need of it in future :

1. Saving report programmatically 

My code snippet is based on Angular (Frontend) and .net core (backend)

Frontend code

In order to inject your custom logic, first you need to disable the save button given in report designer menu.

var saveBtn = $('#webReportDesigner').find(
      "[data-action='documentSave']"
    );
// write your custom logic here, if any
    saveBtn.click();

Backend code

You must be having a Reportdesigner controller which is derived from ReportDesignerControllerBase. This controller will be used basically to serve data to designer. Ideally, following code will be part of your frontend code. (In serviceurl, this controller is being called)

    this.designer = $('#webReportDesigner')
      .telerik_WebReportDesigner({
        serviceUrl: `${environment.apiUrl}/reportdesigner/`,
        report: `${this.reportName}.trdp`,
      })
      .data('telerik_WebReportDesigner');

If you want to inject your custom logic in save flow, override the SaveReportByUriAsync (as you can see below in code). Following code shows how to extract report parameters but you can do other stuff as well e.g. some custom validation before saving. Every time when report is being saved, your logic written in overridden method will get executed and this way you can inject your custom logic i.e. saving some report data to your backend, perform some validation, etc.

        public override Task<IActionResult> SaveReportByUriAsync([FromQuery] string uri)
        {
            // get client id
            var client = RegisterClient();

            // extract client id i.e. clientId
            var parameters =  GetParameters(clientId, new Telerik.Reporting.Services.AspNetCore.ClientReportSource { Report = uri });

            return base.SaveReportByUriAsync(uri);
        }

This seems to be working for my case and fulfils my requirement.

2. Hide buttons from menu

Here it is purely frontend trick and javascript code (as my frontend is in angular)

ngAfterViewInit(): void {
    setTimeout(() => {
      this.reportUIAdjustmenets();
    }, 1000);
  }

  reportUIAdjustmenets(): void {
    // hide the element using which report can be switched
    const element = $('#webReportDesigner').find('.top-menu-area__switch');
    if (element && element.length > 0) {
      element[0].style.visibility= 'hidden';
    }

    // set width of the menu list items to 100%
    const listItems = $('#webReportDesigner').find('.main-menu__item');
    if (listItems && listItems.length > 0) {
      listItems.toArray().forEach((li) => {
        li.style.width = '100%';

        // disable save and save as button
        var attr = li.getAttribute('data-action');
        if (attr === 'documentSave' || attr === 'documentSaveAs') {
          li.setAttribute('disabled', 'disabled');
        }
      });
    }
  }

In above code, it does multiple things i.e. hides report switcher, sets the list item's width in main menu to 100%  and disables save and saveas button. 

This looks like a more brute force way of doing it but atleast it works for me in absence of proper solution in sight for me. 

If any one happens to see this solution and know better way of doing it, pls be kind enough to let me know.

Thanks!!