Trying to get a value in current row and then fire event to fill other cells of the same row

[Javier A Aguilera]

Good morning,

I'm trying to get the value of a specific column from current row after editing it and then trigger an event from controller to read data from SQL and then fill other columns in the same row. 

Also I need to put an auto complete in the cell "ProductName"

Can somebody help me out please?

In more detail, I want that after I type an autocomplete in the cell "ProductName" I need to read data from controller and then fill the columns "ClaveProdServ", "Descripcion" and "ValorUnitario" from the same row.

THIS IS THE GRID:

<ejs-grid id="ConfiguracionPACGrid" actionComplete="refresh" cellSaved="cellSavedFunction" toolbar="@(new List<string>() { "Add","Delete","Update", "Cancel" })">

    <e-data-manager adaptor="UrlAdaptor" url="/Facturacion/gridConceptosXFacturar_Read" requestType="Post" insertUrl="/Facturacion/gridConceptosXFacturar2_Create/?iva=@iva" updateUrl="/Administracion/ConfiguracionPACGrid_Update" removeUrl="/Administracion/ConfiguracionPACGrid_Destroy"></e-data-manager>

    <e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true" mode="Normal" showConfirmDialog="true"></e-grid-editSettings>

    <e-grid-columns>

        <e-grid-column field="ConceptoCfdiID" isPrimaryKey="true" visible="false"></e-grid-column>

        <e-grid-column field="cfdiID" headerText="cfdiID" width="90" visible="false" defaultValue="@varidNuevo"></e-grid-column>

        <e-grid-column field="ProductName" headerText="Producto" width="180"></e-grid-column>

        <e-grid-column field="ClaveProdServ" headerText="Clave Producto Servicio" width="180"></e-grid-column>

        <e-grid-column field="Descripcion" headerText="Descripción" width="300"></e-grid-column>

        <e-grid-column field="ClaveUnidad" headerText="Clave Unidad" width="150"></e-grid-column>

        <e-grid-column field="Unidad" headerText="Unidad" width="150"></e-grid-column>

        <e-grid-column field="ValorUnitario" headerText="Valor Unitario" width="150"></e-grid-column>

        <e-grid-column field="Cantidad" headerText="Cantidad" width="150"></e-grid-column>

        <e-grid-column field="Descuento" headerText="Descuento" width="150"></e-grid-column>

        <e-grid-column field="Importe" headerText="Importe" width="150"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

<ejs-scripts></ejs-scripts>

[Pavithra Subramaniyam]

Hi Javier, 

 

Thanks for contacting Syncfusion support. 

 

From your query we understand that you want to render AutoComplete component for a column while editing and while changing a value you need to update the other columns. You can achieve your requirement by using the Edit Template feature of Grid component. And in the “change ” event of AutoComplete component you can send the AJAX to the server and modify the required fields. Please refer to the below code example, documentation nad sample link for more information. 

 

[index.cshtml] 

<ejs-grid id="ConfiguracionPACGrid" dataSource="ViewBag.data" toolbar="@(new List<string>() { "Add","Delete","Update", "Cancel" })"> 

    <e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true" mode="Normal" showConfirmDialog="true"></e-grid-editSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" isPrimaryKey="true" visible="false"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="cfdiID" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"  width="90"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="180"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" width="180"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="180"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

<script> 

    var elem; 

    var dObj; 

 

    function create(args) { 

        elem = document.createElement('input'); 

        return elem; 

    } 

 

    function write(args) { 

        dObj = new ej.dropdowns.AutoComplete({ 

            dataSource: @Html.Raw(Json.Serialize(ViewBag.data)), 

            fields: { value: 'CustomerID' }, 

            value: args.rowData[args.column.field], 

            change: (e) => { 

                console.log(e.value);  // you can get the changed value in autocomplete 

                 // send the AJAX here and from the returned value you can modify the fields value as below 

                 //”#”+Grid ID+”Field name” 

                document.querySelector("#ConfiguracionPACGridShipCity").value = "Updated"; 

                document.querySelector("#ConfiguracionPACGridFreight").value = 3; 

                document.querySelector("#ConfiguracionPACGridShipCountry").value = "Updated"; 

            } 

        }); 

        dObj.appendTo(elem); 

    } 

 

    function destroy() { 

        dObj.destroy(); 

    } 

 

    function read(args) { 

        return dObj.value; 

    } 

</script> 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template 

                              https://ej2.syncfusion.com/javascript/documentation/auto-complete/es5-getting-started/ 

                              https://ej2.syncfusion.com/javascript/documentation/api/auto-complete/#change 

 

Sample               : https://www.syncfusion.com/downloads/support/directtrac/general/ze/urlAdaptor1394817235  

 

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

 

Regards, 

Pavithra S. 

[Javier A Aguilera]

Worked reeeeally good! Thx!!

[Pavithra Subramaniyam]

Hi Javier, 

Thanks for your update. 

We are happy to hear that the provided solution is working. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  

Pavithra S.