View Full Version : Editable grid with SelectEditor

31 Oct 2006, 8:52 AM
Hello Jack & everybody,

I'm trying to make a web UI similar to the query builder from SQL Server Enterprise Manger and i'm testing your yui-ext lib.
What i'm trying to achieve without much success is to have a grid where one column editable with SelectEditor while the rest are not.

I folowed the articles on your site and looked on the js examples but i'm out of ideas why the column doesnt get editable.

here is what i did:

I created an object called QueryBuilder which has a grid inside. The object is initialized on YAHOO.ext.EventManager.onDocumentReady. on initialization i create the child grid using a DefaultDataModel and a DefaultColumnModel wich has the first column editable with SelectEditor. The grid is created with the SingleSelectionModel and i also intercept the celldbclick event.

When i double click a cell the proper function is executed but the cells in the editable column doesnt become editable. I thought that intercepting the celldbclick event could mess with the editable cells but the same problem appeared also when i removed the celldbclick event.

here is the code for my querybuilder obj:

var QueryBuilder = function(){
// grid, dm, sm
var grid, dm, sm;

// handler for cell clicked
var cellDbClicked = function(grid, rowIndex, colIndex, e) {
alert('Cell at row ' + rowIndex + ', column ' + colIndex + ' was double clicked!');

return {
init : function(){
// create the query builder grid

createGrid : function(){
var yg = YAHOO.ext.grid;
var myColumns = [
header: "Attribute name"
, width: 200
, editor: new yg.SelectEditor('light')
}, {
header: "Criteria"
, width: 100
, sortable: false
}, {
header: "Or...",
width: 100,
sortable: false
}, {
header: "Or..."
, width: 100
, sortable: false
}, {
header: "Or..."
, width: 100
, sortable: false
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

var myData = [
['Attr11', '', '', '']
, ['Attr12', '', '', '']
, ['Attr13', '', '', '']
, ['Attr1234', '', '', '']
dm = new YAHOO.ext.grid.DefaultDataModel(myData);

// create single selection model
sm = new YAHOO.ext.grid.SingleSelectionModel();
grid = new YAHOO.ext.grid.Grid('query_builder', dm, colModel, sm);
grid.on('celldblclick', cellDbClicked, this, true);
YAHOO.ext.EventManager.onDocumentReady(QueryBuilder.init, QueryBuilder, true);

I'm using this in a .net user control and the html code with the file includes and container and select, as written in the ascx file is:

<link href="../../css/yui/logger.css" type="text/css" rel="stylesheet">
<link href="../../js/yui/build/container/assets/container.css" type="text/css" rel="stylesheet">

<script type="text/javascript" src="../../js/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../js/yui/build/connection/connection.js"></script>
<script type="text/javascript" src="../../js/yui/build/dom/dom.js"></script>
<script type="text/javascript" src="../../js/yui/build/event/event.js"></script>

<script type="text/javascript" src="../../js/yui/build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="../../js/yui/build/animation/animation.js"></script>
<script type="text/javascript" src="../../js/yui/build/container/container.js"></script>

<script type="text/javascript" src="../../js/yui/build/logger/logger-min.js"></script>
<script type="text/javascript">
YAHOO.example.LogReader = function() {
var myLogReader;
return {
init: function() { myLogReader = new YAHOO.widget.LogReader(); }
YAHOO.util.Event.addListener(this,'load', YAHOO.example.LogReader.init);

<script type="text/javascript" src="../../js/yui-ext/yui-ext.js"></script>
<script type="text/javascript" src="../../js/vn/query-builder.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/yui-ext/resources/css/grid.css"/>

<div id="query_builder" style="height:200px"></div>

<select id="light" class="ygrid-editor">
<option value="Shade">Shade</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>
<option value="Mostly Sunny">Mostly Sunny</option>
<option value="Sunny">Sunny</option>

If anyone could spot something wrong in my code please give me a clue.
Thank you

31 Oct 2006, 9:04 AM
Disregard the post I found what was wrong. i was using SingleSelectionModel instead of EditorSelectionModel.

31 Oct 2006, 2:45 PM
So you have it working now? Great.

You can also use a shortcut YAHOO.ext.grid.EditorGrid which will initialize the EditorSelectionModel for you.

31 Oct 2006, 3:05 PM
yep. just after submiting this post, browsing on the forum i saw that there is an EditorSelectionModel also .. :)