All Answers

You can only set URL parameters- you cannot set the http header in the iFrame URL. You cannot inject an HTTP Header in the iFrame request.

You will need to handle the request on the server side.

Consider using postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

1. For your question of “Should this work?”- No, there are security restrictions preventing it from working. This is by design- think of the HtmlPanel as being in a sandbox, isolated from the main app. However, there is a workaround where you can use the InitScript property to execute the JavaScript- see this forum post for an example: https://wisej.com/support/question/using-html-in-an-html-panel

2. Regarding the IFramePanel, you are correct in that you would need to supply a URL to use the IFramePanel. I wouldn’t recommend using the IFramePanel for this anyways, as it will be subject to CORS restrictions. You can execute javascript code in the IFramePanel, but there will be some difficulty in getting it to interact with the main app. You would need to implement a way to send and receive messages using the postMessage() APIs.

3. Re: Where should I put the .js files and how should they be referenced in the HTML?
You have several options for running JavaScript code in Wisej:
1. As I mentioned earlier, you can use the HtmlPanel and do something similar to https://wisej.com/support/question/using-html-in-an-html-panel. That example loads javascript from a cdn (the ChartJS library) but it should also work when loading javascript from a filepath.

2. You can use the Widget class, see: https://docs.wisej.com/docs/controls/content/widget and https://docs.wisej.com/api/wisej.web/content/widget
We use this to integrate third-party JavaScript applications, but you can use it to run your JavaScript code. If your put your javascript code in the InitScript, it will run when the widget is created. Alternatively, if you want to keep your javascript code in a separate file, you can reference that file using the “Packages” property, which can be set in the designer. Once you have added a package, for the “Source” simply put the relative filepath to your script. You can then call whatever javascript methods you need from your code in the InitScript. I recommend this method, as it integrates the most closely into the rest of the application.

3. You can use the JavaScript Extender. Simply search for “JavaScript” in the Toolbox, then drag and drop the extender into the designer.
see https://docs.wisej.com/docs/concepts/javascript and https://docs.wisej.com/api/wisej.web/extenders/javascript

You may find the SetJavaScriptSource function helpful as it lets you load JavaScript from a file: https://docs.wisej.com/api/wisej.web/extenders/javascript#setjavascript-control-script

4. You can use the Call and Eval functions to call JavaScript code from your C# code.
https://docs.wisej.com/api/wisej.web/general/control#call-function-args
https://docs.wisej.com/api/wisej.web/general/control#eval-javascript
https://docs.wisej.com/docs/concepts/javascript has some code examples that use Call and Eval.

Hope this helps!

-Julie

.dx-datagrid selects an element with the class “dx-datagrid”:
<div class="dx-datagrid"></div>

But #dx-datagrid selects an element with the id “dx-datagrid”:
<div id="dx-datagrid"></div>

If you run the sample and press F12 to open the Developer Tools, then look at the DOM (Click on the “Elements” tab), you can see that Wisej uses ID extensively- lots of divs with ids like “id_1”, “id_2”, etc.

When the Developer Tools are open, If you do ctrl+F and search for “dx-datagrid” you can see an element with the class “dx-datagrid” in the DOM. (See screenshot.) This is the element that we find by doing $("".dx-datagrid"").

Note that the element that we want does NOT have the id “dx-datagrid”, in fact there is no element with that ID in the DOM! So that is why $(""#dx-datagrid"") does not work.

I highly recommend using F12/Developer tools when debugging widgets. Here I just used it to look at the DOM, but you can also look at the javascript code that is being run and even set breakpoints! It’s very useful.

I briefly looked at your sample and at the SpreadJS documentation. One potential issue that I see is that you might need to reference the “excel.io” script. You can do this in the designer under “Packages”. You can either reference a script in the file directory (like your other scripts) or reference it from a cdn. I couldn’t find a cdn for it, so it’s probably best to download the script and reference it in the file directory.

Also a note on debugging, in case you don’t already know- if you press F12 to open developer tools, and click on the “Sources” tab, you can see the javascript that is being run. You can even set breakpoints in the javascript, and hover over variables to see their values. This is quite helpful- I was able to set a breakpoint in the “LoadXL” function on line 129, so I can verify that it is in fact being called when you click the button. See screenshot.

For further assistance, you’ll need to refer to the SpreadJS documentation, as this is really a SpreadJS issue and not a Wisej issue.

Relevant SpreadJS documentation:

https://developer.mescius.com/spreadjs/docs/getstarted/quick-start/importing-files

https://developer.mescius.com/spreadjs/docs/excelimpexp/excelclient

Since apparently the folks at WiseJ don’t get notified about comments, I’ll post this as an “answer”.  I strongly suspect that this is the culprit:

The VWG component “HtmlBox” is implemented as an <iframe>, while the WiseJ “HtmlPanel” is implemented as a <div>.  So, the question becomes, is there a control in WiseJ that wraps an <iframe> and if not, what does it take to make one?

Or am I wrong?

I see that there is an IFramePanel component, but it only accepts a URL – I need to supply the content to the control as HTML, not via a URL…

Hello,
You’ll need to use a Widget Function, not a Widget Event.
See https://docs.wisej.com/extensions/premium-extensions/overview#methods for documentation on WidgetFunctions.

Your WidgetFunction should have the following javascript code:

widgetFunction.Source = @"
if(e.area === ""data"") {
// Drill-down: Fetch and show data related to the clicked cell
var drillDownDataSource = e.component.getDataSource().createDrillDownDataSource(e.cell);
$("".dx-datagrid"").dxDataGrid({
dataSource: drillDownDataSource,
columns: e.component.getDataSource().fields()
});
alert('hello');
}
";

See attached C# sample for the full implementation.

Hey Carl,

Can you please attach a small runnable sample project that demonstrates what you’ve mentioned?

Thanks,
Levie

This is possible and in fact you can see an example of this in the demobrowser here: https://wisej-demobrowser.azurewebsites.net/#Icon%20Packs/Bootstrap/Features

The source code for the entire demobrowser is here: https://github.com/iceteagroup/wisej-demobrowser

The source code for displaying the icons in the demobrowser is here: https://github.com/iceteagroup/wisej-demobrowser/blob/main/Demos/IconPacks/Wisej.DemoBrowser.BootstrapIcons/Features.cs

In addition to Julie’s answer, here’s a very simple example showing how to create a similar layout in Wisej.NET.

Best,
Levie

It’s possible to integrate the controls you mentioned, using the Widget control. Here’s an example of integrating jQWidgets: https://wisej.com/blog/all-about-integration-part-4/
However, getting the controls to contain Wisej controls is difficult, as they were not designed to do that. It’s possible with a lot of work, and if you want use to look into it, contact sales@wisej.com and we can give you a quote.

A better alternative would be to use the built in anchoring and docking that exists in Wisej.
Anchoring and Docking: https://docs.wisej.com/docs/concepts/layouts
Drag and Drop: https://docs.wisej.com/docs/controls/general/drag-and-drop-1

Thanks, with example I could understand how it works

Thanks for providing a sample. I was able to reproduce the issue and we are looking into this.

-Julie

A div is an html element. A Control or Panel is a Wisej.NET class- that always “resolves” to a div.

Resolving to a div doesn’t have anything to do with responsive layouts. With plain html it’s achieved through breaks in css (bootstrap).

With Wisej.NET we have responsive properties, flow layout, flex layout, table layout, anchoring, docking, client profiles, etc.

See documentation and samples and case studies to see what is possible. We also provide training, see services page.

I found the solution. There was a repetition of some lines and I canceled it and it worked, but why does it not work outside the device? The application was called through the phone’s browser and it did not work.

I found the solution. There was a repetition of some lines and I canceled it and it worked, but why does it not work outside the device? The application was called through the phone’s browser and it did not work.

Hi ,

Enclosed is a small testproject.

Thanks,

/Per

Hi Per,

Please wrap up a sample for us to check, ideally it should include all the WidgetEvents, WidgetFunctions and any JavaScript you have.

Best regards,
Alaa