How to create a grid on click event

I try to create a grid after the user click a button, but it doesn't work for the following code:
<head>
<style>
.active-controls-grid {height: 100%; font: menu;}
.active-column-0 {width: 80px;}
.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}
</style>
</head>

<script>
function create()
{
var myData = [
["MSFT","Microsoft", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle", "62,615.266", "9,519.000", "40650"],
["KNM", "Konami (ADR)", "3,710.784", ".000", "4313"]
];

var myColumns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
var obj = new Active.Controls.Grid;
obj.setRowProperty("count", 20);
obj.setColumnProperty("count", 5);
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
document.write(obj);
}
</script>
<body>
<p><a href="javascript:create()">creategrid</a></p>
</body>

Any comments are highly appreciated.

tom

August 23,

You can only use document.write(...) during the page load. In your case you have to replace document.write(obj) with the following:

document.getElementById("grid_parent").innerHTML = obj;

and also add grid_parent DIV

<p><a href="javascript:create()">creategrid</a></p>
<div id="grid_parent"></div>

Alex (ActiveWidgets)

August 23,

Thank you so much, Alex.

Tom

August 23,

Even simpler

function hideGrid() { 
    obj.setStyle("display", "none");
    obj.refresh();
  }
  function showGrid() { 
    obj.setStyle("display", "block");
    obj.refresh();
  }

hehe

Sudhaker Raj

August 23,

And put grid at it's normal location. This is more suitable if you need to do 'hide it' as well else what Alex suggested is more efficient (create only when needed)...

Sudhaker Raj

August 23,

Does the innerHTML suggestion work? I've been trying various methods and all I can get is the text "[object]" displayed where I want the grid to be displayed. Using the Create function described above, if I swap out the document.write with the innerHTML of an object, I get the [object] text displayed in the DIV instead of the grid.

Any other suggestions?

G. Winston

January 3,

Hi All

I have succesfully written a grid to a div tag using the document.getElementById("grid_parent").innerHTML = obj;
when a button is clicked by the user. The grid is generated in a Javascript function and written to the div tag.

My problem is the scroll bar (horizontal) is not functioning properly when I resize the columns of the grid. The first time I resize, the scroll bar doesn't even appear. I resize a column again at which point the scroll bar appears. But it is out of sync with the column sizes.

I'm wondering if the scroll bars are acting up because I am writing it to a div tag. The most common use, grids are being generated when a page is loaded and the scroll bar functionality has been fine for most. Has anyone else come across this case where they are writing to a div tag and using scroll bars? I can provide the coding if you need it.

Any help would be greatly appreciated. Thanks.

Steve

April 19,

Hello All

I have a problem I am working with customed datecontrol..
when I open the calendar it opens with the specified textbox..by getting the location of parent tag...

Now the problem is..when i place the control in <DIV> tags it gets the location wrong..
The problem can be solved if I can get the count of the scrollbar..i.e. by how much pixels or %age it has been moved vertically down from the top....

If anyone can suggest me a solution plz mail me at

jaswinder.kaushal@ionsoftnet.com

Jaswinder Singh

June 29,

please send how to create a dialpad with 1 to 10 numbers in dhtml using javascript

sekar

August 1,

This topic is archived.

How to create a grid on click event

See also:

Search

New Data Grid

Version 2