Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by James Mackinnon on Dec 15, 2007 19:08
open dhtmlx forum
Problem with inserting / updating db on moving of item from grid to tree

Well, I have worked out many of my issues, but for the life of me, I cant get this working.

 

Here is all of my code between 2 pages. The page that displays the grid and tree that I am working with (they have the needed data) and my some.php temp page that is inserting at this time for me .

Anyhow here is the details. It won't work properly without an error. Once I get this working, it will be doing action update and not insert

 

treegrid.php page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
        <title>Messages Prototype</title>
</head>
        <link rel="STYLESHEET" type="text/css" href="dhtmlxTree/codebase/dhtmlxtree.css">

        <script  src="dhtmlxDataProcessor/codebase/dhtmlxdataprocessor.js"></script>

        <script  src="dhtmlxTree/codebase/dhtmlxcommon.js"></script>
        <script  src="dhtmlxTree/codebase/dhtmlxtree.js"></script>
        <script  src="dhtmlxTree/codebase/ext/dhtmlxtree_xw.js"></script>

         <link rel="STYLESHEET" type="text/css" href="dhtmlxGrid/codebase/dhtmlxgrid.css">
        <script  src="dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
        <script  src="dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
        <script  src="dhtmlxGrid/codebase/ext/dhtmlxgrid_drag.js"></script>

<body onload="doOnLoad()">
<link rel='STYLESHEET' type='text/css' href='dhtmlxTree/samples/common/style.css'>


        <script>
                var mygrid,tree;
                function doOnLoad(){
                        mygrid = new dhtmlXGridObject('gridbox');
                        tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
                        setTimeout("buildTree()",10)
                        setTimeout("buildGrid()",11)
                }
                function buildTree(){

                        tree.setImagePath("dhtmlxTree/codebase/imgs/csh_bluebooks/");
                        tree.enableDragAndDrop(true);
                        tree.enableMultiselection(true);

                        tree.loadXML("treexml.php");

tree.attachEvent("onDrag",function(sid,tid){
mygrid.deleteRow(sid);   //remove row from grid

            //tid - id of folder in tree
            //sid - id of dragged item in grid

var url="some.php?folder="+tid+"&file="+sid;
tree.loadXML(url);
});
                tree.setSerializationLevel(true,true);
                }
                function buildGrid(){
                        //set grid parameters
                        mygrid.selMultiRows = true;
                        mygrid.setImagePath("dhtmlxGrid/codebase/imgs/");
                        var flds = "From,Subject,Received";
                        mygrid.setHeader(flds);
                        mygrid.setInitWidths("150,120,80")
                        mygrid.setColAlign("left,left,right")
                        mygrid.setColTypes("ed,ed,ed");
                        mygrid.setColSorting("str,str,int")
                        mygrid.setColumnColor("white,#d5f1ff,#d5f1ff")
                        mygrid.enableDragAndDrop(true);
                        mygrid.enableEditEvents(false,false,false); //Disables doubleclick edit ability in grid
                        //start grid
                        mygrid.init();
                        mygrid.loadXML("gridxml.php");
                        mygrid.treeToGridElement = function(treeObj,treeNodeId,gridRowId){
                                return [0,treeObj.getItemText(treeNodeId)];
                        }

                        //redefine grid-to-tree drop element
                        mygrid.gridToTreeElement = function(treeObj,treeNodeId,gridRowId){
                                return this.cells(gridRowId,1).getValue()+""+this.cells(gridRowId,2).getValue();
                        }


            mygrid.rowToDragElement = function (id){
                if(this.cells(id,2).getValue()!="")
                                return this.cells(id,2).getValue()+""+this.cells(id,1).getValue();
                        return this.cells(id,1).getValue();
            }
               }
        </script>
        <table>
                <tr>
                        <td valign="top" height=100%>
                                <div id="treeboxbox_tree" style="width:260; height=500px; background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/>
                        </td>
                        <td valign="top">&nbsp;&nbsp;&nbsp;&nbsp;
                        </td>
            <td valign="top">
                <div id="gridbox" width="500px" height="500px" style="background-color:white;overflow:hidden"></div>
            </td>
                </tr>

        </table>
</body>
</html>


some.php
<?php
include('../dbconn.php');

$markread="insert into messagesreceived (folderid) VALUES ($_GET[folder])";
mysql_query($markread) or die("Failed Query of " . $markread);
?>

 

Error type: LoadXML
Description: Incorrect XML

Press ok and get
Error type: DataStructure
Description: XML reffers to not existing parent

 

 

Thanks

 

James Mackinnon

Answer posted by Support on Dec 17, 2007 05:47
You need to return correct XML structure even if it has no any practical usage in described case

some.php
<?php
include('../dbconn.php');

$markread="insert into messagesreceived (folderid) VALUES ($_GET[folder])";
mysql_query($markread) or die("Failed Query of " . $markread);

header ("content-type: text/xml");
?>
 <?xml version="1.0" encoding="UTF-8" ?>
 <tree></tree>
Answer posted by James Mackinnon on Dec 17, 2007 06:20

Got it figured out last night;)

 

I acutally did exactly what you mention.

However, I have one more issue

 

based on the same code listed above, I want the ability to drag and drop a folder in the tree into a sub folder but it does not seem to adjust when I do this.

I assume that I can setup a function as I have between the grid and the tree and then listen for tid or something in that function?

Also, is there a way to disable drag and drop in the root of the tree where it highlights yellow and also on the root of the tree as well?

 

Thanks again for your time on answering my foolish questions;)

 

James

Answer posted by Support on Dec 17, 2007 07:40
Actually for all drag operations, which will ended in tree will be called the same onDrag event without difference is it grid-to-tree or tree-to-tree operation, you can use code similar to next, to separate different types of d-n-d


tree.attachEvent("onDrag",function(sid,tid,sobj,tobj){
    if (sobj==tobj){
       //drag and drop inside the same tree
       ... any code here ...
       return some;
    }

    if (sobj!=tobj){
       //drag and drop from outside of tree
       ... any code here ...
       return some;
    }
});

>>Also, is there a way to disable drag and drop in the root of the tree where it highlights yellow and also on the root of the tree as well?
To disable drag-n-drop on free space of tree you can use
    tree.enableDragAndDrop(true,false); //second parameter control  drop on free space.

Or in more common case it can be done by onDragIn event ( which occurs when item draged other potential target )

tree.attachEvent("onDragIn",function(sid,tid){
    if (!tid) return false; //block free space
    if (tid== some_root_id) return false; //block drop on item with some ID
    return true; //allow any other variations
});

Answer posted by James Mackinnon on Dec 19, 2007 07:42

I have done this and it doesn't move it, but it does delete it from the grid until I reclick on the folder to show that the items are still there

 

here is the code I have setup for the onDrag event. What can i do to have it not clear the grid if the item is not a valid move.

 

                        tree.attachEvent("onDrag",function(sid,tid){
                        if (!tid) return false;
                        if (tid == messages) return false;
                        return true;
                        mygrid.deleteRow(sid);   //remove row from grid

James

 

Answer posted by James Mackinnon on Dec 19, 2007 08:23

Ok I figured this out however I have an issue i'm not sure about

 

I need to stop the ability to drag and drop items between 2 specific tree containers that have grids

Here is the code

 

                function buildTree(){

                        tree.setImagePath("/images/tree/csh_bluebooks/");
                        tree.enableDragAndDrop(true);
                        tree.enableMultiselection(true);

                        tree.attachEvent("onDrag",function(sid,tid){
                        if (tid =='msgs') return false;
                        if (tid == '0') return false;
                        mygrid.deleteRow(sid);   //remove row from grid
                           //tid - id of folder in tree
                            //sid - id of dragged item in grid

                        var url="../../modules/messages/some.php?folder="+tid+"&file="+sid;

                        tree.loadXML(url);
                        }
);

 

What I mean is as follows

 

I have 2 containers

Sent - ID of 398

Inbox - ID of 397

I don't want the ability of dragging items from the inbox grid into the sent items grid and I don't want the ability to drag any items out of the sent grid

I do however, need to drag and drop items from the inbox grid into other tree containers such as 399 which is not an issue

 

What code can I add into the onDrag function to stop the dragging and dropping into and out of the sent items folder as that should resolve my issues all around

 

Thanks

 

James

Answer posted by Support on Dec 19, 2007 09:10
The onDrag handler process only "drop-in" operation, because you need to stop both operations, you can use next command to block all d-n-d operations in grid.

    sentGrid.enableDragAndDrop("temporary_disabled");


this command can't be issued at any time and block any d-n-d actions in or out of component.
Later, if necessary you can re-enable d-n-d by

    sentGrid.enableDragAndDrop(true);

So when you loading in grid "send" content - first command need to be executed, if any other content - second one.