EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: phreeman on March 20, 2019, 03:11:37 PM



Title: Datagrid Column Wrap
Post by: phreeman on March 20, 2019, 03:11:37 PM
I have an editable datagrid that has a large number of columns (~12) and does not easily fit on the screen in a single row. I need to know if there is a way to wrap (continue) the columns into the next row in the datagrid. Will it still be considered a single row for indexing and retrieving data purposes? When viewing the edatagrid on a mobile device, the issue becomes worse and the columns become so small that it is hard to enter data.

Index:0 Field 1 | Index:0 Field 2 | Index:0 Field 3
Index:0 Field 4 | Index:0 Field 5 | Index:0 Field 6
Index:1 Field 1 | Index:1 Field 2 | Index:1 Field 3
Index:1 Field 4 | Index:1 Field 5 | Index:1 Field 6

Thanks in advance for your help.


Title: Re: Datagrid Column Wrap
Post by: thecyberzone on March 21, 2019, 10:25:34 AM
Just put important fields in row display and use detail-view to display all other fields in detail-view.


Title: Re: Datagrid Column Wrap
Post by: phreeman on March 21, 2019, 10:51:43 AM
Thanks for the reply. The issue us that there are 8-9 editable fields which interact with each other. It would take quite a bit of extra processing to keep the two DOM elements in sync.

I have looked into creating a subgrid to handle the overflow and creating hidden datagrid fields to store the values but it sure would be a lot easier to handle everything within a single datagrid element.

Perhaps a feature improvement in a future release. This would seem to me to be something other users would request. When you try to view a datagrid on a mobile device, many would prefer to wrap a row versus scrolling horizontally to view the all grid columns and scrolling vertically for all the rows. A single vertical scroll with wrapped rows would make mobile browsing much more user friendly.

Dave