how to give the fixed size to the grid header

i m using the grid control and populate the csv file data into table and display into grid i have to make that grid editable also.

can any budy help me .it is very urgent
i wrote the code:

<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<link href="styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="lib/grid.js"></script>
.active-controls-grid {height: 100%; font: menu;}
body, html {margin:0px; padding:0px; overflow:hidden; border:none}
a:visited {color:#009;}
.active-controls-grid {height:100%; font:menu}
.active-column-0 {text-align:left; border-right:1px #DDDDDD solid; border-bottom:1px #DDDDDD solid}
.active-column-1 {width:100px}
.active-column-2 {width:100px}
.active-column-3 {width:100px}
.active-column-4 {width:90px; text-align:right; color:#0033FF; cursor:hand}
H3 {text-align: center; color:blue}

.active-templates-item {text-align: right; color: red;)

#tab1 {}
#tab1 .active-column-0 {width: 60px;}
#tab1 .active-column-1 {width: 50px; text-align: right;}
#tab1 .active-column-3 {width: 110px;}
#tab1 .active-column-6 {width: 135px;}
#tab1 .active-column-7 {width: 60px; text-align: right;}
#tab1 .active-column-8 {width: 115px;}
#tab1 .active-grid-column {border-right: 1px solid threedlightshadow;}

#tab2 .active-column-0 {width: 60px;}
#tab2 .active-column-1 {width: 50px; text-align: right;}
#tab2 .active-column-2 {width: 75px;}
#tab2 .active-column-5 {width: 80px; text-align: right;}
#tab2 .active-column-6 {width: 65px; text-align: right;}
#tab2 .active-column-7 {width: 70px; text-align: right;}
#tab2 .active-column-9 {width: 135px;}
#tab2 .active-column-10 {width: 60px; text-align: right;}
#tab2 .active-column-11 {width: 115px;}
#tab2 .active-grid-column {border-right: 1px solid threedlightshadow;}

#tab3 .active-column-0 {width: 60px;}
#tab3 .active-column-1 {width: 50px; text-align: right;}
#tab3 .active-column-5 {width: 75px;}
#tab3 .active-column-6 {width: 60px; text-align: right;}
#tab3 .active-grid-column {border-right: 1px solid threedlightshadow;}

#tab4 .active-column-0 {width: 60px;}
#tab4 .active-column-1 {width: 50px; text-align: right;}
#tab4 .active-grid-column {border-right: 1px solid threedlightshadow;}

#tab5 .active-column-0 {width: 60px;}
#tab5 .active-column-1 {width: 50px; text-align: right;}
#tab5 .active-column-3 {width: 350px;}
#tab5 .active-grid-column {border-right: 1px solid threedlightshadow;}

.active-templates-header {color: green;)
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-controls-grid {height: 214px; font: menu;)

// -------------- start

var myColumns = ["Client Stock #","Glove / Apparel Name / Style","Current Annual Usage Quantity","Unit of Measure","Number of Sizes Used","Purchase Price","Currently Launder this Product? Yes/No","How many Times does the Product Launder?","Cost per Pair or Each to Launder?","Average Inventory On-Hand $","OPTIONAL METHOD: Average Inventory On-Hand: Units(Min/Max)"];

var columnOrder = [0,1,2,3,4,5,6,7,8,9,10];

// create ActiveWidgets data model - text-based table
var table = new Active.Text.Table;

// Yahoo provides 15min delayed stock quotes in CSV format
var url = "companies1.csv";

// set data URL

// start asyncronous data retrieval

// ------------- end
if (!window.My) My=[];
if (!My.Templates) My.Templates=[];

// *************************************************
// Input Cell Template.
// ***************************************************
My.Templates.Input = Active.Templates.Text.subclass();

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

// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.INPUT;
editor.setClass("templates", "input");
editor.setAttribute("type", "text");
editor.setAttribute("value", function(){
return template.getItemProperty("text");

// template variable provides temporary reference
// to the parent template during edit mode.
var template;

function switchToEditMode(){
if (template) {
template = this;
if (editable == "no"){ template = null; }
template.element().className += " active-edit-mode ";
template.element().innerHTML = editor;
editor.setEvent("ondblclick", editor.element().focus());

obj.setEvent("ondblclick", switchToEditMode);

function switchToTextMode(){
var value = editor.element().value;
template.setItemProperty("text", value);
template = null;
editor.setEvent("onblur", switchToTextMode);


var obj = new Active.Controls.Grid;
//obj.setRowProperty("count", 20);
//obj.setColumnProperty("count", 10);
//obj.setDataProperty("text", function(i, j){return myData[i][j]});
// obj.setDataText = function(value, i, j){myData[i][j]=value}

obj.setColumnProperty("text", function(i){return myColumns[i]});

obj.setColumnProperty("texts", myColumns);
obj.setColumnProperty("values", columnOrder);

//obj.setTemplate("left/item", new Active.Templates.Text);
//obj.setProperty("row/text", function(i){return columnNames[i][0]});

//obj.setColumnWidth([75, 155, 160, 120, 120,80,200,220,180,170,350]); // set column widths using array

// obj.setHeaderCount(2);
//obj.setHeaderHeight(500, 0); // header row-0
//obj.setHeaderHeight(5000, 1); // header row-1

// provide external model as a grid data source

var editable = "";

obj.setAction("AskForEdition", function(src){
if (src.getRowProperty("index") > 4 ){editable = "no"};
else {editable = "yes"}

var myvar0 = new My.Templates.Input;
var myvar1 = new My.Templates.Input;
var myvar2 = new My.Templates.Input;
var myvar3 = new My.Templates.Input;
var myvar4 = new My.Templates.Input;

obj.setColumnTemplate(myvar0, 0);
obj.setColumnTemplate(myvar1, 1);
obj.setColumnTemplate(myvar2, 2);
obj.setColumnTemplate(myvar3, 3);
obj.setColumnTemplate(myvar4, 4);


May 26,

This topic is archived.

See also:

Back to support forum