3.2.0

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
April 25,

This topic is archived.

See also:


Back to support forum