Start Building Professional
Web Apps Today

Send data to update/insert to dhtmlxTreeGrid

Dear Sir,

Using dhtmlxTreeGrid I am able to show the required output. for this dhtmlxTreeGrid I am retrieving from database, which is 5 level tree. Last 3 level should be editable and user could be add the node to that levels.

Class
--SubClass
----Req
------FM
--------FMC

In above tree structure I want to use three different queries to add/edit Req, FM and FMC node because of all three values coming from three different tables.
Means to add/edit Req node I want send the data to the 2 different files like addReq.jsp and editReq.jsp and same for FM and FMC node.

Is it possible?

Could you send us samples of dataProcessor using JSP server side for edit and add the node in tree grid?

my clientside looks like this

fmeaGrid = new dhtmlXGridObject('fmeagrid');
    fmeaGrid.setImagePath("dhtmlx/dhtmlxGrid/codebase/imgs/csh_bluebooks/");
    //fmeaGrid.imgURL = "dhtmlx/dhtmlxGrid/codebase/imgs/";
    fmeaGrid.setHeader("Tree, Potential Effect(s) of Failure, SEV, OCC, Current Design / Process Control PREVENTION, Current Design / Process Control DETECTION, DET,SOD, Recommended Action(s), Responsibility, Target Completion Date,Action Taken,                Action Results,#cspan,#cspan,#cspan");
    fmeaGrid.attachHeader("#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,SEV2, OCC2, DET2, SOD2");
    fmeaGrid.setColumnIds('treeNode','fme', 'sev', 'occ', 'dpcp', 'dpcd', 'det', 'ra', 'res','tc', 'at', 'sev2', 'occ2','sod2' );

    fmeaGrid.setInitWidths("400,115,40,40,115,115,40,40,275,100,100,100,50,50,50,50");
    fmeaGrid.setColAlign("left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left")
    fmeaGrid.setColTypes("tree,txt,co,co,txt,txt,co,ro,co,txt,txt,txt,co,co,co,ro");
    fmeaGrid.enableMultiline(true);
    fmeaGrid.setSkin('light'); // (xp, mt, gray, light, clear, modern)
    fmeaGrid.enableEditEvents(false, true, 'disable');
    fmeaGrid.enableRowsHover(true, 'other')
    fmeaGrid.attachEvent("onRowSelect",doOnRowSelected);
    fmeaGrid.attachEvent("onRowDblClicked",doOnRowDblClicked);
    fmeaGrid.enableTreeGridLines();
    fmeaGrid.enableMultiline(true);
    fmeaGrid.init();
    //fmeaGrid.splitAt(0);
    fmeaGrid.loadXML("XML/fmea_tree_gride.jsp?project_id=<%=project_id%>&sys_id=<%=sys_id%>");
    //fmeaGrid.submitOnlyChanged(false);
    
    
    myDataProcessor = new dataProcessor("XML/inserReq.jsp?reqId=insert");
    myDataProcessor.enableDataNames(true);
    myDataProcessor.setUpdateMode("off");
    myDataProcessor.setTransactionMode("POST");
    myDataProcessor.init(fmeaGrid);

    
    var userData;
    function doOnRowSelected(){
    //fmeaGrid.getUserData(fmeaGrid.getSelectedId(),"REQ")
    userDataClass=fmeaGrid.getUserData(fmeaGrid.getSelectedId(),"SUBCLASS");
    userDataReq=fmeaGrid.getUserData(fmeaGrid.getSelectedId(),"REQ");
    userDataFm=fmeaGrid.getUserData(fmeaGrid.getSelectedId(),"FM")
    userDataFmc=fmeaGrid.getUserData(fmeaGrid.getSelectedId(),"FMC")
    //alert(userDataReq);
    
            if(userDataClass=='Subclass'){
                document.getElementById('addReq').style.visibility = "visible"
            }
            else{
            document.getElementById('addReq').style.visibility = "hidden"
            }
            
            if(userDataReq=='Req'){
                document.getElementById('addFm').style.visibility = "visible"
            }
            else{
            document.getElementById('addFm').style.visibility = "hidden"
            }
            
            if(userDataFm=='Fm'){
                document.getElementById('addFmc').style.visibility = "visible"
            }
            else{
            document.getElementById('addFmc').style.visibility = "hidden"
            }
    }
    
    function doOnRowDblClicked()
    {
        treeLevel=fmeaGrid.getLevel(fmeaGrid.getSelectedId());
        if(treeLevel==0 || treeLevel==1)
        {
            fmeaGrid.cells(fmeaGrid.getSelectedId(),0).setDisabled(true);
            alert("Sorry You Can Not Edit Class Subclass Requirement");
            return false;
        }
        return true;
    }
    
    function addReqNode()
    {
        var z=fmeaGrid.getSelectedId();
        fmeaGrid.addRow((new Date()).valueOf(),['ADD NEW REQUIREMENT HERE'],0,fmeaGrid.getSelectedId(),'Req_treeview_icon.gif');
            fmeaGrid.cells((new Date()).valueOf(),1).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),2).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),3).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),4).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),5).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),6).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),7).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),8).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),9).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),10).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),11).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),12).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),13).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),14).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),15).setDisabled(true);
            //fmeaGrid.openItem((new Date()).valueOf()) ;
            fmeaGrid.setUserData((new Date()).valueOf(),'REQ','Req')
    }
    
    function addFmNode()
    {
        var z=fmeaGrid.getSelectedId();
        //alert((new Date()).valueOf());
        fmeaGrid.addRow((new Date()).valueOf(),['NEW FM','text','1'],0,fmeaGrid.getSelectedId(),'FM_treeview_icon.gif');
            var sev = fmeaGrid.getCombo(2);
        sev.put("9","9");
        sev.put("7","7");
        sev.put("5","5");
        sev.put("3","3");
        sev.put("1","1");
            
            fmeaGrid.cells((new Date()).valueOf(),3).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),4).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),5).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),6).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),7).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),8).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),9).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),10).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),11).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),12).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),13).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),14).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),15).setDisabled(true);
            
            //fmeaGrid.openItem((new Date()).valueOf()) ;
            fmeaGrid.setUserData((new Date()).valueOf(),'FM','Fm')
    }
    
    function addFmcNode()
    {
        var z=fmeaGrid.getSelectedId();
        fmeaGrid.addRow((new Date()).valueOf(),['ADD NEW FMC HERE','','','1','text','text','1',0,'-','-','-','-','1','1','1','-'],0,fmeaGrid.getSelectedId(),'FMC_treeview_icon.gif');
            
            fmeaGrid.cells((new Date()).valueOf(),1).setDisabled(true);
            fmeaGrid.cells((new Date()).valueOf(),2).setDisabled(true);
            
            var occ = fmeaGrid.getCombo(3);
        occ.put("9","9");
        occ.put("7","7");
        occ.put("5","5");
        occ.put("3","3");
        occ.put("1","1");
            
            var det = fmeaGrid.getCombo(6);
        det.put("9","9");
        det.put("7","7");
        det.put("5","5");
        det.put("3","3");
        det.put("1","1");
            
            var ra = fmeaGrid.getCombo(8);
        ra.put("Tolerance Stack","Tolerance Stack");
        ra.put("FEA","FEA");
        ra.put("CFD Analysis","CFD Analysis");
        ra.put("Experimental Testing","Experimental Testing");
        ra.put("Functional Relationship","Functional Relationship");
            ra.put("Mechanical Testing & functional relationship","Mechanical Testing & functional relationship");
            ra.put("Hand Calc","Hand Calc");
            
            var sev2 = fmeaGrid.getCombo(12);
        sev2.put("9","9");
        sev2.put("7","7");
        sev2.put("5","5");
        sev2.put("3","3");
        sev2.put("1","1");
            
            var occ2 = fmeaGrid.getCombo(13);
        occ2.put("9","9");
        occ2.put("7","7");
        occ2.put("5","5");
        occ2.put("3","3");
        occ2.put("1","1");
            
            var det2 = fmeaGrid.getCombo(14);
        det2.put("9","9");
        det2.put("7","7");
        det2.put("5","5");
        det2.put("3","3");
        det2.put("1","1");
            
            //fmeaGrid.openItem((new Date()).valueOf()) ;
            fmeaGrid.setUserData((new Date()).valueOf(),'FMC','Fmc')
    }



Could you send me Atleast one sever side example to get values from the tree and send the update status to it?

>>Could you send us samples of dataProcessor using JSP server side for edit and add the node in tree grid?
Please contact us directly at support@dhtmlx.com  and provide your ref. number

>>In above tree structure I want to use three different queries to add/edit
Can be done as 

dp.setOnBeforeUpdateHandler(function(id,mode){
   //will be called each time before data sending
   var level = mygrid.getLevel(id);
   if (level==3){
         if (mode=="inserted") 
               dp.serverProcessor="addReq.jsp"
          else
              dp.serverProcessor="editReq.jsp"
   } else {
       ... similar logic for other levels ...
   }
});

Thanks for the quick response its working well. But now I am facing new problem when I update or add the row its updated in database and I received the response in following format

 response.getWriter().write("<data>");

                        response.getWriter().write("<action type='insert' sid='"+reqId+"' tid='"+newReqId+"'/>");

            response.getWriter().write("</data>");

 

I used the below method to refresh updated XML but is not working and updated text in row remain bold.

            ………

……….

myDataProcessor.setTransactionMode("GET");

            //myDataProcessor.enableDebug(true)

            myDataProcessor.setOnAfterUpdate(myUpdate);

            myDataProcessor.init(fmeaGrid);

           

            function myUpdate(){

alert("ABC");

fmeaGrid.updateFromXML("XML/fmea_tree_gride.jsp?project_id="+document.getElementById("project_id").value+"&sys_id="+document.getElementById("sys_id").value);

            }

 

Please find attached code.

please beware that method assigned through setOnAfterUpdate will be called after any successful dataprocessor operation ( insert, add, delete ) 
>>and updated text in row remain bold.

which mean that response XML was not correctly processed, it can be caused because of incorrect xml format or incorrect sid|tid value. 
the code snippet of your XML code looks correct, but still

Please try to add next js file in addition to existin ones - it will show details about server side response and can recognize and inform about some most common issues with incorrect server side response. 

Please be sure that XML code generated as 
     response.getWriter().write("<data>");
     ...
outputed with correct content type, it must be Content/type:text/xml

Dear Sir/Madam,

I have already attached the screen snaps with my query, which showing the correct response, please find the below code which insert the data in table and generate the response.

<% response.setDateHeader("Expires",-1);%>
<%@ page import="java.io.*"%>
<%@ page import="java.util.*"%>
<%@ page import="java.sql.*"%>
<%@ page  import="java.text.*"%>
<%@ page language="java" %>
<%@ page session="true"%>
<%@ page contentType="text/xml; charset=iso-8859-1" %>

<%
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");

String  reqId=request.getParameter("gr_id"); System.out.print(reqId+"\n");
String subclass_id=request.getParameter("gr_pid"); //out.print(subclass_id);
String project_id=request.getParameter("project_id"); //out.print(project_id);
String sys_id=request.getParameter("sys_id"); //out.print(project_id);
String desc=request.getParameter("c0"); System.out.print(desc+"\n-----\n");

String newReqId="";

int updateCheck=0;

Connection con=null;
PreparedStatement pstmt = null;

ResultSet reqIdRs=null; Statement reqIdStmt=null;
String driver="";
String url="";
String dbuser="";
String pass="";
Properties pro=new Properties();
try{
    InputStream in=getClass().getResourceAsStream("/cmp.properties");
 pro.load(in);
 driver=pro.getProperty("driver");//System.out.println(driver);
 url=pro.getProperty("url");//System.out.println(url);
 dbuser=pro.getProperty("user");//System.out.println(dbuser);
 pass=pro.getProperty("password");//System.out.println(pass);
 in.close();
  }catch (Exception e){ out.print("Error In Connection"+e); }
 
try
{
   Class.forName(driver);
 con = DriverManager.getConnection(url,dbuser,pass);
 
 reqIdStmt=con.createStatement();
 reqIdRs=reqIdStmt.executeQuery("SELECT SEQ_REQ_ID.nextval AS NEW_REQ_ID FROM DUAL");
 reqIdRs.next();
 newReqId=reqIdRs.getString("NEW_REQ_ID");
 
 pstmt=con.prepareStatement("INSERT INTO REQUIREMENTS (REQ_ID, DESCRIPTION, DATE_CREATED, OWNER, CL_ID, PROJECT_ID, SYS_ID,STATUS) VALUES ('"+newReqId+"', '"+desc+"', SYSDATE, 'USER_1', '"+subclass_id+"', '"+project_id+"', '"+sys_id+"', 'Active')");
 updateCheck=pstmt.executeUpdate();
 
 response.getWriter().write("<?xml version='1.0' encoding='iso-8859-1'?>");
 response.getWriter().write("<data>");
  response.getWriter().write("<action type='insert' sid='"+reqId+"' tid='"+newReqId+"'/>");
 response.getWriter().write("</data>");

 
 
} 
catch(Exception e)
{
 out.print(e);
}
finally
{
 if(con!=null)   con.close();
 
}%>

After I refresh the page manually I can see the node which I inserted is there where I added it but it should be refresh automatically and show in normal font.

Dear Sir/Madam,

I made the changes in the my code as well as in dhtmlxdataprocessor_debug.js. But still problem is there its not even showing the alert box   alert("Swapnil"); in function myUpdate().

If I remove the comment from myDataProcessor.enableDebug(true) it will show alerts but if comment this line it not showing debug console.  

function myUpdate(){
  alert("Swapnil");
        fmeaGrid.updateFromXML("XML/fmea_tree_gride.jsp?project_id="+document.getElementById("project_id").value+"&sys_id="+document.getElementById("sys_id").value);
 }

If you are using both 
   dhtmlxdataprocessor.js 
   dhtmlxdataprocessor_debug.js 

Grid must render console area at right upper corner of window. Debug console is not related to dp.enableDebug command and work independently.
Were you able to get it in your app? ( the changes mentioned above must make it visible even if you have page design based on absolutly positioned content ) 

Please find the attached snaps of screen.  Its showing correct output but problem is still there, not refreshing XML after getting upfdate. Please see the node which I inserted, remain bold (FFFF  FFF  9) 

On attached screenshoots you are using old version of dhtmlxdataprocessor_debug.js , the code attached in this thread doesn't have such messages as shown on your screenshoots. 

Thanks for quick replay,

I made the changes in file, first I got this error

server response received <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <TITLE>ERROR: The requested URL could not be retrieved</TITLE> <STYLE type="text/css"><!--BODY{background-color:#ffffff;font-family:verdana,sans-serif}PRE{font-family:sans-serif}--></STYLE> </HEAD><BODY> <H1>ERROR</H1> <H2>The requested URL could not be retrieved</H2> <HR noshade size="1px"> <P> While trying to retrieve the URL: <A HREF="http://172.25.43.10/sep/XML/insertFM.jsp?">http://172.25.43.10/sep/XML/insertFM.jsp?http://172.25.43.10/sep/XML/insertFM.jsp?">http://172.25.43.10/sep/XML/insertFM.jsp?</A> <P> The following error was encountered: <UL> <LI> <STRONG> Access Denied. </STRONG> <P> Access control configuration prevents your request from being allowed at this time. Please contact your service provider if you feel this is incorrect. </UL> <P>Your cache administrator is <A HREF="mailto:root">root</A>. <BR clear="all"> <HR noshade size="1px"> <ADDRESS> Generated Wed, 17 Dec 2008 04:08:01 GMT by proxy (squid/2.6.STABLE6) </ADDRESS> </BODY></HTML>

But after resolving this issue by our IT person I got the same screen as I sent you earlier. Please find the attached snap.

Dear Support Members,

I have sending more screen snaps attached. Please help me for it. I could not do further activities because all are depends on the it.