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

How to change the hover arrow in treegrid.

Hi, its very hard to tell which row the drag is bottom row, and which row is the parent row. The tiny/microscopic arrow that shows this very hard to see.

How can I change the icon or colors of the arrow to make it bigger or clearer, and highlight the row background while dra-g rows. I would also like to display a hover/info information above the parent row on which its about to be dropped for handicap compliance if they select the option as a button or switch.

Controlling who can be the parent row, do you have a function to check/and only allow only certain types of data/rows to be parents at level 1, and level 2. So that not every row can become the main root rows. This has to be configurable so that I can set it up to ensure only some can be root, and others can be level -1 parent rows, etc. If something is rejected - show user a msg.

How do we send this back to the action as a partial, include some comments in the help on the script code, like cancel.

thanks
Mega

1 Reply

JS Jonesherine Stephen Syncfusion Team April 18, 2016 03:19 PM UTC

Hi Megatron,

Thanks for contacting Syncfusion support

Query 1: Hi, its very hard to tell which row the drag is bottom row, and which row is the parent row. The tiny/microscopic arrow that shows this very hard to see. 
How can I change the icon or colors of the arrow to make it bigger or clearer, and highlight the row background while drag rows.

Solution:

We can customize the drag icons font size and color by using below mentioned CSS classes.

Above Expander icon:  aboveIcon e-icon

Below Expander icon:   belowIcon e-icon

Child Expander icon:    childIcon e-icon

Cancel Expander icon:  cancelIcon e-icon

Please refer the below code snippet for further reference

<style>

        .e-treegrid .aboveIcon,.e-treegrid .belowIcon,.e-treegrid .childIcon,.e-treegrid .cancelIcon{

            color:red;

        }

.e-treegrid .aboveIcon:before, .e-treegrid .belowIcon:before, .e-treegrid .childIcon:before, .e-treegrid .cancelIcon:before {

                font-size: 24px;

    </style>

            


Query 2: I would also like to display a hover/info information above the parent row on which its about to be dropped for handicap compliance if they select the option as a button or switch.

Solution:

We can customize the drag tooltip by using tooltip Template property.

Please refer the code snippet for your reference

@(Html.EJ().TreeGrid("container")

            

             .AllowDragAndDrop(true)

            

                .DragTooltip(dt =>

                    {

                        dt.ShowTooltip(true);

                        dt.TooltipTemplate("#CustomToolTip");

                    })


            .Datasource(ViewBag.datasource)

)@(Html.EJ().ScriptManager())


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

        <table>

            <tr>

                <td style="background:lightgreen;padding:3px;height:30px;">{{:~_TaskID()}}</td>

                <td style="background:lightgreen;padding:3px;height:30px;">{{:~_TaskName()}}</td>

                <td style="background:lightgreen;padding:3px;height:30px;">{{:~_startDate()}}</td>

            </tr>

        </table>

    </script> 

Query 3: Controlling who can be the parent row, do you have a function to check/and only allow only certain types of data/rows to be parents at level 1, and level 2. So that not every row can become the main root rows. This has to be configurable so that I can set it up to ensure only some can be root, and others can be level -1 parent rows, etc. If something is rejected - show user a msg.

Solution:

In rowDragStop event we can get requestType, draggedRow,TargetRow Items. By using that we can cancel the drop by setting args.cancel as true.

Please refer the code snippet for your reference

  @(Html.EJ().TreeGrid("container")

             .AllowDragAndDrop(true)

             .ClientSideEvents(eve =>

                 {

                          eve.RowDragStop("rowDragStop");

                 })

           .Datasource(ViewBag.datasource))@(Html.EJ().ScriptManager())

    <script type="text/javascript">

      

        function rowDragStop(args) {

            if (args.targetRow.level == 0 &&( args.requestType == "insertBelow"      ||args.requestType=="insertAbove"))

            {

                args.cancel = true;

                alert("We can't drop Above and Below on Level 0 Task");

               }      


        }

    </script>

Query 4: How do we send this back to the action as a partial, include some comments in the help on the script code, like cancel.

Solution:

We can get the data on server side using ajax Post.

Please find the code snippet below:

    <script type="text/javascript">

       

        function rowDragStop(args) {

            if (args.targetRow.level == 0 &&( args.requestType == "insertBelow"      ||args.requestType=="insertAbove"))

            {

                args.cancel = true;

                alert("We can't drop Above and Below on Level 0 Task");

               $.ajax({

                    type: "POST",

                    url: "/TreeGrid/DataSource",

                    data: { "Message": "We can't drop Above and Below on Level 0 Task" },

                    dataType: "json",                  

                });              

            }   

      }

    </script>



//To  call on server side

[HttpPost]


        public void DataSource(string Message)

        {

            var info = Message;


        }

We have also prepared a sample for your reference. Please find the sample in the following URL.

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/MvcTreegrid512416349

Disclaimer: We have removed bin and obj folder in the given sample for some security reasons, we must include Syncfusion.EJ and Syncfusion.EJ.MVC dlls to render the TreeGrid control which is available in Essential studio installed location.

Please let us know if you require further assistance on this.

Thanks,

Jone Sherine .P.S.


Loader.
Live Chat Icon For mobile
Up arrow icon