help connecting window.onclick with datatable built in event

Board index » YUI 2.x: » DataTable and DataSource

Page 1 of 1

[ 1 post ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Andi Wijaya

Username: aswardly
Joined: Mon Sep 28, 2009 10:32 pm
Posts: 7

Tags:

help connecting window.onclick with datatable built in event

Posted: Mon Sep 28, 2009 11:56 pm

+0-

What i want to achieve :

Suppose i have a datatable on a page, and i want to have a row highlighted when i click on that row (already done using the following syntax :

Code:

myDataTable.subscribe("rowClickEvent", myDataTable.onEventHighlightRow);

), i also want to clear the highlighting on the rows when i click anywhere outside the datatable (i tried connecting window.onClick with myDataTable.onEventUnhighlightRow using the following:

Code:

YAHOO.util.Event.addListener(window, "click", myDataTable.onEventUnhighlightRow);

)

The problem is, by clicking on the row, the event propagates up until the window object, which by then will call the window.onClick event i assigned earlier, i tried stopping the event from bubbling using the following :

Code:

YAHOO.util.Event.stopPropagation(myDataTable.onEventHighlightRow);

but it doesn't work, the event still bubbles up

Also when the window.onClick event fires, it produces the following error in firebug :

Quote:

L is undefined (yahoo-dom-event.js line 10)

I do not quite understand the inner working of yui datatable, why does stopPropagation not work?
and why does

Code:

YAHOO.util.Event.addListener(window, "click", myDataTable.onEventUnhighlightRow);

produces error?
any other way around this?

here is the complete source :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Product List</title>
      <link rel="stylesheet" href="/yui/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
      <!--CSS file (default YUI Sam Skin) -->
   <link type="text/css" rel="stylesheet" href="/yui/build/datatable/assets/skins/sam/datatable.css">
   <link rel="stylesheet" type="text/css" href="/yui/build/button/assets/skins/sam/button.css" />
   <!-- Dependencies -->
   <script type="text/javascript" src="/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
   <script type="text/javascript" src="/yui/build/element/element-debug.js"></script>
   <script type="text/javascript" src="/yui/build/datasource/datasource-debug.js"></script>
   <!-- OPTIONAL: JSON Utility (for DataSource) -->
   <script type="text/javascript" src="/yui/build/json/json-debug.js"></script>
   <!-- OPTIONAL: Connection Manager (enables XHR for DataSource) -->
   <script type="text/javascript" src="/yui/build/connection/connection-debug.js"></script>
   <!-- OPTIONAL: Drag Drop (enables resizeable or reorderable columns) -->
   <script type="text/javascript" src="/yui/build/dragdrop/dragdrop-debug.js"></script>
   <!-- Source files -->
   <script type="text/javascript" src="/yui/build/datatable/datatable-debug.js"></script>
   <script type="text/javascript" src="/yui/build/button/button-debug.js"></script>
   <script type="text/javascript">
   YAHOO.util.Event.addListener(window, "load", function() 
   {
       myDataGrid = new function()
      {
           var myColumnDefs = [
               {key:"no", label:"No", className:"th", sortable:false, resizeable:true},
               {key:"product_id", label:"Product Id", sortable:true, resizeable:true},
               {key:"product_name", label:"Product Name", sortable:true, resizeable:true},
               {key:"product_description", label:"Product Description", sortable:true, resizeable:true},
               {key:"brand_name", label:"Brand", sortable:true, resizeable:true},
            {key:"category_name", label:"Category", sortable:true, resizeable:true},
            {key:"product_created", label:"Created", sortable:true, resizeable:true,
             formatter:"date"},
            {key:"product_updated", label:"Last Updated", sortable:true, resizeable:true,
             formatter:"date"}
           ];
   
         this.myDataSource = new YAHOO.util.DataSource("/validate/product_json/?");
           this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
           this.myDataSource.connXhrMode = "queueRequests";
           this.myDataSource.responseSchema = {
               resultsList: "response.result",
               fields: [{key:"no",parser:"number"},"product_id","product_name","product_description",
                       "brand_name","category_name",
                       {key:"product_created",parser:"date"},{key:"product_updated",parser:"date"}],
               metaFields : {totalRecordsAvailable : "response.TotalAvailable",
                             totalRecordsReturned : "response.TotalReturned"}
           };
         
           var myDataTable = new YAHOO.widget.DataTable("datagrid", myColumnDefs,this.myDataSource,{caption:"Product List"});
          
         myDataTable.subscribe("rowClickEvent", myDataTable.onEventHighlightRow);
         
         YAHOO.util.Event.stopPropagation(myDataTable.onEventHighlightRow); //does not work, event stil propagates      
           YAHOO.util.Event.addListener(window, "click", myDataTable.onEventUnhighlightRow); //creates javascript error : L is undefined (yahoo-dom-event.js line 10)    
       }
   });
</script>
</head>
<body class="yui-skin-sam">
<div id="doc3" class="yui-t1">
   <div id="hd" role="header">Header goes here</div>
      <div id="bd" role="main">
         <div id="yui-main">
         <div class="yui-b main">
               <div role="main" class="yui-g">
               <div class="content">
                  Content Goes Here
                  <br />
                  <div id="datagrid"></div>
               </div>
            </div>
         </div>
         </div>
         <div role="navigation" class="yui-b navigation">
            Navigation Goes Here
      </div>
   </div>
   <div id="ft" role="footer">Footer goes here</div>
</div>
</body>
</html>

the JSON Response from the datasource looks like this :

Code:

{"response":{"TotalAvailable":10,"TotalReturned":5,"result":[{"no":1,"product_id":"dgjhsryjkr","product_name":"strjryjf","product_description":"jfhdjyfjhgcjn","brand_name":"Abit","category_name":"CPU","product_created":"06\/24\/2009, 18:01:15","product_updated":"06\/24\/2009, 18:01:15"},{"no":2,"product_id":"etjatejhs","product_name":"rjutrjkyhfjsdt","product_description":"jzsfyjfhj","brand_name":"Abit","category_name":"CPU","product_created":"06\/24\/2009, 18:01:12","product_updated":"06\/24\/2009, 18:01:12"},{"no":3,"product_id":"fghfgj","product_name":"jfgjfgjfgjhf","product_description":"fgjhfg","brand_name":"Abit","category_name":"Motherboard","product_created":"06\/24\/2009, 12:34:48","product_updated":"06\/24\/2009, 12:34:48"},{"no":4,"product_id":"fgjjg","product_name":"fgjfsjf","product_description":"fgjfgjddfjfd","brand_name":"Asus","category_name":"CPU","product_created":"06\/24\/2009, 12:34:54","product_updated":"06\/24\/2009, 12:34:54"},{"no":5,"product_id":"hyjdstrjd","product_name":"jfjhsdfjktu","product_description":"dxfrjsry","brand_name":"Asus","category_name":"Motherboard","product_created":"06\/24\/2009, 18:01:21","product_updated":"06\/24\/2009, 18:01:21"}]}}

Page 1 of 1

[ 1 post ]

New Topic | Post Reply | Print view

Previous topic | Next topic

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