Change the drag clue template on RowDrag

[Pic]

Hi,

I'm trying desperately to find a way to change the template of the row that is being dragged (drag clue). In my application, the user will drag a row from a RadGrid and drop it into a RadScheduler. I want the row that is being dragged to appear like it is when it's dropped  in the scheduler.

I know that the RadGrid doesn't provide any DragItemTemplates, so I will have to do it manually but I can't find the css class that is used by the dragged item. I'm guessing the css of the drag clue item is made in javascript (as every row is different), is there a master div that I can use?

Thanks in advance

[Pic]

Some updates on this issue:
1) Finding the dragged control: I was looking for a control with the name 'RadGrid1_DraggedRows'. I was (stupidly) trying to find it with the ID rather than the ClientID. My bad, sorry about that

2) another issue appeared: I'am modifying the dragged control (in javascript) with the function 'OnRowDragStarted' (RadGrid1.ClientSettings.ClientEvents.OnRowDragStarted = "RadGrid1_RowDragStarted").
The problem with this is that the html control 'XXXX_XXXX_RadGrid1_DraggedRows' is not yet created when the JS function 'OnRowDragStarted' is triggered. Therefore I cannot modify it.
I have made a something to go over that issue but I'm not 100% happy with it (as it is just a trick):

  function RadGrid1_RowDragStarted(sender, args) {
        setTimeout("CheckIfDraggedRowExist()", 10);
    }
    function CheckIfDraggedRowExist() {
  var DraggedRowsDiv = document.getElementById("XXXX_XXX_RadGrid1_DraggedRows");
        if (DraggedRowsDiv != null) {
            createDraggedContent(DraggedRowsDiv);
        }
        else {
            setTimeout("checkIfDraggedRowExist()", 10);
        }
    }
 function createDraggedContent(DraggedRowsDiv) {
       // Remove the existing content
        var table = DraggedRowsDiv.getElementsByTagName('table');
        table[0].style.display = 'none';

 //Format the container
  var DraggedRowsDiv_Style = "";
        DraggedRowsDiv_Style += "position: absolute;"
        DraggedRowsDiv_Style += "z-index: 99999;";
        DraggedRowsDiv_Style += "width:200px;";
        DraggedRowsDiv_Style += "border-radius: 1px;";
DraggedRowsDiv_Style += Etc.......
        DraggedRowsDiv.setAttribute("style", DraggedRowsDiv_Style);

//Add my own control within the container  (in my case I am trying to replicate a Schedule appointment)
var rsApt = document.createElement("div");
        rsApt.className = "rsApt";
        rsApt.style.width = "200px";
       
        var rsAptOut = document.createElement("div");
        rsAptOut.className = "rsAptOut";

        var rsAptMid = document.createElement("div");
        rsAptMid.className = "rsAptMid";

        var rsAptIn = document.createElement("div");
        rsAptIn.className = "rsAptIn";

        var rsAptContent = document.createElement("div");
        rsAptContent.className = "rsAptContent";
        
        var h2 = document.createElement("h2");
        h2.innerHTML = "The Description of the apointment";

.. Etc...


        rsApt.appendChild(rsAptOut);
        rsAptOut.appendChild(rsAptMid);
        rsAptMid.appendChild(rsAptIn);
        rsAptIn.appendChild(rsAptContent);
        rsAptContent.appendChild(h2);
... etc...

    
        DraggedRowsDiv.appendChild(rsApt);
    }




I wanted to know if there is another solution for that problem. Using a timer in that case is kind of a fudge and I don't like it.

[Marin]

Hi,

 Another option is not handle the onmousemove event of the document and access there the div that represents the RowDragTemplate. Also its CSS class is GridDraggedRows as shown below:

<script type="text/javascript">
            var dragRowStarted = false;
            function rowDragStarted(sender, args)
            {
                dragRowStarted = true;
            }
            function pageLoad()
            {
                document.onmousemove = function ()
                {
                    if (dragRowStarted)
                    {
                        var dragTemplate = $get("RadGrid1_DraggedRows");
                        //the CSS class is GridDraggedRows
                    }
                };
            }
        </script>

Greetings,
Marin
the Telerik team