how to give the fixed size to the grid header
hi,
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:
<html>
<head>
<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>
<style>
.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}
</style>
<style>
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;)
</style>
</head>
<body>
<script>
// -------------- 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
table.setURL(url);
// start asyncronous data retrieval
table.request();
// ------------- 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) {
switchToTextMode()
}
template = this;
//////////////////////////////////////////
this.action("AskForEdition");
if (editable == "no"){ template = null; }
////////////////////////////////////////
else{
template.element().className += " active-edit-mode ";
template.element().innerHTML = editor;
editor.element().focus();
editor.setEvent("ondblclick", editor.element().focus());
}
}
obj.setEvent("ondblclick", switchToEditMode);
function switchToTextMode(){
var value = editor.element().value;
template.setItemProperty("text", value);
template.refresh();
template = null;
}
editor.setEvent("onblur", switchToTextMode);
};
My.Templates.Input.create();
//**********************************
/////////////////////////////////////
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.setColumnHeaderHeight("75px");
//obj.setHeaderWidth("300px");
//obj.setColumnIndices([0,1,2,3,4,5,6,7,8,9,10]);
obj.setColumnCount(11);
//obj.setFixedRight(1);
//obj.setFixedLeft(1);
//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
obj.setDataModel(table);
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);
document.write(obj);
</script>
</body>
</html>
Regards,
nitin
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:
<html>
<head>
<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>
<style>
.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}
</style>
<style>
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;)
</style>
</head>
<body>
<script>
// -------------- 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
table.setURL(url);
// start asyncronous data retrieval
table.request();
// ------------- 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) {
switchToTextMode()
}
template = this;
//////////////////////////////////////////
this.action("AskForEdition");
if (editable == "no"){ template = null; }
////////////////////////////////////////
else{
template.element().className += " active-edit-mode ";
template.element().innerHTML = editor;
editor.element().focus();
editor.setEvent("ondblclick", editor.element().focus());
}
}
obj.setEvent("ondblclick", switchToEditMode);
function switchToTextMode(){
var value = editor.element().value;
template.setItemProperty("text", value);
template.refresh();
template = null;
}
editor.setEvent("onblur", switchToTextMode);
};
My.Templates.Input.create();
//**********************************
/////////////////////////////////////
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.setColumnHeaderHeight("75px");
//obj.setHeaderWidth("300px");
//obj.setColumnIndices([0,1,2,3,4,5,6,7,8,9,10]);
obj.setColumnCount(11);
//obj.setFixedRight(1);
//obj.setFixedLeft(1);
//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
obj.setDataModel(table);
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);
document.write(obj);
</script>
</body>
</html>
Regards,
nitin
nitin
May 26,