Example of using spreadsheet in layout

Spreadsheet
#1

Hello,

Looking for an example of using spreadsheet in for example cell “b” in an 2U layout?

Thank you for your help.

#2

There is no a specialized .attachSpreadsheet command, but you can place a div into layouts cell and use normal API to init a spreadsheet in the target div.

#3

Thank you Stanislav,

Code I used now is:
main_layout.cells(“b”).attachHTMLString(’

’);
dhx_sh = new dhtmlxSpreadSheet({
load: “./codebase/php/data.php”,
save: “./codebase/php/data.php”,
parent: spreadsheet,
icons_path: “./codebase/imgs/icons/”
});
dhx_sh.load(1);

It does not show the spreadsheet how it should be, but that can be caused by that I try to use and switch between several views for cell b.

#4

The code itself is fine, but you really can have problems if you try to init the spreadsheet in non-active view, as spreadsheet will not size self correctly while its view is in the hidden state.

#5

Ok then that explains the problem I see.
The spreadsheet is indeed not sized correctly and appears over the total width of cell a and cell b togheter.
Also the presentation of the spreadsheet is not according to the stylesheet.

So I should not use spreadsheet(s) in combination with views?

#6

Hi,

Please check the next snippet. It shows how views and spreadsheet can be used in the same time

snippet.dhtmlx.com/14d07d1a9

#7

Sorry, I still do not get the spreadsheet showing as it should be.
Even without using views.

From the beginning I also get an error from spreadsheet.php in console: "Object doesn’t support property or method ‘setImagePath’ spreadsheet.php (19615,3)

To first get the spreadsheet showing I tried the code below, but no succes.
Hope you can see why the spreadsheet is not showing as it should be.

index.html:

Spreadsheet html, body { width: 100%; /*provides the correct work of a full-screen layout*/ height: 100%; /*provides the correct work of a full-screen layout*/ overflow: hidden; /*hides the default body's space*/ margin: 0px; /*hides the body's scrolls*/ }

appie.js:
dhtmlxEvent(window,“load”,function(){

var main_layout = new dhtmlXLayoutObject({
	parent: document.body,
	pattern: "2U",
	skin: "material"});

var a = main_layout.cells('a');
a.setWidth('250');
a.setText("cell a");

main_layout.cells("b").attachHTMLString('<div id="spreadsheet"></div>');
dhx_sh = new dhtmlxSpreadSheet({
	load: "./codebase/php/data.php",
	save: "./codebase/php/data.php",
	parent: spreadsheet,
	icons_path: "./codebase/imgs/icons/"
	});
dhx_sh.load(1);

});

#8

Hi,

The same code works for me

snippet.dhtmlx.com/b5918b8ae

Can you provide a full sample or any kind of demo link where the issue can be checked.

#9

Hi,

Sorry I have no online example, I develop local on my laptop using XAMPP.

I use Firefox (currently version 50) when testing my app, and see now that in Firefox your snippet gives me errors and the spreadsheet is hidden behind the layout cell b.
With MS Edge your snippet works fine.

Errors from Firefox:
code:show Array [ Object ] snippets.js:3:3811
code:change Array [ ] snippets.js:3:3811
preview:refresh Array [ Object ] snippets.js:3:3811
code:change Array [ "<?xml version=“1.0” encoding=“iso-8…” ] snippets.js:3:3811
preview:refresh Array [ Object ] snippets.js:3:3811
code:change Array [ ] snippets.js:3:3811
preview:refresh Array [ Object ] snippets.js:3:3811
unreachable code after return statement[Meer info] spreadsheet.php:19288:2
TypeError: menu.setImagePath is not a function[Meer info] spreadsheet.php:19615:3
preview:error Array [ Object ] snippets.js:3:3811
unreachable code after return statement[Meer info] spreadsheet.php:19288:2
TypeError: menu.setImagePath is not a function[Meer info] spreadsheet.php:19615:3
preview:error Array [ Object ] snippets.js:3:3811
unreachable code after return statement[Meer info] spreadsheet.php:19288:2

#10

Hi,

The issue must be caused by the snippet tool, as the same functionality works correctly in FF in local sample.
I will double-check this functionality though, and will post any findings