Structure of multicolumn edit dialog

[smartcorestudio]

Hi Oleg! It's me again. I have another suggersion to discuss for the future versions. Let's look at the screensot: In case of using multiple columns edit dialogs have table structure. And if we have high textareas in one of the columns we'll have the same height of the cells in another columns of the same row. I tried to distribute textareas to match row heights, although maybe I had to destroy the optimal order of the fields. And even in this case somewhere I had undesireble extra spacing between fields (see red arrows). If the coulumns of the table were independent it would be easier to make the form more compact, logical and visually attractive. What do you think about this?

[OlegKi]

The dialog have two controls in one row (the first row) which have different types: <input> and <textarea>. I personally use use multi-column form of Edit Dialog very seldom, but if I do it I use always the same controls (both <input>'s or both <textarea>'s). How you imagine that different controls could looks good? Do you have some suggestion?

[smartcorestudio]

My only suggestion is to make the columns independent from each other. Why can't we do something like this?: It will be much more flexible In this example Controls 1.1, 1.2, 1.3, 2.4, 2.6 could be textareas with different heights.

[OlegKi]

I'm not a designer. The look of muli-column Edit dialog with .ui-jqdialog-content .DataTD { vertical-align: middle; } looks pretty good too: Nevertheless one can consider to use the format of multi-column dialog which you suggested as an option for the future release of jqGrid.

[smartcorestudio]

OK! Sometimes it's not just about the design. On this screenshot you can see that the form is very high, it hardly fits height on some smaller screens (or if someone uses zooming in browser). But if we'll get rid of 2 extra lines in the second column we can make it a little more compact Also, lets look at the form from yours screenshot. Let's imagine (theoretically) that you open it on a smartphone, phablet or a similar device with portrait orientation. What do you prefer: to have horisontal scroll or to have just one column, placing the content of the 2nd column below the first? We can't do the last variant in the current table layout.

[smartcorestudio]

So, my suggestion is: But of course it's you who'll decide is it good or not.

[OlegKi]

I understood you exactly in the same way before. I thought additionally about providing more flexible way to will the form content in the future. jqGrid fill currently the rows of the grid based on the fixed template <td class='CaptionTD'></td><td class='DataTD'></td> and then it fills the template with data. See the lines of code. One have many code duplicates which do very close things. To get the data from the form jqGrid uses $(frmtb+" > tbody > tr > td .FormElement") selector (see the line) which can be easy replaced to more common one (for example just to $(frmtb+" .FormElement")).

I thought about providing the possibility to make the templates for filling the form data more public. So that one could be replace the table with another container and replace the rows with another structures.

In the way one could not only provide more flexible way to fill the Add/Edit/View forms, but one will reduces a lot of code duplicates existing in the current code.

[smartcorestudio]

If I understood your suggestion correctly, it will even allow to create structures like this one, for example: Great!

[OlegKi]

Exactly!

One will be relatively free in the structure of the content of the form. Important will be just to place editing elements created by jqGrid somewhere in your template. Every editing controls will have class="FormElement" and name attribute which is the same like name in colModel. It's enough to read the results of editing by jqGrid.

But I don't want to make any large changes in the existing code now. The described scenario is for the next version.

[smartcorestudio]

Yes, I understood. I saw your milestone tag