Passing data from one grid to another on selection

[Kamil]

Hi, I have one grid with order positions with toolbar button "Choose product". That button is used to open dialog window with another grid that contains products list. After user double click on product row new row should be added do positions grid and filled with data based on selected product BUT not instantly calling insert action on grid - allowing the user to modify its values and then save it or cancel it.

So, here is positions grid (the destination grid)

<ejs-grid id="posGrid" toolbar="@(new List<string>() { "Add", "Choose product" })"
                toolbarClick="toolbarClick" query="new ej.data.Query().addParams('orderId', @Model.Order.OrderId)">
                <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" showDeleteConfirmDialog="true"></e-grid-editSettings>
                <e-data-manager url="/api/OrderPositionApi" adaptor="WebApiAdaptor"></e-data-manager>
                <e-grid-columns>
                    <e-grid-column commands=editCommands width="120"/>
                    <e-grid-column field="OrderId" defaultValue="@Model.Order.OrderId" visible="false" />
                    <e-grid-column field="OrderPositionId" isPrimaryKey="true" visible="false" />
                    <e-grid-column field="Name" headerText="Nazwa" width="90" textAlign="Center" validationRules="@(new { required= true })" />
                    <e-grid-column field="TaxId" headerText="Podatek" width="90" textAlign="Center" dataSource="@Model.Taxes" foreignKeyValue="Name" validationRules="@(new { required= true })" />
                    <e-grid-column field="CostGross" headerText="Koszt" width="90" textAlign="Center" />
                    <e-grid-column field="PriceNet" headerText="Cena netto" width="90" textAlign="Center" />
                    <e-grid-column field="Type" headerText="Typ" width="90" textAlign="Center" validationRules="@(new { required= true })" />
                </e-grid-columns>
            </ejs-grid>

Here is the dialog window with second grid (the source grid)

<ejs-dialog id="alert_dialog" isModal="true" visible="false" overlayClick="onOverlayClick" target="#container" header="Wybierz produkt" showCloseIcon="true" width="1050px" height="800px" target="#target">
    <e-content-template>


        <ejs-grid id="Grid" allowFiltering="true" height="100%" allowPaging="true" toolbar="@(new List<string>() { "Search"})" allowSelection="true" recordDoubleClick="doubleClick">
            <e-grid-editsettings allowAdding="false" allowDeleting="false" allowEditing="false"></e-grid-editsettings>
            <e-data-manager url="/api/ProductsApi" adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager>
            <e-grid-pagesettings pageSize="30"></e-grid-pagesettings>
            <e-grid-columns>
                <e-grid-column field="Name" headerText="Nazwa" width="150" textAlign="Center"></e-grid-column>
                <e-grid-column field="Format" headerText="Format" width="120" textAlign="Center"></e-grid-column>
                <e-grid-column field="Option" headerText="Opcja" width="150" textAlign="Center"></e-grid-column>
                <e-grid-column field="Quantity" headerText="Nakład" width="80" textAlign="Center"></e-grid-column>
                <e-grid-column field="CostGross" headerText="Koszt" width="80" textAlign="Center"></e-grid-column>
                <e-grid-column field="PriceNet" headerText="Cena netto" width="110" textAlign="Center"></e-grid-column>
                <e-grid-column width="*"></e-grid-column>
            </e-grid-columns>
        </ejs-grid>


    </e-content-template>
</ejs-dialog>

And this is the function that handles the double click on source grid. It should create new record in destination grid but keep it in edit mode allowing user to modify its values.

   function doubleClick(args)
    {
        var dialog = document.getElementById("alert_dialog").ej2_instances[0];
        dialog.hide();


        var data = args.rowData;
        var positionsGrid = document.getElementById("posGrid").ej2_instances[0];


        positionsGrid.addRecord({"Name" : data.Name});
    }

[Rajapandiyan Settu]

Hi Kamil, 

 

Thanks for contacting Syncfusion support. 

 

Based on your requirement, you want to add a record with Name field value and continue editing on that added row. You can achieve this by binding the value in actionBegin event (requestType as add). 

 

actionBegin: https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 

 

 

<script> 

    var addKey; 

    var flag = false; 

    function doubleClick(args) 

    { 

        var dialog = document.getElementById("alert_dialog").ej2_instances[0]; 

        dialog.hide(); 

        var data = args.rowData; 

        var positionsGrid = document.getElementById("posGrid").ej2_instances[0]; 

        addKey = data.CustomerID; // store the value in global variable 

        flag = true; 

        positionsGrid.addRecord(); // add a record in Grid 

    } 

    function actionBegin(args){ 

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

            flag = false; 

            args.rowData["CustomerID"] = addKey; // bind the value before adding a record 

        } 

    } 

</script> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_3_grid_add-212418919.zip 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S