We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Use of column template in combination with drag and drop

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


1 Reply

PP Pooja Priya Krishna Moorthy Syncfusion Team November 21, 2019 09:18 AM UTC

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. 
Please get back to us if you require further assistance on this. 
 
Regards, 
Pooja Priya K 
 


Loader.
Live Chat Icon For mobile
Up arrow icon