Draggable Tables for Admin Interfaces

8 views
Skip to first unread message

Dmitry A.

unread,
Feb 4, 2010, 5:20:19 PM2/4/10
to In-Portal Development Team
Hello mates,


I have came across nice JS script for making table columns dragable

[URL HREF=http://www.danvk.org/wp/dragtable/]http://www.danvk.org/wp/
dragtable/[/URL]

Would be nice to have integrated in In-Portal Admin Console?

What do you think of it?


Cheers!

Dmitry A.

unread,
Feb 4, 2010, 5:33:27 PM2/4/10
to In-Portal Development Team
Here is a good resource for this with many examples - most use JQuery
which is good news.

http://www.webdesignbooth.com/15-great-jquery-plugins-for-better-table-manipulation/

DA.

Phil

unread,
Feb 5, 2010, 7:07:53 AM2/5/10
to In-Portal Development Team
Hi,

of course this is a nice feature, but the most interesting isn't about
dragging table, but sorting: what a pleasure to have sorting in just a
clic, when actually we need to wait for Ajax to refresh page on in-
portal.

Changing column doesn't seems to me the most important operation, but
sorting can be used on a daily basis.

Phil.

Alexander Obuhovich

unread,
Feb 5, 2010, 7:14:42 AM2/5/10
to in-por...@googlegroups.com
Ajax sorting is currently available only for catalog any other grid which displays "Loading ..." sometimes. There is a global plan to convert all grids to ajax here http://groups.google.com/group/in-portal-dev/browse_thread/thread/599866d3bef95d5a and it's not for sorting alone, also for search/filters, pagination and so on. Looks handy and attractive, but it's not implemented yet. Should improve administrative console speed, because it mostly consists of grids.

--
You received this message because you are subscribed to the Google Groups "In-Portal Development Team" group.
To post to this group, send email to in-por...@googlegroups.com.
To unsubscribe from this group, send email to in-portal-de...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/in-portal-dev?hl=en.




--
Best Regards,

http://www.in-portal.com
http://www.alex-time.com

Dmitry V. Andrejev

unread,
Feb 5, 2010, 11:16:30 AM2/5/10
to in-por...@googlegroups.com
Hi Phil,


Not to upset you but Sorting isn't the best idea with JS and we shouldn't be considering it as an option for replacement since we are planning to support BIG sets of data and not 20-50 rows with 3 columns. In our cases we are talking about 500 per page and it can be tens of even hundreds pages with many columns which will never work. For that reason we are going to implement Ajax as Alexander pointed out.

On the other hard what I liked in the dragging approach is 2 things (which will help us to improve interfaces without sacrificing anything) and I need you guys to express your opinion on these two:

1. Ability to Drag Columns - this will eliminate current Pop-up for column picker to set order for fields.
2. Ability to Toggle (On/Off) Columns - this will eliminate current Pop-up for column picker and make it super fast to manage.

Since both parts are implemented with JQuery I think we should consider it.


Thanks.

DA.
-- 
With best regards,

Dmitry V. Andrejev

Alexander Obuhovich

unread,
Feb 5, 2010, 11:35:00 AM2/5/10
to in-por...@googlegroups.com
First of all if something is done on jQuery it's not the thing, that we want above all. It's easy noticeable, from your posts (in this discussion) Dmitry, that you don't like that column picker popup very much, but please consider the following:
  • with drag and drop approach we are unable to move several columns at once
  • user's are not moving column every day, so we load moving code only, when user is really tries to move
  • with drag and drop approach we need to load additional drag and drop processing code every time page is loaded no matter if dragging is going to be performed
  • in case if you have 100 rows and 100 columns displayed how you exactly imagine dragging process to the end of list (especially if it's not visible)

Phil

unread,
Feb 6, 2010, 6:26:25 AM2/6/10
to In-Portal Development Team
Hello guys,

It's a nice techno showcase to drag tables and toggle columns on/off,
but:

- as Alexander and I said before, we don't use this function everyday
(but rather 1/month to re-arrange all new products for example)

- if we have a toggle on/off, it's the same as the actual column
picker in another design flavor, because you'll need to display all
available columns, then putting the column picker in a drop-down menu
(as labels in Gmail ^-^) will do the thing, am I wrong?

- Filters functions are far more important than others discussed
before in everyday use

- as we are talking about sorting and filters, let me note that
"numbers of item to display" menu is really too much far away, we need
clics and precise mouse pointing to stay in the drop down menu and
select what we need, this should be in direct access. this function is
also used everyday !

Phil.


On Feb 5, 5:35 pm, Alexander Obuhovich <aik.b...@gmail.com> wrote:
> First of all if something is done on jQuery it's not the thing, that we want
> above all. It's easy noticeable, from your posts (in this discussion)
> Dmitry, that you don't like that column picker popup very much, but please
> consider the following:
>

>    - with drag and drop approach we are unable to move several columns at
>    once
>    - user's are not moving column every day, so we load moving code only,


>    when user is really tries to move

>    - with drag and drop approach we need to load additional drag and drop


>    processing code every time page is loaded no matter if dragging is going to
>    be performed

>    - in case if you have 100 rows and 100 columns displayed how you exactly


>    imagine dragging process to the end of list (especially if it's not visible)
>

> On Fri, Feb 5, 2010 at 6:16 PM, Dmitry V. Andrejev <dandre...@gmail.com>wrote:
>
>
>
> >  Hi Phil,
>
> > Not to upset you but Sorting isn't the best idea with JS and we shouldn't
> > be considering it as an option for replacement since we are planning to
> > support BIG sets of data and not 20-50 rows with 3 columns. In our cases we
> > are talking about 500 per page and it can be tens of even hundreds pages
> > with many columns which will never work. For that reason we are going to
> > implement Ajax as Alexander pointed out.
>
> > On the other hard what I liked in the dragging approach is 2 things (which
> > will help us to improve interfaces without sacrificing anything) and I need
> > you guys to express your opinion on these two:
>
> > 1. Ability to Drag Columns - this will eliminate current Pop-up for column
> > picker to set order for fields.
> > 2. Ability to Toggle (On/Off) Columns - this will eliminate current Pop-up
> > for column picker and make it super fast to manage.
>
> > Since both parts are implemented with JQuery I think we should consider it.
>
> > Thanks.
>
> > DA.
>
> > On 2/5/2010 6:14 AM, Alexander Obuhovich wrote:
>
> > Ajax sorting is currently available only for catalog any other grid which
> > displays "Loading ..." sometimes. There is a global plan to convert all
> > grids to ajax here

> >http://groups.google.com/group/in-portal-dev/browse_thread/thread/599...it's not for sorting alone, also for search/filters, pagination and so


> > on. Looks handy and attractive, but it's not implemented yet. Should improve
> > administrative console speed, because it mostly consists of grids.
>

> > On Fri, Feb 5, 2010 at 2:07 PM, Phil <p...@domicilis.biz> wrote:
>
> >> Hi,
>
> >> of course this is a nice feature, but the most interesting isn't about
> >> dragging table, but sorting: what a pleasure to have sorting in just a
> >> clic, when actually we need to wait for Ajax to refresh page on in-
> >> portal.
>
> >> Changing column doesn't seems to me the most important operation, but
> >> sorting can be used on a daily basis.
>
> >> Phil.
>
> >> On Feb 4, 11:20 pm, "Dmitry A." <dandre...@gmail.com> wrote:
> >> > Hello mates,
>
> >> > I have came across nice JS script for making table columns dragable
>

> >> > [URL HREF=http://www.danvk.org/wp/dragtable/]http://www.danvk.org/wp/<http://www.danvk.org/wp/dragtable/%5Dhttp://www.danvk.org/wp/>


> >> > dragtable/[/URL]
>
> >> > Would be nice to have integrated in In-Portal Admin Console?
>
> >> > What do you think of it?
>
> >> > Cheers!
>
> >> --
> >> You received this message because you are subscribed to the Google Groups
> >> "In-Portal Development Team" group.
> >> To post to this group, send email to in-por...@googlegroups.com.
> >> To unsubscribe from this group, send email to

> >> in-portal-de...@googlegroups.com<in-portal-dev%2Bunsu...@googlegroups.com>


> >> .
> >> For more options, visit this group at
> >>http://groups.google.com/group/in-portal-dev?hl=en.
>
> > --
> > Best Regards,
>
> >http://www.in-portal.com
> >http://www.alex-time.com
> > --
> > You received this message because you are subscribed to the Google Groups
> > "In-Portal Development Team" group.
> > To post to this group, send email to in-por...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > in-portal-de...@googlegroups.com.
> > For more options, visit this group at
> >http://groups.google.com/group/in-portal-dev?hl=en.
>
> > --
> > With best regards,
>
> > Dmitry V. Andrejev
>
> >  --
> > You received this message because you are subscribed to the Google Groups
> > "In-Portal Development Team" group.
> > To post to this group, send email to in-por...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > in-portal-de...@googlegroups.com<in-portal-dev%2Bunsu...@googlegroups.com>

Alexander Obuhovich

unread,
Feb 6, 2010, 11:25:44 AM2/6/10
to in-por...@googlegroups.com
About number of items to display:

Do you have any idea where we can put that "items per page" selector to be more accessible? Also related to pagination is grids do you think that's it useful in case if we have more, then 50 pages? For example I saw pagination that looks like this:

"<< < 1 ... 5 6 [7] 8 ... 55 > >>", where first and last page is always displayed and middle part is changed. Dots ("...") are shown only, when there is gap between first/last page related to nearby page (e.g. 1st and 2nd doesn't have a gap, but 1st and 3rd does).

Dmitry A.

unread,
Feb 6, 2010, 2:00:06 PM2/6/10
to In-Portal Development Team
Hi everyone,

1. I see you guys don't like the idea of improving Admin Grids. I am
trying to push it in right now - I think we can address this along
when we'll be converting to Ajax grids, but it's just something that
can make our Interfaces and usability stand out among others.

2. About pagination, Yes and again Yes:

a. it's too far right and you have to catch it while it should be
handy and at LEAST at the bottom left corner (total can go to the
bottom right).
b. I like the idea about having last page available if there are more
then 10. I can add that instead of "..." we can have a drop-down or
small input field so User can enter page number directly.

What's you feedback on this, plus how hard is to implement?

DA.

> >http://groups.google.com/group/in-portal-dev/browse_thread/thread/599...<http://groups.google.com/group/in-portal-dev/browse_thread/thread/599...>not for sorting alone, also for search/filters, pagination and so

> > > >> in-portal-de...@googlegroups.com<in-portal-dev%2Bunsubscribe@goog legroups.com>
> > <in-portal-dev%2Bunsu...@googlegroups.com<in-portal-dev%252Bunsubscribe @googlegroups.com>


>
> > > >> .
> > > >> For more options, visit this group at
> > > >>http://groups.google.com/group/in-portal-dev?hl=en.
>
> > > > --
> > > > Best Regards,
>
> > > >http://www.in-portal.com
> > > >http://www.alex-time.com
> > > > --
> > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "In-Portal Development Team" group.
> > > > To post to this group, send email to in-por...@googlegroups.com.
> > > > To unsubscribe from this group, send email to

> > > > in-portal-de...@googlegroups.com<in-portal-dev%2Bunsubscribe@goog legroups.com>


> > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/in-portal-dev?hl=en.
>
> > > > --

> > > > With best regards,
>
> > > > Dmitry V. Andrejev
>
> > > >  --
> > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "In-Portal Development Team" group.
> > > > To post to this group, send email to in-por...@googlegroups.com.
> > > > To unsubscribe from this group, send email to

> > > > in-portal-de...@googlegroups.com<in-portal-dev%2Bunsubscribe@goog legroups.com>
> > <in-portal-dev%2Bunsu...@googlegroups.com<in-portal-dev%252Bunsubscribe @googlegroups.com>


>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/in-portal-dev?hl=en.
>
> > > --
> > > Best Regards,
>
> > >http://www.in-portal.comhttp://www.alex-time.com
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "In-Portal Development Team" group.
> > To post to this group, send email to in-por...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > in-portal-de...@googlegroups.com<in-portal-dev%2Bunsubscribe@goog legroups.com>

Alexander Obuhovich

unread,
Feb 6, 2010, 2:33:09 PM2/6/10
to in-por...@googlegroups.com
A lot of information all mixed together without examples. About new feature placement I'm not sure, we already have a lot of info in left (totals info) and right (pagination) bottom corners. Please provide example of what you are proposing including data we already have at the grid bottom.

To unsubscribe from this group, send email to in-portal-de...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/in-portal-dev?hl=en.

Dmitry Andrejev

unread,
Feb 6, 2010, 3:34:47 PM2/6/10
to in-por...@googlegroups.com
Okay here is some visual:

1. I would recommend to Pagination to the left and Totals to the right side (switch around). see attachment

OR 

2. I would recommend change Pagination in the following way, see 2nd screenshot ( http://flexigrid.info/  at the bottom )


DA.
FireShot capture #001 - PaginationVSTotals.jpg
Capture #004 - 'Flexigrid - Web 2_0 Javscript Grid for jQuery' - flexigrid_info.jpg

Alexander Obuhovich

unread,
Feb 7, 2010, 5:00:25 AM2/7/10
to in-por...@googlegroups.com
2nd solution seems very useful and it combines totals information and pagination and per page controls. What about pagination above the grid in top right corner? Shall we keep it in old format or it would be also in new format, but without totals information?

Dmitry Andrejev

unread,
Feb 7, 2010, 12:23:16 PM2/7/10
to in-por...@googlegroups.com
To be honest I like the whole setup how it shows Pagination and Counters info too...

What about you guys?

DA

Alexander Obuhovich

unread,
Feb 7, 2010, 1:33:55 PM2/7/10
to in-por...@googlegroups.com
So what about pagination bar on top right corner?

Phil

unread,
Feb 7, 2010, 4:19:06 PM2/7/10
to In-Portal Development Team
Hi,

I like very much how flegrid works, this is all-in-one tool perfectly
for browsing whole catalog.
As tool is powerfull, we should maybe put it on the top of listing in
"Show all" mode, what do you think?

About "number of item to display", this is also included in flexgrid,
and I was about to propose a drop down menu before reading Dmitry's
post, perfect :-)

Phil.

On Feb 7, 7:33 pm, Alexander Obuhovich <aik.b...@gmail.com> wrote:
> So what about pagination bar on top right corner?
>

> On Sun, Feb 7, 2010 at 7:23 PM, Dmitry Andrejev <dandre...@gmail.com> wrote:
> > To be honest I like the whole setup how it shows Pagination and Counters
> > info too...
>
> > What about you guys?
>
> > DA
>

> > On Sun, Feb 7, 2010 at 4:00 AM, Alexander Obuhovich <aik.b...@gmail.com>wrote:
>
> >> 2nd solution seems very useful and it combines totals information and
> >> pagination and per page controls. What about pagination above the grid in
> >> top right corner? Shall we keep it in old format or it would be also in new
> >> format, but without totals information?
>

> >> On Sat, Feb 6, 2010 at 10:34 PM, Dmitry Andrejev <dandre...@gmail.com>wrote:
>
> >>> Okay here is some visual:
>
> >>> 1. I would recommend to Pagination to the left and Totals to the right
> >>> side (switch around). see attachment
>
> >>> OR
>
> >>> 2. I would recommend change Pagination in the following way, see 2nd

> >>> screenshot (http://flexigrid.info/ at the bottom )
>
> >>> DA.


>
> >>> On Sat, Feb 6, 2010 at 1:33 PM, Alexander Obuhovich <aik.b...@gmail.com>wrote:
>
> >>>> A lot of information all mixed together without examples. About new
> >>>> feature placement I'm not sure, we already have a lot of info in left
> >>>> (totals info) and right (pagination) bottom corners. Please provide example
> >>>> of what you are proposing including data we already have at the grid bottom.
>

> >>>>> > > > >> in-portal-de...@googlegroups.com<in-portal-dev%2Bunsu...@googlegroups.com>
> >>>>> <in-portal-dev%2Bunsubscribe@goog legroups.com>
> >>>>> > > <in-portal-dev%2Bunsu...@googlegroups.com<in-portal-dev%252Buns...@googlegroups.com><in-portal-dev%252Bunsubscribe


> >>>>> @googlegroups.com>
>
> >>>>> > > > >> .
> >>>>> > > > >> For more options, visit this group at
> >>>>> > > > >>http://groups.google.com/group/in-portal-dev?hl=en.
>
> >>>>> > > > > --
> >>>>> > > > > Best Regards,
>
> >>>>> > > > >http://www.in-portal.com
> >>>>> > > > >http://www.alex-time.com
> >>>>> > > > > --
> >>>>> > > > > You received this message because you are subscribed to
>

> ...
>
> read more »

Alexander Obuhovich

unread,
Feb 8, 2010, 5:50:48 AM2/8/10
to in-por...@googlegroups.com
It looks cool, but there are some major features, that must be present in any replacement (if any) to current grid script:
  • ability to always show column headers during scrolling;
  • ability to have N number of non-scrollble horizontally columns (like Freeze Panels in Microsoft Excel);
  • ability to have more columns, that are visible with horizontal scrollbar, that will reveal hidden colums;
  • ability to have checkbox/radio button column in each row;
  • ability to place images into cells;
  • ability to wrap text in cells to keep moderate row height.
Most important of course is ability to have more columns, then are visible in viewport (that was a problem in In-Portal 4.3.9 and below). Maybe we can extract some ideas from that flexigrid, but total move to it could be really hard to implement.

On the other hand we might consider using interface libraries like Ext.Js and so on, where all type of controls are implemented and web page will look like windows xp.

To unsubscribe from this group, send email to in-portal-de...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/in-portal-dev?hl=en.

Dmitry A.

unread,
Feb 8, 2010, 2:21:46 PM2/8/10
to In-Portal Development Team
Hi guys,


1. Yes, agree with Alex - it's not an easy task and we shouldn't be
just redoing Grids at this moment.

I call that we update our Pagination so it's easier to work with if
it's more doable... Alex what you think, how much time can it take to
have functionality we have on my prev. post?


2. I have checked on Ext library and it looks very powerful in all
directions. I am not sure if it has it's own framework. I am just
afraid will end up with JQuery and 2 other frameworks and it will be
even bigger disaster for us.


DA.

On Feb 8, 4:50 am, Alexander Obuhovich <aik.b...@gmail.com> wrote:
> It looks cool, but there are some major features, that must be present in
> any replacement (if any) to current grid script:
>

>    - ability to always show column headers during scrolling;
>    - ability to have N number of non-scrollble horizontally columns (like


>    Freeze Panels in Microsoft Excel);

>    - ability to have more columns, that are visible with horizontal


>    scrollbar, that will reveal hidden colums;

>    - ability to have checkbox/radio button column in each row;
>    - ability to place images into cells;
>    - ability to wrap text in cells to keep moderate row height.

> > > >>> screenshot (http://flexigrid.info/at the bottom )

> ...
>
> read more »

Dmitry A.

unread,
Feb 26, 2010, 12:18:36 PM2/26/10
to In-Portal Development Team
Quick bump here :)

DA.

> > > > >>> screenshot (http://flexigrid.info/atthe bottom )

> ...
>
> read more »

Phil

unread,
Feb 27, 2010, 4:27:43 PM2/27/10
to In-Portal Development Team
Of course this can be a mess, but I'd like to give you my opinion on
this.

Before willing to use the top-notch technology, with it's hundred of
code lines, we could try tu use the best of the actual tech.

In the features list done by Alexander, it seems to me that we could
perfectly do the job using CSS for the tasks listed by Alexander. CSS
can be very powerfull and could lighten the code (with a little but of
js for switching some css properties ^-^), and last but not least, it
act faster than any Java tool, as it's directly intrepreted by the
browser kernel.

Am I right?

I follow all new techs like jquery and mootools, it's great
demonstration of Java knowledge, but in everyday needs, there are
really not essential, it just smoothes menus, but they are like metal
painting on a car: beautifull, but expensive and of no use for
driving ;-)

If you folks want to play with JS, then the only killing app you could
do will be a local client for in-portal, and here is the resume: get
rid of network lags, no more waiting times in everyday tasks, update
all your catalog in few clics and keep a local and safe copy of your
DB. Do you think community would love this? No, they just could become
addicted :-)

Phil.

> > > > >>> screenshot (http://flexigrid.info/atthe bottom )

> ...
>
> plus de détails »

Alexander Obuhovich

unread,
Feb 28, 2010, 7:35:51 AM2/28/10
to in-por...@googlegroups.com
If you understood you correct Phil, then I also agree with you on interface matter. People love nice looking things, but when it looks nice and doesn't provide the amount of needed functionality, then people will leave it as quick as they find out about that.

Phil

unread,
Mar 3, 2010, 6:44:47 AM3/3/10
to In-Portal Development Team
yes, was we are in admin, it's better to focus on efficiency and easy-
to-use technology.

I also say that most of the tasks you have listed can be achieved just
using CSS properties, what do you think?

On 28 fév, 13:35, Alexander Obuhovich <aik.b...@gmail.com> wrote:
> If you understood you correct Phil, then I also agree with you on interface
> matter. People love nice looking things, but when it looks nice and doesn't
> provide the amount of needed functionality, then people will leave it as
> quick as they find out about that.
>

> > > > > > >>> screenshot (http://flexigrid.info/atthebottom )

> ...
>
> plus de détails »

Alexander Obuhovich

unread,
Mar 3, 2010, 6:47:26 AM3/3/10
to in-por...@googlegroups.com
I'm not big expert on CSS3 advanced techniques, could you please list what exactly of my list could be implemented using CSS without javascript and will work in all browsers. I don't really understand how scrolling stuff and fixed columns could be realized like that.

Phil ..:: domicilis.biz ::..

unread,
Mar 3, 2010, 7:45:44 AM3/3/10
to in-por...@googlegroups.com
well, I wasn't thinking about CSS3, but rather displaying row and columns using CSS rather than tables. Once we are using CSS, we can use "visibility" and "display" tags to achieve it. I can send you an online example if you want.

Here are CSS tags I propose to use:


- ability to always show column headers during scrolling;
- ability to have N number of non-scrollble horizontally columns

Using "display: fixed;" for selected css ID. (It suppose all lines are given an unique CSS ID when generated)

- ability to have more columns, that are visible with horizontal scrollbar, that will reveal hidden colums;

I don't understand this :-D

- ability to have checkbox/radio button column in each row;

is there any problem about that?

- ability to place images into cells;

thanks to "background-image" (to stay CSS compliant, and not to use "src image" in html)

- ability to wrap text in cells to keep moderate row height.

using "width" and "height" for the cell, browser do this, isn't it?

maybe my ideas are too much simple, may you could tell me what I've missed in this scheme?


2010/3/3 Alexander Obuhovich <aik....@gmail.com>:

Alexander Obuhovich

unread,
Mar 3, 2010, 7:50:09 AM3/3/10
to in-por...@googlegroups.com
Event in design tips there is a tip, that you must use tables to display tabular data (which is this case). Try to resize window to make is smaller and see, that table case will work, but floated divs will jump under each other. That's why i'm not so quick about using float divs in administrative console interfaces at all.

Dmitry Andrejev

unread,
Mar 25, 2010, 2:47:04 AM3/25/10
to in-por...@googlegroups.com
Bump here, we need to review this and possibly finalize into specification. Then file a task.

Are you ready to pickup where we left off?

DA.

Alexander Obuhovich

unread,
Mar 25, 2010, 4:07:18 PM3/25/10
to in-por...@googlegroups.com
We need to create pagination design improvement task (see Capture #004 - 'Flexigrid - Web 2_0 Javscript Grid for jQuery' - flexigrid_info.jpg from one of your previous posts) based on this.

To unsubscribe from this group, send email to in-portal-dev+unsubscribegooglegroups.com or reply to this email with the words "REMOVE ME" as the subject.
Reply all
Reply to author
Forward
0 new messages