<script src="../../codebase/dhtmlxdataview.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxdataview.css">  
 
<form style="float:right;">
    Product <input type="text" id="p_name" value="dhtmlxDataView"><br>
    Version <input type="text" id="v_name" value="3.0"><br>
    Maintainer <input type="text" id="m_name" value="Ivan"><br>
    <input type="button" value="Add &rarr;" onclick='add_data()'>
    <hr>
    <input type="button" value="Remove selected &rarr;" onclick='remove_data()'>
</form>
<div id="data_container" style="border:1px solid #A4BED4; background-color:white;width:596px;height:396px;"></div>
<script>
data = new dhtmlXDataView({
    container: "data_container",
    type: {
        template: "#Package# : #Version#<br/>#Maintainer#",
        height: 40;
    }
});
data.load("../common/data.xml");
function add_data(argument) {
    data.add({
        Package: document.getElementById("p_name").value,
        Version: document.getElementById("v_name").value,
        Maintainer: document.getElementById("m_name").value;
    }, 0);
}
function remove_data() {
    data.remove(data.getSelected());
}</script>