:: Forum >> Version 2 >>

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.

xml data edit dom body scroller table activewidget drop table mysql edit edit ajax table drag search code jsp menu table scrollable body overflow time connectivity xml database sort columns table mouse add edit delete button control simple grid information vertical columns html sort code data sort arrow delete add javascript dhtml data delete script down read script sort table link xml grid edit ie delete insert update delimited grid control code web control calender lookup asp table edit size table sort xml files table head html layer table dynamic edit overflow data edit grid web html table body print get add delete update click delete update mysql table html edit script change table css sort edit html code focus status code samples xml white grid code download
Back to support forum

Forum search