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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Use of column template in combination with drag and drop

Thread ID:

Created:

Updated:

Platform:

Replies:

149284 Nov 20,2019 03:19 PM UTC Nov 21,2019 09:18 AM UTC jQuery 1
loading
Tags: ejTreeGrid
Developer
Asked On November 20, 2019 03:19 PM UTC

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 [Syncfusion]
Replied On 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 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon