How does report viewer work? - telerik-reporting

$reportViewer = $("#reportViewer1")
.telerik_ReportViewer({
serviceUrl: "/api/reports/",
templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate.html',
reportSource: { report: "MyClassLib.Group, MyClassLib" },
viewMode: telerikReportViewer.ViewMode.Interactive,
scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
scale: 1.0,
PersistSession: false
});
I took this code part from a sample project and modified only the reportSource. It was working but i didn't know how. I have tried to add reporting parameters, but problems started to show itself. Parameters not shown in parameter area in browser view although shown in design view.
I wonder especially, how serviceUrl is working and where is
/api/reports/ ?
I would appreciate, if you tell what other parameters is for and how
they are working or give link of a document.

You can find all client-side properties explained here.
Or you can look up
http://www.telerik.com/help/reporting/html5-report-viewer-embedding.html
http://www.telerik.com/help/reporting/telerik-reporting-rest-implementing-http-service.html

Related

How to use high charts donut charts in Angular

I would like to develop highcharts donut charts similar to attached image :
I have gone through multiple links but I can't find a clear solution.
Can someone help me ?
As you mentioned angular,
you need the highchart npm package in your application
check the following source
https://stackblitz.com/edit/highcharts-angular-drilldown
Update 1:
To hide labels, you need to do the following
dataLabels: {
enabled: false,
}
check latest link https://stackblitz.com/edit/highcharts-angular-drilldown-m3dwq6?file=app/app.component.ts

Changing materials in Forge

We are currently making the client retrieve the object states when the page loads (which will cause the 'pending' objects in the model to turn into different colors). Then we poll for changes to update the coloring (Firstly: pending object gets colored when the viewer loads, and then we keep polling to check and change state again, to make Forge render those in a different color and store their old color/material. When the polling received a change that an object should no longer be colored, it tells Forge to use the old color/material again.
The problem:
We've found out what the problem is, but we couldn't find out how to fix it. The problem is that changing materials in Forge doesn't work after startup anymore, it only works in the first ~3 seconds or so (the materials were used to show the colors).
However, setting overlays works even after the first ~3 seconds, (showing overlays instead of materials to show the colors).
This is not what we want to achieve. This looks unoptimized, because overlays will be shown through everything.
The materials, however, seem to be 'locked', as in, they cannot be changed anymore after the first ~3 seconds. It seems like they aren't refreshed or something
In the examples, we found they used viewer.impl.invalidate(true) to refresh the Forge viewer, but that doesn't do anything after ~3 seconds.
We've also tried every combination of viewer.impl.invalidate(true, true, true) as well as setting material.needsUpdate to true, as well as trying to re-render the entire scene.
We also found this: https://github.com/mrdoob/three.js/issues/790, but we couldn't find a good way to do that in Forge, we tried viewer.requestSilentRender() but that didn't do anything either.
Anyway, we've tried everything we could come up with and could find online to make the materials work, but nothing made a difference.
We are looking to find someone that's more experienced with how Forge works that can see what the material code is doing wrong.
As for the content, here is all the code you will need to understand what is happening:
DROPBOX LINK
And here is a small part of the "index.html" file that sets the color:
try
{
viewer.restoreAllColorOverlays(); //for materials instead of overlays: viewer.restoreAllColorMaterials();
$.each(colors, function(color, selectionIds)
{
viewer.setColorOverlay(selectionIds, color); //for materials instead of overlays: viewer.setColorMaterial(selectionIds, color);
});
}
catch(error)
{
console.error(error);
}
I have no idea how you implement your app, so I only tell what I found in your codes. If you want to resolve the issue you addressed, you can consider providing a reproducible case demonstrating that, I will gladly pass it to our dev team. Those following items should be in the reproducible case:
A short exact description of what you are trying to achieve. The behavior you observe versus what you expect, and why this is a problem.
A complete yet minimal sample source model to run a test in.
A complete yet minimal Forge app that can be run and debugged with a simple procedure to analyze its behavior lives in the sample model.
A complete yet minimal pure three.js app that can be run and demonstrated the shader effect you want. Note. Forge Viewer is using r71 three.js.
Detailed step-by-step instructions for reproducing the issue, e.g. which element to pick, what command to launch etc.
If your reproducible case could not be posted here publicly, please send it to the forge.help#autodesk.com and remove sensitive data or information before you send.
=== Something I found in your codes:
I found here are some wrong types and missing actions in your ColorMaterial extension. The color property of an material should the a type of the THREE.Color. Here is my modification:
Autodesk.Viewing.Viewer3D.prototype.setColorMaterial = function(objectIds, color)
{
if( !(color instanceof THREE.Color) ) throw 'Invalid argument: Color';
var material = new THREE.MeshPhongMaterial
({
color: color,
opacity: 0.8,
transparent: true
});
viewer.impl.matman().addMaterial( 'ColorMaterial-' + new Date().getTime(), material, true );
// ...........
};
Its' result is here:
In the ColorOverlay extension, The type of material color property is also wrong, it should be a type of THREE.Color, too. Changing it into THREE.Color should work fine. In addition, overlay is covers on 3D objects, so you should call viewer.hide() with your setColorOverlay() together. Otherwise, it won't look like a transparent object.
Without hidding 3D object of the wall:
hide 3D object of the wall:

Custom HTML Dialog in Electron

How (or is it even possible) to use custom HTML dialogs in Electron? I know that Electron provides certain dialogs (showMessageDialog, showErrorDialog) but these do not seem to allow custom HTML.
I do not wish to use native HTML dialogs (dialog) tag as it does not 'blend in' with the user interface.
Any help would be much appreciated. Thanks!
You can create a BrowserWindow that's modal and, if you like, frameless. See http://electron.atom.io/docs/api/browser-window/.
Yes.
On your parent you should have:
const { remote } = require('electron');
const { BrowserWindow } = require('electron').remote;
and then:
let child = new BrowserWindow({
parent: remote.getCurrentWindow(),
modal: true,
width:300, height:300,
webPreferences: {
enableRemoteModule: true,
nodeIntegration: true
}
});
child.loadFile('myCustomModal.html');
On myCustomModal.html remeber to include a way to close the modal!
like:
<button id="cancel-btn">Cancel</button>
<script>
const remote = require('electron').remote;
document.getElementById("cancel-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
window.close();
});
</script>
As Marc Rochkind said in a previous answer, you can use modal windows in Electron.
However, I have found a small bug with modal windows which causes the parent window to flicker for a very short duration when its .show() function is called. After quite some time on Google, I found an open issue on GitHub about the same problem. After reading the comment section in the issue, and stumbling across some code snippets, I shared a hacky solution in the issue's comment section.
It does take some work to set up, but once it's done, it's really easy to port to other child windows.

Show NoData message on HighStock graph

I'm looking for a native way to display a message over an Highstock graph when there is no data to display or when an error occurs. In fact, I knew that the noData solution already exists for the Highchart library but it seems that it is not yet implemented in Highstock...
So, does anybody knows how to achieve this other than showing a message in a different div?
Thank you in advance for your time!
Keven
You can develop your own solution, based on extracting series object from highcharts. Then you check data length and show div or not.
if(series[0].data.length === 0) {
$('#nodata').show();
}
$('#container').highcharts({
chart: {},
series: series
});
Example: http://jsfiddle.net/3Bh7b/125/
Ok, after few days on UserVoice an administrator told me that the noData functionality is also available under Highstock (this functionality is not currently described in the API documentation).
This is the link of the admin reply (including a jsfiddle demo) :
https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/8547274-highstock-display-a-message-when-nodata-is-avail
This is the link of the API reference (Highchart references) :
http://api.highcharts.com/highcharts#noData

Backbone-support nested view and Chrome

It's the first time I use backbone-support to handle zombie views.
Before introducing it, I did not have the following problem:
this.$el.append(this.template());
// this view fills up a select with options taken from a web services
this.renderChildInto(new App.view.ResourcesView({name: "idActivityDesc", url: "/wfc-services/resources/activities"}), "#divIdActivityDesc");
// population of the forms elements according to the loaded model
this.populateSelectElements();
this.populateTextElements();
if(this.model.get('completed')) {
this.$("#active").removeAttr("disabled");
}
this.delegateEvents(this.events);
return this;
With Firefox it's all working fine. If the model is empty the select elements are going to be set up with default elements. In my case is selectedIndex to -1.
Going in debug inside the view everything seems fine. I have the problem when the view is going to be happened to the parent via the method renderChildInto. The dom is fine, but without the changes derived from the populateSelectElements() if the model is empty. If it's not empty I have no problem and the view is working fine.
I'm really puzzled about it because before the return this; statement, even in Chrome/Chromium I see the selectedIndex to -1. But in the final rendered view on the browser I see the select having selectedIndex to 0.
In the composite_view.js the called code is:
renderChild: function(view) {
view.render();
this.children.push(view);
view.parent = this;
},
renderChildInto: function(view, container) {
this.renderChild(view);
this.$(container).html(view.el);
},
Here's the end of this story.
I found from many sources, including stackoverflow, that it is possible to use selectedIndex to -1.
I'm not a frontend developer and I do not have so much experience with browser compatibility so I found the help I needed from a colleague of mine that is expert in this thing and basically suggested me that this type of usage of selectedIndex was really weird.
He suggested me to use a default option element with value to "-" or whatever was compliant with the domain to define an empty element.
Worked like a charm and since we actually did a good job in the design we had just to change the selectedIndex from -1 to 0.