DataGrid Drag and Drop and open add dialog

[Roberto]

Hello,

I have two tables and when I drag and drop the row from the left table to the right table (target), I need to open the dialog box for adding a new record to the right table (target) for the user to complete other fields and then I have to save this record.

So, How can I open the addition dialog after dragging and dropping the row in the right table?

thanks

[Joseph Christ Nithin Issack]

Hi Roberto, 

  Greetings from Syncfusion support. 

  Based on your requirement you want to drag and drop a row from left  grid to the right grid and you want the row you have dropped to be moved to the edit mode. This can be achieved by using the `rowDrop` event of the left Ej2 Grid and the `dataBound` event of the right Ej2 Grid. 

Please refer the below code example: 

 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" rowDrop="rowDrop" allowRowDragAndDrop="true" allowSelection="true"  allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <e-grid-editsettings allowEditing="true" allowAdding="true" allowDeleting="true"></e-grid-editsettings> 

    <e-grid-rowdropsettings targetID="DestGrid"></e-grid-rowdropsettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" isPrimaryKey="true" headerText="Order ID" width="130"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" editType="dropdownedit" width="130"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="130"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

 

<ejs-grid id="DestGrid" allowRowDragAndDrop="true" dataBound="dataBound" allowSelection="true"  allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <e-grid-editsettings allowEditing="true" allowAdding="true" allowDeleting="true"  mode="Dialog"></e-grid-editsettings> 

    <e-grid-rowdropsettings targetID="Grid"></e-grid-rowdropsettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" isPrimaryKey="true" headerText="Order ID" width="130"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" editType="dropdownedit" width="130"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="130"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

 

<script> 

    var primaryKey; 

    var flag = false; 

 

    function rowDrop(args) { 

      flag = true; 

      primaryKey = args.data[0]['OrderID']; 

    } 

 

 

    function dataBound(args) { 

    if (flag) { 

        flag = false; 

        var destGrid = document.getElementById('DestGrid').ej2_instances[0]; 

        var index = destGrid.getRowIndexByPrimaryKey(primaryKey); 

        console.log(index); 

        // Select the row in given index 

        destGrid.selectRow(index); 

        // Edit the seleted row 

        destGrid.startEdit(); 

    } 

    } 

</script> 

Please get back to us for further details. 

Regards, 

Joseph I. 

[Roberto]

Hi, thanks for your help.

Almost perfect.

The two grids don't have the similar structure of fields and in the target grid I have two primarykeys. I need to put the primaryKeys values before editing, so I believe the best option is to add a new record with the primaryKeys pre-populated, there is also the need to pre-populate other fields. I didn't put all fields here because it's a bigger structure.

  <div class="col-12 col-sm-12 col-md-4 col-xl-4" style="float:left">

        <div id="target2" class="mainBox col-12 col-sm-12 col-md-12 col-xl-12">

            <ejs-dialog id="default_dialog2"

                        visible="false"

                        width="300px"

                        animationSettings="defaultanimation"

                        target="#target2"

                        isModal="true"

                        showCloseIcon="true"

                        header="Erro">

                <e-content-template>

                    <p>Não há registro selecionado</p>

                </e-content-template>

            </ejs-dialog>

            <ejs-grid id="Grid2"

                      locale="pt"

                      dataSource="@ViewBag.ProdutoPraga"

                      allowGrouping="false"

                      allowSorting="true"

                      rowDrop="rowDrop2"

                      allowSelection="true"

                      allowTextWrap="true"

                      allowRowDragAndDrop="true"

                      allowPaging="true">

                <e-grid-rowdropsettings targetID="DestGrid2"></e-grid-rowdropsettings>

                <e-grid-pagesettings pageSize="40"></e-grid-pagesettings>

                <e-grid-editSettings mode="Dialog"

                                     allowAdding="false"

                                     allowDeleting="false"

                                     allowEditing="false"

                                     newRowPosition="Top"></e-grid-editSettings>

                <e-grid-searchSettings fields="@(new string[] { "descricao" })"

                                       operator="contains"

                                       ignoreCase="true">

                </e-grid-searchSettings>

                <e-grid-columns>

                    <e-grid-column field="id"

                                   headerText="id"

                                   isPrimaryKey="true"

                                   visible="false"

                                   textAlign="Left">

                    </e-grid-column>

                    <e-grid-column field="grupoquimico"

                                   allowGrouping="true"

                                   headerText="Grupo Quimico"

                                   visible="true"

                                   textAlign="Left">

                    </e-grid-column>

                </e-grid-columns>

            </ejs-grid>

        </div>

    </div>

    <div class="col-12 col-sm-12 col-md-4 col-xl-4" style="float:left">

        <div id="target3" class="mainBox col-12 col-sm-12 col-md-12 col-xl-12">

            <ejs-dialog id="default_dialog3"

                        visible="false"

                        width="300px"

                        locale="pt"

                        animationSettings="defaultanimation"

                        target="#target3"

                        isModal="true"

                        showCloseIcon="true"

                        header="Erro">

                <e-content-template>

                    <p>Não há registro selecionado</p>

                </e-content-template>

            </ejs-dialog>

            <ejs-grid id="DestGrid2"

                      allowRowDragAndDrop="true"

                      dataBound="dataBound2"

                      allowSelection="true"

                      allowPaging="true" toolbar="@(new List<string>() { "Edit", "Cancel", "Update" })">

                <e-grid-editsettings allowEditing="true" allowAdding="true" allowDeleting="true" mode="Dialog"></e-grid-editsettings>

                <e-grid-rowdropsettings targetID="Grid2"></e-grid-rowdropsettings>

                <e-grid-pagesettings pageSize="40"></e-grid-pagesettings>

                <e-grid-editSettings mode="Dialog"

                                     allowAdding="true"

                                     allowDeleting="true"

                                     allowEditing="true"

                                     newRowPosition="Top"></e-grid-editSettings>

                <e-grid-searchSettings fields="@(new string[] { "descricao" })"

                                       operator="contains"

                                       ignoreCase="true">

                </e-grid-searchSettings>

                <e-grid-columns>

                    <e-grid-column field="pragaid"

                                   headerText="Praga id"

                                   isPrimaryKey="true"

                                   visible="true"

                                   textAlign="Left">

                    </e-grid-column>

                    <e-grid-column field="produtopragaid"

                                   headerText="Produto Praga id"

                                   isPrimaryKey="true"

                                   visible="true"

                                   textAlign="Left">

                    </e-grid-column>

                    <e-grid-column field="dosagem"

                                   allowGrouping="false"

                                   headerText="Dosagem"

                                

                                   visible="true"

                                   textAlign="Right">

                    </e-grid-column>

                </e-grid-columns>

            </ejs-grid>

        </div>

    </div>

 

<script>

    var primaryKey1 = "eab52f7f-b01d-4225-b211-a7f3d878c761";

    var primaryKey2;

    var flag = false;

    function rowDrop2(args) {

        flag = true;

        primaryKey2 = args.data[0]["id"];

    }

    function dataBound2(args) {

        if (flag) {

            flag = false;

            var destGrid = document.getElementById('DestGrid2').ej2_instances[0];

            // Select the row in given index

            destGrid.selectRow(0);

            var rowSelcted = destGrid.getSelectedRecords();

            console.log(rowSelcted);

            // destGrid.UpdateCell(0, "pragaid", primaryKey1);

            // destGrid.UpdateCell(0, "produtopragaid", primaryKey2);

            // Edit the seleted row

            destGrid.startEdit();

        }

    }

[Joseph Christ Nithin Issack]

Hi Roberto, 

  Thanks for the update. 

  By default you will be able to drag and drop the rows from one grid to another only if the fields of the datasource are same in both the grids. If the fields are different it is not possible to drag and drop the row. Please confirm the following details are: 

• On inspecting the code example provided we can see that you are using different filed names in both the grids. Please explain the exact requirement why you want to drag and drop the rows.

• Also we can see that you are using two primary key field in the second grid. Kindly explain the why you use two primary key fields in the grid.

• Please ensure if you want to add a new record in the second grid when you select a row in the first grid.
• Could you please explain your exact requirement

Please provide the above details so that we may be able to provide a better solution ASAP. 

Regards, 

Joseph I. 

[Roberto]

HI,

hi,

I have source grid which has some data I would like to fill for row target table. The new row in the target table will be saved in my database in a new class(table).

When I drag the row from the source table to the destination table I just want to pass some parameters (value fields) so that they are pre-filled from the row source table information and the user can edit this information in the destination table and it will be saved in the database .

The structures between tables are different because they are different tables in the database.

The database in the destination table is a composite key and for this reason I configured two primarykeys, I don't know if I did it correctly.

I don't know if I made it clear to you or if I'm looking for the best way to do this operation.

//class Database Grid source

 public class ProdutoPraga

    {

        [Key]

        [Display(Name = "Código")]

        public string id { get; set; }

        [Display(Name = "Ativo")]

        public bool ativo { get; set; } = true;

        [Required(ErrorMessage = "Esse campo é obrigatório")]

        [Display(Name = "Grupo Químico")]

        public string grupoquimico { get; set; }

        [Required(ErrorMessage = "Esse campo é obrigatório")]

        [Display(Name = "Princípio Ativo")]

        public string principioativo { get; set; }

        public virtual ICollection<ProdutoPragaPraga> ProdutoPragaPragas { get; set; }

    }

//class datagrid target

public class ProdutoPragaPraga

    {

        [Key, Column(Order = 0)]

        public string pragaid { get; set; }

        [Key, Column(Order = 1)]

        public string produtopragaid { get; set; }

        [Display(Name ="Dosagem")]

        public double dosagem { get; set; } = 0;

        public virtual Praga Praga { get; set; }

        public virtual ProdutoPraga ProdutoPraga { get; set; }

    }

[Joseph Christ Nithin Issack]

Hi Roberto, 

  

  Thanks for your update. 

  

  Based on your requirement you want to drag and drop a row from left  grid to the right grid and you want to add a new row with the fields in the new ore dialogbox automatically populated with the data from the dragged row. This can be achieved by using the `rowDrop` event of the left Ej2 Grid and the `actionBegin` event of the right Ej2 Grid.  

  

  Please refer the below code example. 

  

  

  

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" rowDrop="rowDrop" allowRowDragAndDrop="true" allowSelection="true"  allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <e-grid-editsettings allowEditing="true" allowAdding="true" allowDeleting="true"></e-grid-editsettings> 

    <e-grid-rowdropsettings targetID="DestGrid"></e-grid-rowdropsettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" isPrimaryKey="true" headerText="Order ID" width="130"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

  

  

<ejs-grid id="DestGrid" allowRowDragAndDrop="true" actionBegin="actionBegin" allowSelection="true"  allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <e-grid-editsettings allowEditing="true" allowAdding="true" allowDeleting="true"  mode="Dialog"></e-grid-editsettings> 

    <e-grid-rowdropsettings targetID="Grid"></e-grid-rowdropsettings> 

    <e-grid-columns> 

        <e-grid-column field="SlNo" isPrimaryKey="true" headerText="Sl No" width="130"></e-grid-column> 

        <e-grid-column field="ID" isPrimaryKey="true" headerText="Employee ID" width="130"></e-grid-column> 

        <e-grid-column field="Customer" headerText="Customer Id" width="140"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

  

  

<script> 

    var primaryKey; 

    var flag = false; 

    var duplicateData; 

  

    function rowDrop(args) { 

        var targetGrid = document.getElementById('DestGrid').ej2_instances[0]; 

        if(args.target.closest('.e-grid').id == targetGrid.element.id){ 

            flag = true; 

            duplicateData = { 

              SlNo: Math.floor(Math.random() * (10000 - 1 + 1)) + 1, 

              ID: Math.floor(Math.random() * (10000 - 1 + 1)) + 1, 

              Customer: args.data[0]["CustomerID"] 

            }; 

            args.cancel = true; 

            targetGrid.addRecord(); 

        } 

    } 

  

    function actionBegin(args) { 

        if(flag && args.requestType == 'add') { 

            flag = false; 

            args.rowData.SlNo = duplicateData.SlNo; 

            args.rowData.ID = duplicateData.ID; 

            args.rowData.Customer = duplicateData.Customer; 

        } 

    } 

</script> 

  

  

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridWithURLAdaptor(SetDynamically)876281488 

  

Please get back to us for further details. 

  

Regards, 

Joseph I. 

[Roberto]

Hi,

It is working perfect.

Thank you.

[Joseph Christ Nithin Issack]

Hi Roberto, 

   Thanks for your update. 

   We are gad that the provided solution works fine at your end. 

   Please get back to us for further details. 

Regards, 

Joseph I