Forums

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1   [ 9 posts ]
New Topic | Post Reply | Print view

Charlie McMackin

  • Username: charliemac
  • Joined: Mon Oct 04, 2010 1:30 pm
  • Posts: 3
  • Location: Nashville, TN
  • IRC: tsuru
  • Offline
  • Profile
Tags:

DataTable + DataSource + DataTableScroll --> error

Post Posted: Sat Jan 08, 2011 11:36 am
+0-
I'm having an issue using the DataTable widget with the DataTableDataSource and DataTableScroll plugins. I wanted to ask here before filing a bug to make sure it's not something I'm doing wrong...
I am experiencing this with both 3.3.0pr3 on CDN and a local YUI3 synced with the git repo (as of 7 Jan 2011). Here is a quick link to a working full example

Here's the snippet in question:
Code:
...
    var dataTable2 = new Y.DataTable.Base({
        caption:"DataTable with DataSource and Scroll plugins",
        columnset:columnSet2
    })
        // the following plugin will cause a Javascript error. Commenting it out will return show the datatable fine.
      .plug(Y.Plugin.DataTableScroll, {height: "200px"})
        .plug(Y.Plugin.DataTableDataSource, {datasource:myDataSource}).render("#datatable2");

    dataTable2.datasource.load({request:"q=select%20*%20from%20geo.counties%20where%20place%3D%22TN%22"});


The major issue I'm seeing is that DataTableScroll plugin seems to assume that there will already be data in the DataTable when it is plugged in and since I'm using a DataSource, which doesn't receive data until later, Javascript errors are thrown. I have also tried calling load() on the datasource before plugging the Scroll widget in:
Code:
dataTableWithDSplugin.render("#whereever");
dataTableWithDSplugin.datasource.load({request:"q=myquery"});
dataTableWithDSplugin.plug(Y.Plugin.DataTableScroll, {height:"200px"});

But still no Scroll widget...

Am I using DataTableDataSource + DataTableScroll correctly here? Is there another better, more canonical way of doing what I want to do?

kmsram420

  • Joined: Wed Feb 02, 2011 1:17 pm
  • Posts: 1
  • Offline
  • Profile
Tags:

Re: DataTable + DataSource + DataTableScroll --> error

Post Posted: Wed Feb 02, 2011 1:18 pm
+0-
@Charlie,

Even I have the same problem. Was there any reply from the administrators ? Hoping to find a solution to this.

Alberto Santini

YUI Contributor

  • Offline
  • Profile

Re: DataTable + DataSource + DataTableScroll --> error

Post Posted: Fri Feb 18, 2011 3:54 am
+0-
Charlie filled a ticket:
http://yuilibrary.com/projects/yui3/ticket/2529808

Regards,
IceBox

Alberto Santini

YUI Contributor

  • Offline
  • Profile
Tags:

Re: DataTable + DataSource + DataTableScroll --> error

Post Posted: Fri Feb 18, 2011 11:40 pm
+0-
Hello.

Maybe you may try the same workaround (override onDataReturnInitializeTable method) described in this topic:
viewtopic.php?f=92&t=7180

The problem is similar to this ticket:
http://yuilibrary.com/projects/yui3/ticket/2529975

Hope that helps,
IceBox

Ryan Humenick

  • Username: rh
  • Joined: Sat Mar 19, 2011 3:42 pm
  • Posts: 2
  • Twitter: rh
  • Offline
  • Profile
Tags:

Re: DataTable + DataSource + DataTableScroll --> error

Post Posted: Sat Mar 19, 2011 3:55 pm
+0-
Has anyone gotten DataSource + DataTableScroll to work with YUI 3?

I've tried the onDataReturnInitializeTable workaround and it has re-enabled DataTableSort, but DataTableScroll still has no effect.

Code:
dt.datasource.onDataReturnInitializeTable = function (e) {
    this.get("host").set("recordset", new Y.Recordset({records: e.response.results}));
    this.get("host").plug(Y.Plugin.DataTableSort, {
        lastSortedBy: {
            field: "date_added",
            dir: "desc"
        }
    });
    this.get("host").plug( Y.Plugin.DataTableScroll, { height:"400px" } );
}

Thanks,

Ryan

Alberto Santini

YUI Contributor

  • Offline
  • Profile
Tags:

Re: DataTable + DataSource + DataTableScroll --> error

Post Posted: Sat Mar 19, 2011 4:31 pm
+0-
Hello Ryan.

I didn't test it, but you can give a try to initialize twice the recordset in onDataReturnInitializeTable before adding the plugin.

For instance,

this.get("host").set("recordset",...
...Y.Plugin.DataTableSort...
this.get("host").set("recordset",...
...Y.Plugin.DataTableScroll...

Regards,
Alberto

Ryan Humenick

  • Username: rh
  • Joined: Sat Mar 19, 2011 3:42 pm
  • Posts: 2
  • Twitter: rh
  • Offline
  • Profile
Tags:

Re: DataTable + DataSource + DataTableScroll --> error

Post Posted: Sat Mar 19, 2011 4:56 pm
+0-
Hi Alberto,

Thanks for the quick response. Alas, no luck.

http://pastebin.com/WJ4tiPw0

I note DataTableSort must be last otherwise, sort will fail with:
Code:
dt.get("recordset").sort is undefined
Regards,

Ryan

J C

  • Username: jcald89
  • Joined: Wed Apr 20, 2011 9:53 am
  • Posts: 1
  • Offline
  • Profile
Tags:

Re: DataTable + DataSource + DataTableScroll --> error

Post Posted: Wed Apr 20, 2011 10:23 am
+0-
I've been wrestling with the same issue for some time now, and I believe I'm close to a solution. Basically, if you instantiate the data table with a dummy record, set the scrolling, and then put in the data... it works. Sort of. You have to specify the column widths, because it will calculate the widths based on the data supplied in your dummy recordset, and when it gets replaced with the real data- the headers will not properly match the width of the actual columns. You will need to add in the width of the scroll bar to the desired width of the last column, as it "steals" from there.

Code:
    var displayCols = [
        {key:"name",    label:"Name",       width: 100},
        {key:"addr",    label:"Address",    width: 100},
        {key:"dist",    label:"Distance",   width: 50,  formatter: "{value} mi"},
        {key:"button",  label:"",           width: 50},
    ];
    var myDataSource = new Y.DataSource.Get({source:"..."});
    dt = new Y.DataTable.Base({
                    columnset:  displayCols,
                    summary:    "Results",
                    recordset: [{name: "Loading..."}]
             }).plug( Y.Plugin.DataTableScroll, { height:"680px" } ).plug(Y.Plugin.DataTableDataSource, {datasource: myDataSource});
    dt.datasource.load({ ... });

Adrian Lanning

YUI Contributor

  • Offline
  • Profile
Tags:

Re: DataTable + DataSource + DataTableScroll --> error

Post Posted: Mon May 16, 2011 9:33 pm
+0-
I've created a patch for this issue - more information available here:

http://yuilibrary.com/gallery/show/user-patch-2529808

It will be available on the CDN after the regular CDN update on 2011-05-18.
Page 1 of 1   [ 9 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
cron

Recent Forums Posts

Recent YUI Blog Posts

Online Users

No Users Online

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group