Skip to search.
ydn-javascript · Yahoo! User Interface Library Group
  • Members Only
  • Links
  • Polls
  • Members
  • Calendar
  • Promote
  • Groups Labs (Beta)

Group Information

  • Members: 10919
  • Category: JavaScript
  • Founded: Dec 15, 2005
  • Language: English
? Already a member? Sign in to Yahoo!

Yahoo! Groups Tips

Did you know...
Hear how Yahoo! Groups has changed the lives of others. Take me there.

Messages

   Messages Help
Message #
Search:
Advanced
YUI Datatable confgurable hide/show columns   Message List  
Reply Message #22701 of 52481 |
Re: YUI Datatable confgurable hide/show columns

Satyam,

Thanks. I figured out the async part. It works fine now. I can't even
imagine how I could have done this without your help. Thank you very
much.

About my original request to hide/show column, it works fine but it
gets messed up when there is pagination enabled.
e.g. Once user saves what columns are hidden,next time if user open
the same page, datatable does not show those columns (I hide them
with className:hidden). Now If user enables one of the hidden
column 'Date',it appears with header and data and everything looks
ok.
Now user click on Paginated 'next Page',once the page shows, now the
Header of the column 'date' is still visible but the new data on the
second page does not appear and has a class 'hidden' applied. Because
of this data gets jumbled up. I think even in your hide column
example (http://www.satyam.com.ar/yui/HidingColumns.html) with
multiple pages enabled, you will get the same thing.
How should I address this?
Thanks

--- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
>
> I can't tell you much because what is visible depends on where you
put your
> functions within the code so getPage() might or might not be
visible.
> Notice that the callbacks of asyncRequest don't get the same scope
> asyncRequest had when it was called, not always, anyway. That is
why one of
> the properties you can set is the scope for those callbacks. If you
don't
> set it explicitly .... well, actually, I would have to check the
> documentation, but in case of doubt (and I usually feel safer
doubting) it
> is better to set the scope explicitly. The Connection Manager docs
tells
> you how.
>
>
> From our previous conversation (still reflected in the subject
line) I did
> the following example:
>
> http://www.satyam.com.ar/yui/HidingColumns.html
>
> Satyam
>
>
> ----- Original Message -----
> From: "merahul94538" <merahul94538@...>
> To: <ydn-javascript@yahoogroups.com>
> Sent: Tuesday, December 18, 2007 5:40 PM
> Subject: [ydn-javascript] Re: YUI Datatable confgurable hide/show
columns
>
>
> > You are right. I should not store this in DOM but instead deal
with
> > one of the variables.I saw your example yesterday about retrieving
> > meta information from server which makes sense.
> >
> > I would still be curious to know if I do a asyncrequest to
retrieve
> > table information on page load, how do i make datatable to be
loaded
> > until that request is completed successfully. I tried to call
getPage
> > function onSuccess Callback but i think there is an issue with
scope
> > and I am not able to find any DOM elements when getpage is called
> > onSuccess.
> >
> > any suggestion on this?
> >
> > Thanks
> >
> > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@> wrote:
> >>
> >> If you mean to build the table dynamically from data sent from
the
> > server,
> >> this example might be of help:
> >>
> >> http://www.satyam.com.ar/yui/dt_serverdriven.html
> >>
> >> It has some comments at the bottom.
> >>
> >> What I don't understand is why would you store your definitions
in
> > any DOM
> >> element instead of keeping it in some variable. Locating
variables
> > is
> >> somewhat confusing at first, sometimes you reach them via 'this',
> > sometimes
> >> you have to specify the whole YAHOO.example.whatever or any other
> > namespace
> >> you have used. Then you run it through JSLint and you get a lot
of
> >> warnings. Some people prefer to use the DOM since that's
something
> > they can
> >> count on. If that is the case, avoid going that way, learn to
deal
> > with
> >> variables, scopes and closures. Eventually yuou will have to and
> > it is much
> >> better.
> >>
> >> Satyam
> >>
> >> ----- Original Message -----
> >> From: "merahul94538" <merahul94538@>
> >> To: <ydn-javascript@yahoogroups.com>
> >> Sent: Tuesday, December 18, 2007 2:31 AM
> >> Subject: [ydn-javascript] Re: YUI Datatable confgurable hide/show
> > columns
> >>
> >>
> >> > Satyam,
> >> > That worked perfect. Thank you so much.
> >> > However I do have a question. I am pretty rusty on my JS
> > concepts. so
> >> > please forgive me if this is something very obvious.
> >> > Following variables myColumns and mycolumnsDefs(see end of this
> >> > message) gets retrieved from database. I am trying to fetch
these
> >> > settings with Connection Manager and in callback function , a
div
> > is
> >> > populated with mycolumndef data in JSON format. Once datatable
> >> > intialized, i need to get the data from DIv, parse it and
assign
> > to
> >> > colArray and myColumnDefs but this doesnt work for me.
> >> > The reason it seems that connection-manager does not finish
with
> >> > request and getPage start initializing the datatable. How
should
> > I do
> >> > this in better way?
> >> > thanks
> >> >
> >> > myColumns =[name,age,address,gender,title,ID,fk_address]
> >> > myColumnDefs = [{key:"name",
> >> > label:"Name",formatter:myCustomFormatter, sortable:true,
> >> > resizeable:true},
> >> > {key:"age", label:"Age", sortable:true, resizeable:true,
> >> > hideable:true},
> >> > {key:"address", label:"Location", sortable:true,
resizeable:true,
> >> > hideable:true},
> >> > {key:"gender", label:"Gender", sortable:true, resizeable:true,
> >> > hideable:true},
> >> > {key:"title", label:"Title",sortable:true, resizeable:true,
> >> > hideable:true}];
> >> >
> >> > --- In ydn-javascript@yahoogroups.com, "merahul94538"
> >> > <merahul94538@> wrote:
> >> >>
> >> >> Satyam,
> >> >>
> >> >> Thanks. I will give this a try. appreciate your help
> >> >>
> >> >> --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@>
wrote:
> >> >> >
> >> >> > The column definitions accepts a className attribute which
can
> > be
> >> >> either a
> >> >> > simple string or an array of string with the names of
classes
> > to
> >> > be
> >> >> applied
> >> >> > to each column. You can add to the columns definition of
> > columns
> >> >> to be
> >> >> > hidden a className if none exists or make it an array with
the
> >> >> existing
> >> >> > class name plus your own hiding className so both will be
> >> > applied.
> >> >> That
> >> >> > className might simply have the attribute display:none and
that
> >> >> might be the
> >> >> > key to your contextMenu to know which columns are hidden
and
> >> > which
> >> >> aren't.
> >> >> > This should keep your loading times fast as you won't need
to
> > go
> >> >> through
> >> >> > each and every cell hiding the column on first load.
> >> >> >
> >> >> > Those classNames are preserved in between table refreshes
due
> > to
> >> >> sorts or
> >> >> > paging. On hiding or unhiding columns you will have to
> >> > add/remove
> >> >> the
> >> >> > classname from the heading yourself and you can either
> > add/remove
> >> >> it on each
> >> >> > cell or change the className setting for the column and call
> >> >> refreshView to
> >> >> > let DataTable do it for you. You would have to change the
> >> >> className in the
> >> >> > column definition either way in case of further calls to
> >> >> refreshView.
> >> >> >
> >> >> > Satyam
> >> >> >
> >> >> >
> >> >> >
> >> >> > ----- Original Message -----
> >> >> > From: "merahul94538" <merahul94538@>
> >> >> > To: <ydn-javascript@yahoogroups.com>
> >> >> > Sent: Saturday, December 15, 2007 10:22 PM
> >> >> > Subject: [ydn-javascript] YUI Datatable confgurable
hide/show
> >> >> columns
> >> >> >
> >> >> >
> >> >> > > Hello All,
> >> >> > >
> >> >> > > I am using Dataview(http://yuiblog.com/blog/?
s=sub+classing)
> > to
> >> >> give
> >> >> > > an option to user to hide unwanted columns dynamically.so
> > when
> >> >> user
> >> >> > > opens the page, they see all columns, then user can
choose to
> >> > hide
> >> >> > > the unwanted columns. What I want to be able to do is
that If
> >> > user
> >> >> > > hides a columns and save that setting (by click on save
> >> > view),next
> >> >> > > time when user comes back, they should see the that column
> >> > hidden
> >> >> by
> >> >> > > default.
> >> >> > >
> >> >> > > e.g.
> >> >> > >
> >> >> > > myColumns =[name,age,address,gender,title,ID,fk_address]
> >> >> > >
> >> >> > >
> >> >> > > myColumnDefs = [{key:"name",
> >> >> > > label:"Name",formatter:myCustomFormatter, sortable:true,
> >> >> > > resizeable:true},
> >> >> > > {key:"age", label:"Age",
> >> >> > > sortable:true, resizeable:true, hideable:true},
> >> >> > > {key:"address",
> > label:"Location",
> >> >> > > sortable:true, resizeable:true, hideable:true},
> >> >> > > {key:"gender",
> > label:"Gender",
> >> >> > > sortable:true, resizeable:true, hideable:true},
> >> >> > > {key:"title",
label:"Title",
> >> >> > > sortable:true, resizeable:true, hideable:true},
> >> >> > > ];
> >> >> > >
> >> >> > > What if, User choose to see only
> >> >> > >
> >> >> > > name,address
> >> >> > >
> >> >> > > another saved view with
> >> >> > >
> >> >> > > name,Age,gender
> >> >> > >
> >> >> > > Once users see these views, user should still be able to
> > right
> >> >> click
> >> >> > > on the menu and add the available column.
> >> >> > >
> >> >> > > What would be the best way to approach this? I could do
the
> >> >> similar
> >> >> > > hiding of colum when datatable is loading but I feel that
if
> >> > there
> >> >> > > are 20 total viewable columns available in datatable and
> >> > user's
> >> >> view
> >> >> > > only has 1, there is lot of hidin to do. Which will affect
> >> >> > > performance.
> >> >> > >
> >> >> > > Is there any way to accomplish this when datatable is
> > loading,
> >> > so
> >> >> > > that datatable only shows one column but still allow user
to
> > add
> >> >> > > other columns to the view?
> >> >> > >
> >> >> > > Any suggestions here please?
> >> >> > >
> >> >> > > thanks in advance
> >> >> > >
> >> >> > >
> >> >> > >
> >> >> > > What would b
> >> >> > >
> >> >> > >
> >> >> > >
> >> >> > >
> >> >> > > Yahoo! Groups Links
> >> >> > >
> >> >> > >
> >> >> > >
> >> >> > >
> >> >> > >
> >> >> > > --
> >> >> > > No virus found in this incoming message.
> >> >> > > Checked by AVG Free Edition.
> >> >> > > Version: 7.5.503 / Virus Database: 269.17.2/1184 - Release
> >> > Date:
> >> >> > > 14/12/2007 11:29
> >> >> > >
> >> >> > >
> >> >> >
> >> >>
> >> >
> >> >
> >> >
> >> >
> >> >
> >> > Yahoo! Groups Links
> >> >
> >> >
> >> >
> >> >
> >> >
> >> > --
> >> > No virus found in this incoming message.
> >> > Checked by AVG Free Edition.
> >> > Version: 7.5.503 / Virus Database: 269.17.4/1187 - Release
Date:
> >> > 16/12/2007 11:36
> >> >
> >> >
> >>
> >
> >
> >
> >
> >
> > Yahoo! Groups Links
> >
> >
> >
> >
> >
> > --
> > No virus found in this incoming message.
> > Checked by AVG Free Edition.
> > Version: 7.5.503 / Virus Database: 269.17.4/1188 - Release Date:
> > 17/12/2007 14:13
> >
>
Tue Dec 18, 2007 11:41 pm

Show Message Option
merahul94538
Offline Offline
Send Email Send Email

Message #22701 of 52481 |
Expand Messages Author Sort by Date

Hello All, I am using Dataview(http://yuiblog.com/blog/?s=sub+classing) to give an option to user to hide unwanted columns dynamically.so when user opens the... 		merahul94538 Offline Send Email Dec 15, 2007
9:22 pm

The column definitions accepts a className attribute which can be either a simple string or an array of string with the names of classes to be applied to each...
Satyam
satyamutsa Online Now Send Email 		Dec 16, 2007
11:17 am

Satyam, Thanks. I will give this a try. appreciate your help ... either a ... applied ... to be ... existing ... That ... might be the ... aren't. ... through ...
merahul94538 Offline Send Email Dec 16, 2007
6:03 pm

Satyam, That worked perfect. Thank you so much. However I do have a question. I am pretty rusty on my JS concepts. so please forgive me if this is something...
merahul94538 Offline Send Email Dec 18, 2007
1:31 am

I just realized that the newly release selector component would make hiding and showing columns far easier. All cells, even header cells have a className built...
Satyam
satyamutsa Online Now Send Email 		Dec 17, 2007
6:12 pm

If you mean to build the table dynamically from data sent from the server, this example might be of help: http://www.satyam.com.ar/yui/dt_serverdriven.html It...
Satyam
satyamutsa Online Now Send Email 		Dec 18, 2007
8:26 am

You are right. I should not store this in DOM but instead deal with one of the variables.I saw your example yesterday about retrieving meta information from...
merahul94538 Offline Send Email Dec 18, 2007
4:40 pm

I can't tell you much because what is visible depends on where you put your functions within the code so getPage() might or might not be visible. Notice that...
Satyam
satyamutsa Online Now Send Email 		Dec 18, 2007
9:57 pm

Satyam, Thanks. I figured out the async part. It works fine now. I can't even imagine how I could have done this without your help. Thank you very much. About...
merahul94538 Offline Send Email Dec 18, 2007
11:41 pm

I just updated the example with client-side pagination. The problem is that though the DataTable tries to reuse the rows it already has created, some...
Satyam
satyamutsa Online Now Send Email 		Dec 19, 2007
8:41 am

Thanks I will give this a shot. However, in my case, when the datatable is loaded first time, I may have 10 columns hidden by default. If now,user unhide any...
merahul94538 Offline Send Email Dec 19, 2007
5:17 pm

Satyam, What you suggested worked for me partly. Only problem is that overhead of keeping those columns shown on each page and sluggishness. Here is what I...
merahul94538 Offline Send Email Dec 20, 2007
6:21 pm

Satyam, This is a great example. Is it possible to also support sortable columns in addition to hiding columns? Thanks, Albert ... columns...
almt_2000 Offline Send Email Jan 9, 2008
9:28 pm

There is something that I don't understand, the script takes time hiding columns and ensuring those columns remain hidden when there are redrawn or rows are...
Satyam
satyamutsa Online Now Send Email 		Dec 20, 2007
6:37 pm

Yep. you are correct. Once user hides some columns and save them. Next time myColumnDef will have className='hide' appended for hidden columns. So now if user...
merahul94538 Offline Send Email Dec 20, 2007
6:42 pm

I think i will try to do what you recommended and have user hide array available and hide the columns when page is loaded. I was hoping that className='hide'...
merahul94538 Offline Send Email Dec 20, 2007
6:46 pm

Satyam, All worked for me. thanks for your help. one thing i wanted to point out that on your examples there is something wrong with sorted columns formatting....
merahul94538 Offline Send Email Dec 21, 2007
5:10 am

It is fixed now. Thanks for telling me, I didn't notice. It was quite funny, the header got the proper style, but the rest of the column lagged one click...
Satyam
satyamutsa Online Now Send Email 		Dec 21, 2007
8:32 am

How can i hide a column initially at the time loading the table as i need to use those values at the time of row click. Ragu...
balaragunath Offline Send Email Jan 4, 2008
5:42 am

You can keep that column in the fields definition on the DataSource but skip it on the column definitions of the DataTable. That way the data will be ...
Satyam
satyamutsa Online Now Send Email 		Jan 4, 2008
8:05 am

Thanks, Albert. The goal of the example was to show how to hide and show the columns. The interaction with the user is your choice, you can hide/show columns...
Satyam
satyamutsa Online Now Send Email 		Jan 9, 2008
10:37 pm

Hi Satyam, What I meant is if there's a way to do both? Say shift-click to hide the column and mouse-click to sort the column? I couldn't see a way to...
almt_2000 Offline Send Email Jan 9, 2008
11:47 pm

There is headerCellDblclickEvent: http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#headerCellDblclickEvent And then there are context menus...
Satyam
satyamutsa Online Now Send Email 		Jan 10, 2008
4:32 pm

... http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#headerCellDblclickEvent ... Thanks for the feedback. I didn't see the double click, that...
almt_2000 Offline Send Email Jan 10, 2008
7:39 pm
< Prev Topic  |  Next Topic >
Message #
Search:
Advanced
Copyright © 2010 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Guidelines NEW - Help