Use of column template in combination with drag and drop

[Developer]

Hi,

i am using a tree grid, and i have activated the drag and drop support in this tree grid. (allowDragAndDrop = true)

Now i has implemented a column template to show other icons for collapse and expand.

So, if i use the new column template i see the correct new icons for expand and collapse, but i don't see the default drag and drop icons any more.

Do you have some example how i can use a column template in combination with the default drag and drop icons, or to define own drag and drop icons?

I am using something similar to this template here:

<script type="text/x-jsrender" id="customColumnTemplate">     
     <div  style='height:20px;' unselectable='on'>{{if hasChildRecords}}<div class='intend' style='height:1px; float:left; width:{{:level*20}}px; display:inline-block;'></div>
       {{else !hasChildRecords}}
       <div class='intend' style='height:1px; float:left; width:{{:(level)*20}}px; display:inline-block;'></div>
       {{/if}}                         
       <div class='{{if expanded}}e-treegridexpand {{else hasChildRecords}}e-treegridcollapse {{/if}} {{if level===4}}e-doc{{/if}}' style='height:20px;width:30px;margin:auto;float:left;margin-left:10px;
       style='float: left;display:inline-block; unselectable='on'></div>
       <div class='e-cell' style='display:inline-block;width:100%' unselectable='on'>{{:#data['Name']}}</div>
     </div>
    </script> 

How can i add her some icons for the drag and drop operations?

Regards 

Michael

[Pooja Priya Krishna Moorthy]

Hi Michael, 

Greeting from Syncfusion support. 

In TreeGrid, when we define the template for column, default cell content will fully replaced with template element. Because we can’t properly insert the required default elements into the template, because template can be in any structure.  But we can include the drag and drop icons in column by defining it in template element. But for this we need to more set of codes as like below. Because this codes necessary to show and hide drag and drop icons based position. Please find the below code example. 

 

<script type="text/x-jsrender" id="customColumnTemplate"> 

    {{if hasChildRecords}} 

        <div class='e-dragintend' style='height: 1px; float: left; width: {{:level*20}}px; display: inline-block;'> 

            {{if !~getstate() || !hasChildRecords }} 

            <div class="{{:~_stageName()}}"> 

                <span class='e-aboveIcon e-iconMargin e-icon' style='position: relative; float: right; display: none;'></span> 

                <span class='e-belowIcon e-iconMargin e-icon' style='position: relative; float: right; display: none;'></span> 

                <span class='e-childIcon e-iconMargin e-icon' style='position: relative; float: right; display: none;'></span> 

                <span class='e-cancelIcon e-iconMargin e-icon' style='position: relative; float: right; display: none;'></span> 

            </div> 

            {{/if}} 

        </div> 

    {{else !hasChildRecords}} 

        <div class='e-dragintend' style='height: 1px; float: left; width: {{:(level+1)*20}}px; display: inline-block;'> 

            {{if !~getstate() || !hasChildRecords}} 

            <div class="{{:~_stageName()}}"> 

                <span class='e-aboveIcon e-iconMargin e-icon' style='position: relative; float: right; display: none;'></span> 

                <span class='e-belowIcon e-iconMargin e-icon' style='position: relative; float: right; display: none;'></span> 

                <span class='e-childIcon e-iconMargin e-icon' style='position: relative; float: right; display: none;'></span> 

                <span class='e-cancelIcon e-iconMargin e-icon' style='position: relative; float: right; display: none;'></span> 

           </div> 

            {{/if}} 

        </div> 

    {{/if}} 

        {{if ~getstate() && hasChildRecords}} 

        <div class='e-intendparent'> 

            <div class="{{:~_stageName()}}"> 

                <span class='e-aboveIcon e-iconMargin e-icon' style='position: relative; float: left; display: none;'></span> 

                <span class='e-belowIcon e-iconMargin e-icon' style='float: left; display: none;'></span> 

                <span class='e-childIcon e-iconMargin e-icon' style='float: left; display: none;'></span> 

                <span class='e-cancelIcon e-iconMargin e-icon' style='float: left; display: none;'></span> 

            </div> 

        </div> 

    {{/if}} 

        <div class='{{if expanded}} e-treegridexpand e-icon {{else hasChildRecords}}e-treegridcollapse e-icon{{/if}} {{if !hasChildRecords}}e-doc{{/if}}' style='height: 20px; float: left; width: 20px; margin-left: 0px;' unselectable='on'> 

        </div> 

    <div class='e-cell' style='display: inline-block; width: 100%' unselectable='on'>{{:#data['Name']}}</div> 

</script> 

<script type="text/javascript"> 

    $.views.helpers({ _stageName: getStageName }); 

    $.views.helpers({ getstate: _getState }); 

    function _getState() { 

        if (this.data.parentItem) 

            return false; 

        else 

            return true; 

    } 

    function getStageName() { 

        var rowClass = "gridrowIndex", 

            proxy = this; 

        rowClass += proxy.data.index.toString() + "level" + proxy.data.level.toString(); 

        return rowClass; 

    } 

       //... 

</script> 

 

We have prepared a sample with this code snippets, please find the sample in below link. 

Sample - https://jsplayground.syncfusion.com/4e1sbnfx 

Please get back to us if you require further assistance on this. 

 

Regards, 

Pooja Priya K