Web Site

 Advanced Client Side JS

Keep ASTreeView free, keep ASTreeView update. Please make a donation to support the development.
  • English
  • 中文
Common Assembly Version: 1.5.9.0
ASTreeView supports custom add/edit/delete/dragdrop handler, developer can cancel the action by customized conditions. For example, in this demo page, the end user cannot add node with character 'a', cannot edit node text with character 'a', cannot delete node with character 'a', cannot drag drop node with character 'a', cannot drag drop a node to a node with character 'a'. This is just example, developers can write their own handlers and return true or false to indicate whether the action should be canceled.
CONSOLE
tree configuration
<ct:ASTreeView ID="astvMyTree" 
    runat="server"
    BasePath="~/Scripts/astreeview/"
    DataTableRootNodeValue="0"
    EnableRoot="false" 
    EnableNodeSelection="true" 
    EnableCheckbox="false" 
    EnableDragDrop="true" 
    EnableTreeLines="true"
    EnableNodeIcon="true"
    EnableCustomizedNodeIcon="false"
    AutoPostBack="false"
    EnableDebugMode="false"
    EnableContextMenu="true"
    EnableAjaxOnEditDelete="true"
    EditNodeProvider="~/ASTreeViewDemo/ASTreeViewEditNodeHandler.aspx"
    DeleteNodeProvider="~/ASTreeViewDemo/ASTreeViewDeleteNodeProviderLimit.aspx"
    AddNodeProvider="~/ASTreeViewDemo/ASTreeViewDemo17.aspx"
    AdditionalAddRequestParameters="{'t':'ajaxAdd'}"
    AddNodePromptDefaultValue="New Node" 
    AddNodePromptMessage="Hello, please add a new node:"
    AddNodeDataValueProvider="return prompt('new node? under:' + elem.getAttribute('treeNodeValue') + ' Text with letter a will be rejected.','');"
    OnNodeAddedScript="addedHandler(elem)"
    EnableOnNodeAddedScriptReturn="true"    
    OnNodeEditedScript="editedHandler(elem, info)"
    EnableOnNodeEditedScriptReturn="true"
    OnNodeDeletedScript="deletedHandler(val, info)"
    EnableOnNodeDeletedScriptReturn="true"
    OnNodeDragAndDropCompletingScript="dndCompletingHandler( elem, newParent )"
    OnNodeDragAndDropStartScript="dndStartHandler( elem )"
    EnableOnNodeDragAndDropStartScriptReturn="true"
    EnableOnNodeDragAndDropCompletingScriptReturn="true" />
aspx code
//parameter must be "elem"
function addedHandler( elem ){
    var message = '';
    var result = true;
    
    var aTag = elem.getElementsByTagName('A')[0];
    
    if( aTag.getAttribute('addfailed') == 'true' ){
        alert( aTag.innerHTML );
        return false;
    }
    else{
        message = ( ">>add completed. [Node]" + elem.getAttribute("treeNodeValue") + "<br />" );
    }
    
    
    document.getElementById( "<%=divConsole.ClientID %>" ).innerHTML += message;
    return result;
    
}

//parameter must be "elem" and "info"
function editedHandler( elem, info ){
    //console.debug(info)
    var ts = info.split('|');
    if( ts[0] == '1' ){
        alert(ts[1]);
        return false;
    }
    
    document.getElementById( "<%=divConsole.ClientID %>" ).innerHTML 
    += ( ">>edit completed. [Node]" + elem.getAttribute("treeNodeValue") 
    + "<br />" );
}

//parameter must be "val" and "info"
function deletedHandler( val, info ){
    //console.debug(info)
    var ts = info.split('|');
    if( ts[0] == '1' ){
        alert(ts[1]);
        return false;
    }
    
    document.getElementById( "<%=divConsole.ClientID %>" ).innerHTML 
    += ( ">>delete completed. [Node]" + val
    + "<br />" );
}

//parameter must be "elem"
function dndStartHandler( elem ){
    var nText = elem.getElementsByTagName("A")[0].innerHTML;
    
    if( nText.indexOf('a') < 0 && nText.indexOf('A') < 0){//elem.getAttribute("treeNodeValue") != 'Tesorus' ){
        document.getElementById( "<%=divConsole.ClientID %>" ).innerHTML 
        += ( ">>drag started. [Node]" + elem.getAttribute("treeNodeValue") 
        + " [Parent]:" + elem.parentNode.parentNode.getAttribute("treeNodeValue") 
        + "<br />" );
        
        return true;
    }
    else{ 
        var script = 'alert("You cannot drag and drop a node with \'a\' in node text.")';
        window.setTimeout( script, 50 );
        return false;
    }
}

//parameter must be "elem"
function dndCompletingHandler( elem, newParent ){
    var nText = newParent.getElementsByTagName("A")[0].innerHTML;
    
    if( nText.indexOf('a') < 0 && nText.indexOf('A') < 0){
        document.getElementById( "<%=divConsole.ClientID %>" ).innerHTML 
        += ( ">>drag completing. [Node]" + elem.getAttribute("treeNodeValue") 
        + " [Parent]:" + elem.parentNode.parentNode.getAttribute("treeNodeValue") 
        + "<br />" );
        
        return true;
    }
    else{
        alert( "You cannot drop the node under a node with 'a' in node text." );
        return false;
    }
}
 


Dear friend,

    ASTreeView license has been updated, please visit the License & Pricing page for detial. Thank you.