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

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

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>






3 Replies

PS Pavithra Subramaniyam Syncfusion Team June 27, 2019 10:29 AM UTC

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> 
 
                              https://ej2.syncfusion.com/javascript/documentation/auto-complete/es5-getting-started/ 
                              https://ej2.syncfusion.com/javascript/documentation/api/auto-complete/#change 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 



JA Javier A Aguilera June 28, 2019 07:20 PM UTC

Worked reeeeally good! Thx!!


PS Pavithra Subramaniyam Syncfusion Team July 1, 2019 04:15 AM UTC

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. 



Loader.
Up arrow icon