Simple example for e.g. layout

Suite and Optimus Suite 6
#1

First of all, thanks for an awesome lib. I’ve been using dhx for a long time now and looking into upgrading to 6.x. However I’m struggling with Layout. :sunglasses:

In 5.x I’m used to just create a layout, say 2E, 2U… or whatever layout I need (https://dhtmlx.com/docs/products/dhtmlxLayout/samples/02_conf/01_patterns.html), linked in some components and there you go; done.

A simple GUI, that looks good, is responsive (at least on initial load), uses the full height and width, simple, efficient…

However in 6, I don’t know how to use the framework.

  1. I create columns and rows, or first rows and columns?
  2. How do i get to resize the layout, like in 5.x, so it uses full height? Do I set some setting on a row, or a column? Should I use custom css for that? If so, is grid layout supported? How would I style it if so?

It would be great to get a small tutorial to set up a layout, with toolbar, menu, grid and form, so I can get started with 6.x and get all enthusiastic about it.

another question; is the source code available for the File Explorer Demo?
https://dhtmlx.com/docs/products/demoApps/dhtmlxFileExplorerDemo/ I think this will help a lot already.

I found the samples (https://docs.dhtmlx.com/suite/samples/index.html), but there is no code snippets so very hard to understand.

Thanks, Remi

#2

When you download the suite (or individual releases like Grid), there is a “samples” folder with some extremely basic examples.

This will help you get your layout.

#3

Thanks for the reply, I was already playing around and got to here:

Here is my code: GitHub - rkristelijn/react-dhx: Sample app to see how to integrate React and DHTMLX (dhx) widgets using version 6.x

When I have time, I will try to learn from the example, please allow some time to see if this solves my issue.

Thanks @Ewan_Jackson

#4

I apologize for the delay.

  1. I create columns and rows, or first rows and columns?

You may create any pattern. It doesn’t matter what you start from cols or rows.

  1. How do i get to resize the layout, like in 5.x, so it uses full height? Do I set some setting on a row, or a column? Should I use custom css for that? If so, is grid layout supported? How would I style it if so?

Could you please, clarify your request. you may attach your layout to the html body, so it will take all the available space, or you may attach it to some container, and the layout will take the sizes of this container.

Now we’re in the process of creating a guide for a simple application built with the new dhtmlxSuite.

#5

The sources of the demo applications are finally available:
https://dhtmlx.com/docs/products/demoApps/dhtmlxFileExplorerDemo/
https://dhtmlx.com/docs/products/demoApps/dhtmlxDashboard/#dashboard
https://dhtmlx.com/docs/products/demoApps/dhtmlxHotelManagement/#rooms&date=2020-05-06
Just press the “download demo” button in the right bottom corner to request the sources