Web Report Designer: How do I get the Fields and functions to show in the "Expression/Edit Text" window

[Marvin]

I have used the Telerik Report Designer and use the Expression window a lot to select fields, find functions, etc.

When I go to the Web Report Designer, the window is blank. How can I get the same functionality? I noticed on the sample web designer report, I run into the same limitation.

See the attachment.

[Dimitar]

The fields and functions should also be visible in the Web Report Designer's expression editor, please see attached image that is from the Web Report Designer Live Demo page.

Where exactly do you see the reported behavior, opening which editor for which setting?

What version of Kendo do you use in your local Web Report Designer?  Please test with the following:

<script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
//or with 2022.1.119

If this doesn't help, please shoot a Fiddler Jam log and share the link in this thread or in a support ticket - How to Record a Log with the Fiddler Jam Extension.

[Tursunkhuja]

Hi Dimitar,

Kendo version was 2022.1.119 and now I changed it to version 2022.1.301 but, It didn't fixed. I also have problem with using Fiddler Jam to log webpage. That's why I put screenshot here. The Telerik reporting backend (REST API) version is still 2022.1.119. Do you have any other suggestion to fix the issue?

 

Thank you,

[Neli]

Hi Tursunkhuja,

Indeed, the issue is strange. I would recommend sending us a sample application that reproduces the problem, so I can inspect it on my end,

[Tursunkhuja]

Hi Dimitar,

Finally, after a while, I have reproduced the problem in a sample app. The Telerik Demo project doesn't have this problem actually. It's reproducible in our project that is complex.

Our backend project runs some services like Telerik Reporting service, OData service and third service that is specific to the project server. We run the services using "Microsoft.Extensions.Hosting" (IHost interface). Now, I have Demo projects reproducing the same issue in my GitHub that run Telerik Reporting service and OData service. 

The problem is if we define ContractResolver in AddNewtonsoftJson method in OData service, then Web Report Designer's expression window is blank. If we don't define that, then the expression window has fields and functions. But, Reporting is not dependent with OData.

//.AddNewtonsoftJson(op => op.SerializerSettings.ContractResolver = new DefaultContractResolver()); //this is in ODataStartup.cs file

You can use SampleEndpointManagerApp project and run SampleServerApp project (it will run Reporting and OData services). Also, for client-side use Telerik-Reporting-REST-Service project, run it and use webReportDesigner.html. It should open Barcodes report. You should reproduce the problem with the steps above.

 

[Tursunkhuja]

This is error from browser console.

[Dimitar]

The problem is that the WRD front end expects/can work with JSON properties that use the camelCase casing and when the SerializerSettings.ContractResolver = new DefaultContractResolver() setting is set, the WRD controller endpoints instead return them with PascalCase which results in the WRD front end throwing errors that the JSON response was invalid.

The workaround should be to set a camelCase naming strategy either for the whole project:

• Camel case property names (newtonsoft.com)
• c# - How to change json to camelCase in .NET Core 3.1.1? - Stack Overflow

The harder workaround would be to ensure that camelCase is used at least for the ReportDesignerController - serialization - .Net Core Web API different JSON casing per controller - Stack Overflow.

[Tursunkhuja]

Why is the problem happening only when we add second service (OData)? 

Thank you for the workaround.

 

[Tursunkhuja]

Hi Dimitar,

I tried your suggested workaround, but it didn't fix the problem. So I used camelCase naming strategy for Telerik Reporting service like this example below:

            services.AddMvc().AddNewtonsoftJson(options =>
            {
                options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
            });

I still have problem. What part I have missed? Can you give an example or make a PR to my Github branch?

[Dimitar]

Hi Tursunkhuja,

I cloned and ran the SampleEndpointManagerApp app locally but in my tests, using the CamelCasePropertyNamesContractResolver I did not experience any issues.

I have shot a short video of me running the app and testing it with one of the demo projects by using the service's URL for the serviceUrl property of the Web Report Designer widget. The video is attached to my reply.

I cannot think of a reason why you would encounter errors using the camel case resolver, have you tried to clear the browser cache completely? Please test that if you have not already done it. You could also test to leave the default NewtonsoftJson serializer setting since that is what we recommend anyway =>  services.AddMvc().AddNewtonsoftJson();

If you would need further assistance, please give me the exact steps for reproducing the problem locally.

[Tursunkhuja]

Hi Dimitar,

To reproduce the problem, you should run SampleServerApp project (it will run Reporting and OData services). Please see my recorded video which is attached to my reply.

Cleaning the browser cache didn't help. Using default NewtonsoftJson serializer setting also didn't help. The problem happening only when you set NewtonsoftJson serializer setting for OData service. When don't set OData serializer setting, Report web designer works fine. But in this case reporting doesn't use odata. We only run both Reporting and OData services in the project.

[Dimitar]

The way I understand the structure of those projects, the problem is that the SampleServerApp project configures both the Reporting and OData service and the latter overrides whatever serialization settings are set in the Reporting project because OData is added second.

My reason is this belief is that the StartApiHost method of the EndpointManager class calls the EagleHoft class' Configure method. This method, as far as I understand, invokes the ConfigureServices method of each endpoint which in the case of the OData project, will invoke the code where the serialization is specified(the ODataStartup.cs file) overriding whatever was set before in the Reporting project.

    public class EagleHost
    {
        public static void Configure(IWebHostBuilder webBuilder, string path, string baseUrls, List<AppEndpoint> endpoints)
        {
            foreach (var endpoint in endpoints)
            {
                webBuilder.ConfigureServices(services =>
                {
                    if (endpoint.ExternalAssembly != null)
                        services.AddControllers().AddApplicationPart(endpoint.ExternalAssembly);

                    endpoint.ConfigureServices(services);
                });
            }

I have not tested it locally but if the Reporting project is added second to the EndpointManager, it might work, however, it would be much safer to call the Reporting and OData projects separately.

As long as the OData start-up configuration override that of the Reporting project with different serializer settings, the Web Report Designer will not be able to resolve the JSON data returned to it from its endpoints and will be unusable.