Achieving a page layout & behavior close to simple HTML tables

0
0

I’m re-implementing part of a UI (mentioned in some other recent questions).  Formerly, this system generated a complete JQuery application which was then inserted into a VWG HtmlBox.  I don’t want to replicate that behavior for reasons discussed in other posts/questions.

Instead, I’ve implemented a (more) proper back-end service that returns all of the data for this page as a typed DataSet – I chose DataSet because it has a decent designer and it supports full data binding with things like DataGridView out of the box.  I could change to another representation if it’s helpful to do so – no biggie.

So here’s the question:  Do you have any guidelines or examples of how to use DataGridView (or another WiseJ component) to get HTML <table>-like behavior?

  • Automatic sizing to the content (no scroll bars)
  • Flow layout for the whole page
  • Read-only

This portion of the UI is read only – I do need to have buttons or button-like behaviors in some of the grids, but no editing, adding, deleting of rows.  It’s a report, not an editor.  One thought is to implement it AS a report, using the Microsoft ReportViewer control to host, but I’m not crazy about that idea because of the horrible performance of ReportViewer.

Thoughts?

Questions
Share
  • You must to post comments
Filter
Sort by: Recently Active
0
0

Thanks Julie & Frank.

I’m experimenting with getting all of the DGVs to behave properly now.  I’m finding it very difficult to get this to work. (Visual Studio 17.10.4, WiseJ designer 3.5.10, WiseJ runtime).

  • Upgrading to the latest WiseJ fixed a TON of designer bugs – awesome!
  • Main problems now:
    • TableLayoutPanel with 7 rows, 1 column
      • row with FlowLayoutPanel with button & label
      • 6 rows each holding a single DGV, rows are set to AutoSize
  • All DGVs are set to AutoSize=true – they do indeed size to content height-wise, but they retain their original designer width regardless of the content.
  • Setting the DGVs to Dock:Fill causes them to disappear from the designer (they end up with a height of 0).
  • Setting AutoSize to false then Dock to true sets the width, but then setting AutoSize back to true makes the DGV disappear.
  • Selecting DGVs in the designer doesn’t work correctly – clicking on the DGV selects the column object.  Right-clicking does select the entire DGV, so that’s a workaround.

I’ll give all the links the Julie supplied a read…  I’m VERY familiar with Windows Forms, so all of these concepts are well known to me.  Even in Windows Forms, the interactions between Dock and AutoSize are not always well behaved – years of building UIs has taught me what works in WinForms – I’m trying to make that knowledge work with WiseJ!

  • Carl Daniel
    I changed the outer container to FlexLayoutPanel – much better behavior. I still have one DGV out of the six that refuses to grow horizontally despite having all the size-related properties set the same. Even manually changing the width from 300 to 600 has no effect – it immediately changes back to 300. Weird.
  • Carl Daniel
    Curious – deleting the troublesome DGV and re-creating it fixed the problem. Must’ve been some property that got changed accidentally so I never re-checked it, or something. Anyway, FlexLayoutPanel and DataGridView seems like it’s going to be the winning solution.
  • You must to post comments
1
0

Frank beat me to it, but I’ll go ahead and post my answer as well:

If you haven’t already, make sure to look at the documentation for DataGridView:
https://docs.wisej.com/docs/controls/lists/datagridview
https://docs.wisej.com/api/wisej.web/lists-and-grids/datagridview

Automatic sizing to the content (no scroll bars)
https://docs.wisej.com/docs/controls/lists/datagridview#autosizing
https://docs.wisej.com/api/wisej.web/lists-and-grids/datagridview#scrollbars
https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.scrollbars

Flow layout for the whole page
You will find the documentation on layouts to be helpful: https://docs.wisej.com/docs/concepts/layouts Note that this applies to all Wisej controls, not just datagridview.
If you want the datagridview to fill the whole page, set Dock to Fill. This can either be done in the designer or via code:
dataGridView1.Dock = Wisej.Web.DockStyle.Fill;
If you have other controls on the page, consider placing the datagridview and the controls inside a FlexLayoutPanel or FlowLayoutPanel.

Read-only
You can set the DataGridView to be read-only either in the designer (set the ReadOnly property of the datagridview) or via code:
dataGridView1.ReadOnly = true;

If you do decide to go the ReportViewer route, I would recommend generating the report and then using the Wisej PDFViewer to display it. https://docs.wisej.com/docs/controls/content/pdfviewer

-Julie

  • You must to post comments
0
0

Hi Carl,

all of this can be done with Wisej.NET and its DataGridView.

Use AutoSizing by mode:
https://docs.wisej.com/docs/controls/lists/datagridview#autosizing

Or use the AutoResize* functions and fine tune with Fill Width and MinSize/MaxSize

For Flowlayout you can use Docking.

ReadOnly is simply a property.

Best regards
Frank

  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.