Dropdown Grid Template

The following is a dropdown grid template I worked up. It basically works like a select template but using a grid as the dropdown. You can specify the column that is used to populate the cell on the parent grid.

// ****************************************************************
// Grid Select Cell Template.
// ****************************************************************
My.Templates.GridSelect = Active.System.Control.subclass();

My.Templates.GridSelect.create = function()
{
var obj = this.prototype;

obj.defineModel("grid");
obj.defineGridProperty("count", 0);
obj.defineGridPropertyArray("rows", 0);
obj.defineGridPropertyArray("columns", 0);
obj.defineGridProperty("valuecolumn", 0);

obj.setClass("templates", "text");
obj.setContent("text", function(){return this.getItemProperty("text")});

function getAbsolutePos(el) {
var SL = 0, ST = 0;
var is_div = /^div$/i.test(el.tagName);
if (is_div && el.scrollLeft)
SL = el.scrollLeft;
if (is_div && el.scrollTop)
ST = el.scrollTop;
var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
if (el.offsetParent) {
var tmp = getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
};

var template;

function switchToTextMode() {
var ddGridSpan = document.getElementById('ddGridSpan');
if(ddGridSpan) {
ddGridSpan.innerHTML='';
document.body.removeChild(ddGridSpan);
}
if(template) {
template.refresh();
template = null;
}
}

function switchToEditMode()
{
if(template) {
switchToTextMode();
}
template = this;

var grid = new Active.HTML.DIV;
grid.setId("ddgrid");
grid.setClass("templates", "ddgrid");
grid.setContent("grid", function() {
selectAction = function(src) {
selectedRow = src.getProperty("item/index");
var ddData = template.getGridProperty("rows");
template.setItemProperty("text",ddData[selectedRow][template.getGridProperty("valuecolumn")]);
switchToTextMode();
}

var ddGrid = new Active.Controls.Grid;
var ddColumns = template.getGridProperty("columns");
var ddData = template.getGridProperty("rows");
var row = ddGrid.getTemplate("row");
row.setEvent("ondblclick", function(){ this.action("selectAction"); } );
ddGrid.setId("ddGrid");
ddGrid.setAction("selectAction", selectAction);
ddGrid.setRowProperty("count", ddData.length);
ddGrid.setColumnProperty("count", ddColumns.length);
ddGrid.setColumnProperty("text", function(i){return ddColumns[i]});
ddGrid.setRowHeaderWidth("0px");
ddGrid.setColumnHeaderHeight("20px");
ddGrid.getDataText = function(i, j){ return ddData[i][j]; };
ddGrid.setStyle("background-color", "white");

return ddGrid.toString();
}
);

var ddGridSpan = document.getElementById('ddGridSpan');
if(!ddGridSpan) {
ddGridSpan = document.createElement('span');
ddGridSpan.id = 'ddGridSpan';
document.body.appendChild(ddGridSpan);
}

// rigged to capture mousedown events on the grid owning this template. probably a better way to do this.
this.element().parentNode.parentNode.parentNode.onmousedown = switchToTextMode;

ddGridSpan.innerHTML=grid;
var el = template.element();
var pos = getAbsolutePos(el);
grid.setStyle("left", pos.x);
grid.setStyle("top", pos.y + el.offsetHeight);
grid.setStyle("visibility", "visible");
}

obj.setEvent("onfocus", switchToEditMode);
};

My.Templates.GridSelect.create();


Then the CSS:
#ddgrid .active-controls-grid {height: 200; width: 160;}
#ddgrid .active-column-0 {width: 80px;}
#ddgrid .active-column-1 {width: 80px;}
#ddgrid .active-grid-column {border-right: 1px solid threedlightshadow;}


And an example:
var ddGridTemplate = new My.Templates.GridSelect;
ddGridTemplate.setGridProperty("rows", [['0001','Test 1'],['0002','Test 2'],['0003','Test 3']]);
ddGridTemplate.setGridProperty("columns", ["Code", "Name"]);
ddGridTemplate.setGridProperty("valuecolumn", 0);
obj.setColumnTemplate(ddGridTemplate,0);

For some reason column sorting is not working on the dropdown grid in IE. It works fine in Firefox though.

Another great addition!!

Anyone have ideas on a large text area editor template? I saw a template with a textarea, but the area was confined to one row height.

Good job ! Austin, I was testing somethig similar (but for master-detail purpposes) never think of it as a select template, great Idea.
Thanks
Carlos

Frank, Try to type spaces from time to time (while inside the textarea in Mozilla) in this case normal writing helps ;-)

Austin, Any live demo with your template? I tried to use your template but couldn't get it to work.

Thank you.

There is an example at:

http://www.poeticdata.com/griddemo

Perfect Austin!

Thank you!

Very good job, Austin. Thanks a lot!

I have made a correction to the dropdown grid by eliminating an unecessary div container which cause column sorting to work in IE now. I also added a change handler:

// ****************************************************************
// Grid Select Cell Template.
// ****************************************************************
My.Templates.GridSelect = Active.System.Control.subclass();

My.Templates.GridSelect.create = function()
{
var obj = this.prototype;

obj.defineModel("grid");
obj.defineGridProperty("count", 0);
obj.defineGridProperty("name", '');
obj.defineGridPropertyArray("rows", 0);
obj.defineGridPropertyArray("columns", 0);
obj.defineGridProperty("valuecolumn", 0);
obj.defineGridProperty("selectedrow", 0);

obj.setClass("templates", "text");
obj.setContent("text", function(){return this.getItemProperty("text")});

function getAbsolutePos(el) {
var SL = 0, ST = 0;
var is_div = /^div$/i.test(el.tagName);
if (is_div && el.scrollLeft)
SL = el.scrollLeft;
if (is_div && el.scrollTop)
ST = el.scrollTop;
var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
if (el.offsetParent) {
var tmp = getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
};

var template;

function switchToTextMode() {
var ddGridSpan = document.getElementById('ddGridSpan');
if(ddGridSpan) {
ddGridSpan.innerHTML='';
document.body.removeChild(ddGridSpan);
}
if(template) {
template.refresh();
template = null;
}
}

function switchToEditMode()
{
if(template) {
switchToTextMode();
}
template = this;

var grid = new Active.HTML.DIV;
grid.setClass("templates", "ddgrid");
grid.setContent("grid", function() {
selectAction = function(src) {
selectedRow = src.getProperty("item/index");
var ddData = template.getGridProperty("rows");
var originalText = template.getItemProperty("text");
var text = ddData[selectedRow][template.getGridProperty("valuecolumn")];
if(originalText != text) {
template.setItemProperty("text",text);
template.setGridProperty("selectedrow",ddData[selectedRow]);
template.action("change"+template.getGridProperty("name")+"Action");
}
switchToTextMode();
}

var ddGrid = new Active.Controls.Grid;
var ddColumns = template.getGridProperty("columns");
var ddData = template.getGridProperty("rows");
var row = ddGrid.getTemplate("row");
row.setEvent("ondblclick", function(){ this.action("selectAction"); } );
ddGrid.setId("ddgrid");
ddGrid.setAction("selectAction", selectAction);
ddGrid.setRowProperty("count", ddData.length);
ddGrid.setColumnProperty("count", ddColumns.length);
ddGrid.setColumnProperty("text", function(i){return ddColumns[i]});
ddGrid.setRowHeaderWidth("0px");
ddGrid.setColumnHeaderHeight("20px");
ddGrid.getDataText = function(i, j){ return ddData[i][j]; };

return ddGrid.toString();
}
);

var ddGridSpan = document.getElementById('ddGridSpan');
if(!ddGridSpan) {
ddGridSpan = document.createElement('span');
ddGridSpan.id = 'ddGridSpan';
document.body.appendChild(ddGridSpan);
}

// rigged to capture mousedown events on the grid owning this template. probably a better way to do this.
this.element().parentNode.parentNode.parentNode.onmousedown = switchToTextMode;

ddGridSpan.innerHTML=grid;
var el = template.element();
var pos = getAbsolutePos(el);
grid.setStyle("left", pos.x);
grid.setStyle("top", pos.y + el.offsetHeight);
grid.setStyle("width",170);
grid.setStyle("height",150);
grid.setStyle("visibility", "visible");
}

obj.setEvent("onfocus", switchToEditMode);
};

My.Templates.GridSelect.create();


And the css:
#ddgrid .active-controls-grid {height: 200; width: 160;}
#ddgrid .active-column-0 {width: 80px;}
#ddgrid .active-column-1 {width: 80px;}
#ddgrid .active-grid-column {border-right: 1px solid threedlightshadow;}

.active-templates-ddgrid {
width: 100%;
height: 100%;
padding: 0px 5px;
margin: 0px 0px;
border: 0px solid #666;
vertical-align: top;
font: menu;
line-height: 1.4em;
OVERFLOW: auto;
POSITION: absolute;
background-color: white;
}

.active-templates-ddgrid.gecko {
display: block;
margin: 0px;
}

Does anyone have any insight about this problem?

I implemented a version that has ddgrid selects in many of the columns. When I populate the main grid with many rows and columns, and contain it within a table to restrict its size, the scrollbars appear like they should. I constrained the size so I could test the behavior of the grid with horizontal and vertical scroll bars.

The problem I'm having has to do with keeping the row I click on staying in the main grid view. There is no problem if the row is visible when I am scrolled all the way to the top. However, if I scroll down and click on one that is not in the set of rows visible in the top scrolled view, the grid is instantly scrolled back to the top and I can't do anything with the row I clicked on.

Do have an example with the problem up? I am not seeing this problem in my implementation.

Hi Austin,

Do you have an example of a Radio button Template for the Active Widgets Grid?

I don't have an example that can be viewed external to my corporate intranet yet. I'm working on an alternate implementation - but hope to post an example soon or the ddgrid example when I get the other one dialed in.

Hello,

Where i can download this example?

Thank you.

I am using this example, but I am only able to populate with a max of 268 records... Any ideas on how to get more records???

Also, I need to have a different dropdown appear or row of data being displayed. Is this possible?

I used this example for data input as JavaScript array. It worked fine.
But I am not able to use this template for XML data input.
Any idea how to use this template for XML data.

Also, can any one give me code for Input template and Check box template?

Thank you

I have a grid in which one of the column's template is the drop down data grid. The drop down data grid contains an id in column zero, and a name in column one. I set the "valuecolumn" to one, so that the name displays in the main grid when a row is selected from the drop down grid. However, the id would be a more useful return value to the back-end processing. Is it possible to have the column display the name but return the id as its value? In other words, is it possible to have a "valuecolumn" and a "displaycolumn"?

Thanks

I need to have a different dropdown appear corresponding with each row of data displayed... Possible?

Correction:

I need to have a different dropdown grid appear corresponding with each row of data displayed in the parent grid... Possible?

I need to edit each cell of ddgrid and save/retrieve contents each time user want. Who help me,please? Any template for column of ddgrid?
Thank at all

I made an editable one (for master-detail pourposes) , but it wasn't finished (buggy on click events) so need a code review (hope can do it soon), anyway if you want to try.....
http://www.telefonica.net/web2/webtress/awsamp/examples/md_ddgrid.html
HTH

Hi
Since code is given ,but i dont no where to place it ,i.e do we have to write it in java or JSP page.Please give me the information.
Thanks