Drag and Drop of Grid not working properly.

[Shalini]

I have a grid which on page load appears as in "pageload data" picture.

I've use the below code in my cshtml page for grid :

$("#Grid").ejGrid({

            dataSource: stagelist,        

            allowRowDragAndDrop: true,

            rowDragStart: function (args) {  

              

                if (args.data.isStatic == true)  // cant move first and last stage

                    args.cancel=true;                

            },

            rowDragStop: function (args) {

                if (args.data.isStatic == true) // Can't drop any stage on first and last stage

                    args.cancel = true;

            },          

            columns: [

                { field: "stageName", headerText: "Stage Name", headerTextAlign: ej.TextAlign.Center, textAlign: "center", width: 250 },

                { field: "personRole", headerText: "Person Role", headerTextAlign: ej.TextAlign.Center, textAlign: "center", width: 250 },

                { field: "nextAction", headerText: "Next Action", headerTextAlign: ej.TextAlign.Center, textAlign: "center", width: 180 },

                { headerText: "Overdue After", template: "#ColumnOverdueTemplate", headerTextAlign: ej.TextAlign.Center, textAlign: "center", width: 180 },

                { template: "#ColumnEditTemplate", textAlign: "center", width: 27 },

                { template: "#ColumnDeleteTemplate", textAlign: "center", width: 40 }

            ]

        });

Now when I try to use the grid it has the following problems:
1) the supposed non-movable rows create a row outside the grid which is light in color(dont know how) as in picture 1 and 2.  (i donot want to move new and hired fields)

2)If i try to move other fields with the non movable fields, they actually do so(which should not happen if I'm using rowDragStop) as in picture3.

3) after moving other rows a few times the "New" row also starts to drag and drop as in pic 4.

Please reply as soon as possible.

Attachment: Screenshots_da568fa5.rar

[Manivannan Padmanaban]

Hi Shalini, 

Thanks for contacting syncfusion support. We are happy to assist you. 

Query 1. the supposed non-movable rows create a row outside the grid which is light in color(dont know how) as in picture 1 and 2.  (i donot want to move new and hired fields) 

 

We are unable to reproduce the reported issue at our end for your convenience we have created the sample please refer the below link for sample. 

https://jsplayground.syncfusion.com/amag3p4y  

After referring the sample still facing the issue, please get back to us with the following the details  

1. Share the Essential studio version are you using.

Query 2. If i try to move other fields with the non-movable fields, they actually do so(which should not happen if I'm using rowDragStop) as in picture3. 

 

In ejgrid we don’t have the event called rowDragStop. Please confirm where you find it.  

Query : i donot want to move new and hired fields 

We have achieved your requirement using rowdragstart event. Here we have cancelled the row drag for CustomerID fields vinet (or) victe. Please refer the below code example, 

  <script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

                rowDragStart:rowDragStart, 

                allowRowDragAndDrop: true, 

                selectionType: "multiple", 

                columns: [ 

                 ……………………………….. 

                ], 

            });            

}); 

function rowDragStart(args) {   

               

              if (args.data[0].CustomerID == "VINET" || args.data[0].CustomerID=="VICTE")  // cant move first and last stage 

                  args.cancel=true;                 

          } 

 

 

</script> 

Query 3. after moving other rows a few times the "New" row also starts to drag and drop as in pic 4. 

 

Once if we moves the rows the grid will reorder by itself due to this only the row positions are changed. If you are facing any other difficulties apart this please share the video demo of the issue. 

Regards, 

Manivannan Padmanaban. 

 

[Shalini]

hello, I think that the sample you provided no where mentions the problem I am facing. 

secondly I did try your rowdragstart event in which you are calling a separate function  but the issue is same. There comes a translucent line just below the gridas in the screenshot attached. I did inspect the line which comes out of the Grid and it shows something like this:

div class="e-cloneproperties e-draganddrop e-grid e-dragclone" style="height: auto; z-index: 2; position: absolute; width: 1106px;">Grid

 Please reply.

Attachment: Screenshot_af7f254a.rar

New	Hiring Manager	testing	2  day(s)

[Shalini]

hello, I think that the sample you provided no where mentions the problem I am facing. 

secondly I did try your rowdragstart event in which you are calling a separate function  but the issue is same. There comes a translucent line just below the gridas in the screenshot attached. I did inspect the line which comes out of the Grid and it shows something which Iv'e included a text file in attachment.

 Please reply.

Attachment: Screenshots_2262093e.rar

[Sathyanarayanamoorthy Eswararao]

Hi Shalini, 

Sorry for the inconvenience caused. 

Query: There comes a translucent line just below the grid. 

We are unable to reproduce the above-mentioned issue on our side. But according to your query we suspect that you need to prevent dragging of some rows and prevent dropping of some other rows on some specific rows. 

We have prepared a sample with the same requirement again. Please refer the below link for sample. 

Sample: https://jsplayground.syncfusion.com/inltxvo2  

In the below code example using the rowDragStart event we have made the rows with CustomerID values as “VINET” and “HILAA” as non-draggable rows and using actionBegin event we have prevented the dropping of other rows on first and last rows in the page. 

Refer the below code example. 

 

  $("#Grid").ejGrid({ 

                    // the datasource "window.gridData" is referred from jsondata.min.js 

                    dataSource: datamanager, 

                    allowPaging: true, 

                    allowRowDragAndDrop: true, 

                    columns: [ 

                                  { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 }, 

                                  { field: "CustomerID", headerText: "Customer ID", width: 100 }, 

                                  { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 100, format: "{0:C}" }, 

                                  { field: "Freight", headerText: "Freight", width: 80 } 

                    ], 

                    rowDragStart: "rowDragStart", 

                    actionBegin:"drop" 

                }); 

               

            }); 

            

        

function rowDragStart(args) {    

              if (args.data.CustomerID == "VINET" || args.data.CustomerID=="HILAA")  // cant move first and last stage  

                  args.cancel=true;                  

          }  

 

function drop(args){ 

   

  if(args.dropDetails) 

  var value = args.dropDetails.DestinationRowIndex; 

   

      if(value == 0 || value == 9){ 

        args.cancel = true; 

         } 

          

    } 

 

If you still face the issue please get back to us with following details. 

1.       Essential studio versions. 

2.       Video demonstration of your issue. 

3.       If possible please try to reproduce the mentioned issue in attached sample. 

Regards, 

Sathyanarayanamoorthy