:: Forum >>

add extra columns with image after xml dat load

I want to add extra columns for edit and delete. I have the code to retrieve the dat from the xml file.
But need to add extra columns which have images edit & delete

I tried by implementing the code below, But failed.

Help me out with the exact code

<html>
<head>

    <title>ActiveWidgets Example</title>
    <!-- ActiveWidgets stylesheet and scripts -->
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE>BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; PADDING-TOP: 0px
}
HTML {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; PADDING-TOP: 0px
}
</STYLE>
<link href="basic_files/aw.css" rel="stylesheet" type="text/css" ></link>
    <script src="basic_files/aw.js"></script>
<STYLE>
.aw-grid-control {

    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    MARGIN: 0px;
    FONT: menu;
    BORDER-LEFT: medium none;
    WIDTH: 100%;
    BORDER-BOTTOM: medium none;
    HEIGHT: 100%;
}


.aw-row-selector {

    TEXT-ALIGN: center

}

.aw-column-0 {

    WIDTH: 80px

}

.aw-column-1 {

    WIDTH: 200px

}

.aw-column-2 {

    TEXT-ALIGN: right

}

.aw-column-3 {

    TEXT-ALIGN: right

}

.aw-column-4 {

    TEXT-ALIGN: right

}

.aw-column-5 {

    TEXT-ALIGN: center

}

.aw-column-6 {

    TEXT-ALIGN: center

}

.aw-grid-row {

    BORDER-BOTTOM: threedlightshadow 1px solid

    font-family: Arial, Helvetica, sans-serif
;
font-size: 10pt;
}


.aw-alternate-even {

    BACKGROUND-COLOR: #ECECE4
}


.aw-header-0 .aw-item-box
{
font-size: 9pt;
font-weight: normal;
text-align : center;
color: #000000;
background: #CCCCCC;
    border-left: 1px solid ThreeDHighlight;

}

.aw-rows-selected { background: #B4B4DB; color: black; }
.aw-grid-cell {border-left: 1px solid ThreeDHighlight;}
.aw-row-selector{background:#ffffff; text-align: left;}
.aw-alternate-even .aw-row-selector .aw-item-box {
background: #ECECE4;
}

.aw-rows-selected .aw-row-selector .aw-item-box {
background: #B4B4DB;
}


.aw-row{
    font-family: Arial, Helvetica, sans-serif;
font-size: 20pt;
}

.aw-header-0 .aw-grid-sort {
    display:-moz-inline-box;
    top:-2px
}
.aw-sort-ascending .aw-grid-sort {
    background:url(grid.png) -25px -5px
}

.aw-sort-descending .aw-grid-sort {
    background:url(grid.png) -45px -5px
}
.aw-header-0 .aw-mouseover-header {
    BACKGROUND: #cccccc; BORDER-BOTTOM-COLOR: #f9b119
}
.aw-header-0 .aw-mouseover-header .aw-item-box {
    BACKGROUND: #cccccc; BORDER-BOTTOM-COLOR: #f9a900
}

</STYLE>
<!-- grid data -->
<SCRIPT>
        var myColumns = [
            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees", "Edit", "Delete"
        ];
</SCRIPT>


<META content="MSHTML 6.00.2900.2802" name=GENERATOR>
</head>
<body>
<div id="1" style="width:930px;height:200px;overflow:auto">

<script>

var table = new AW.XML.Table;
table.setURL("companies-simple.xml");
table.request();

var obj = new AW.Grid.Extended;
    var str = new AW.Formats.String;
    var num = new AW.Formats.Number;

obj.setCellModel(table);
    obj.setRowCount(20);
    obj.setColumnCount(7);
    

    obj.setCellFormat([str, str, num, num, num]);

    // provide cells and headers text
    //obj.setCellText(myData);
    obj.setHeaderText(myColumns);

    // set number of rows/columns

    // enable row selectors
    obj.setSelectorVisible(true);
    obj.setSelectorText(function(i){return this.getRowPosition(i)+1});

    // set headers width/height
    obj.setSelectorWidth(28);
    obj.setHeaderHeight(20);

    obj.setCellEditable(false);

    obj.setFixedLeft(1);
    obj.setVirtualMode(false);

    obj.setSelectionMode("single-row");
    //obj.setCellLink(function(i, j){ return "http://www.mysite.com?i="+i+"&j="+j; }, 5); // set data
    //obj.setCellTemplate(new AW.Templates.Link, 5); // and template
    //obj.setCellLink(function(i, j){ return "http://www.mysite.com?i="+i+"&j="+j; }, 6); // set data
    //obj.setCellTemplate(new AW.Templates.Link, 6); // and template
    for (var i=0; i<obj.getRowCount(); i++)
    {
        obj.setCellText("<img src='editicon.gif' BORDER='0'>", 5, i);
        obj.setCellTooltip("Edit",5,i);
        obj.setCellText("<img src='delicon.gif' BORDER='0'>", 6, i);
        obj.setCellTooltip("Delete",6,i);
    }

document.write(obj);
    obj.setSelectedRows([5]);
    obj.setCurrentRow(5-4); // -4 = rownumber of the selected row when autoscroll

</script>
</body>
</html>
SS
Tuesday, April 25, 2006

This topic is archived.


Back to support forum

Forum search