Get row data

Hello, i have an issue with getting row data, i want to send grid field data with ajax to my controller when i click an external button, how can i do that?

<ejs-grid id="Grid" allowGrouping="true" allowTextWrap="true" height="100%" load="onLoad" rowHeight="20" gridLines="Both" allowSorting="true" allowMultiSorting="true" allowReordering="true" width="100%" childGrid="FirstChild" allowResizing="true">
            <e-grid-groupsettings showDropArea="false"></e-grid-groupsettings>
            <e-data-manager json="@Model.salesOrders" batchUrl="/SalesOrdersProcessing/Update" adaptor="RemoteSaveAdaptor"></e-data-manager>
            <e-grid-editsettings allowEditing="true" showConfirmDialog="false" mode="Batch"></e-grid-editsettings>
            <e-grid-columns>
                <e-grid-column field="sessionID" headerText="" visible="false" allowEditing="false" textAlign="Center" width="105"></e-grid-column>
                <e-grid-column field="wyear" headerText="wYear" visible="false" allowEditing="false" textAlign="Center" width="105"></e-grid-column>
                <e-grid-column field="docType" headerText="DocType" textAlign="Center" visible="false" allowEditing="false" type="decimal" width="105"></e-grid-column>
                <e-grid-column field="docNo" headerText="DocNo" textAlign="Center" visible="false" allowEditing="false" type="decimal" width="150"></e-grid-column>
                <e-grid-column field="docTypeDescription" headerText="Тип на нарачка" textAlign="Left" allowEditing="false" width="105"></e-grid-column>
                <e-grid-column field="status" headerText="Статус" allowEditing="true" textAlign="Left" type="decimal" width="60"></e-grid-column>
                <e-grid-column field="orderNo" headerText="Број на нарачка" allowEditing="false" textAlign="Left" width="150"></e-grid-column>
                <e-grid-column field="sysdatetime" headerText="Датум и време на нарачка" customFormat="@(new { type ="datetime", format="dd.MM.yyyy HH:mm" })" type="datetime" allowEditing="false" textAlign="Left" width="150"></e-grid-column>
                <e-grid-column field="clientToName" headerText="Име на клиент" allowEditing="false" , textAlign="Left" width="250"></e-grid-column>
                <e-grid-column field="cityName" headerText="Град" allowEditing="false" , textAlign="Left" width="105"></e-grid-column>
                <e-grid-column field="orderAmountWithVAT" headerText="Износ со ДДВ" format="N2" allowEditing="false" , textAlign="Right" width="105"></e-grid-column>
                <e-grid-column field="methodOfPayment" headerText="Начин на плаќање" allowEditing="false" , textAlign="Left" width="105"></e-grid-column>
                <e-grid-column field="termsOfDelivery" headerText="Начин на испорака" allowEditing="false" textAlign="Left" width="105"></e-grid-column>
                <e-grid-column field="noOfUnpaidInvoices" headerText="Број на отворени фактури" textAlign="Right" allowEditing="false" , width="105"></e-grid-column>
                <e-grid-column field="balance" headerText="Салдо" textAlign="Right" format="N2" allowEditing="false" , width="105"></e-grid-column>
                <e-grid-column field="outCreditLimit" headerText="Кредитен лимит износ" format="N2" allowEditing="false" , textAlign="Right" width="105"></e-grid-column>
                <e-grid-column field="note" headerText="Забелешка" textAlign="Left" allowEditing="false" , width="60"></e-grid-column>
                <e-grid-column field="clientOrderNumber" headerText="Клентски број на нарачка" allowEditing="false" , textAlign="Left" width="200"></e-grid-column>
            </e-grid-columns>
        </ejs-grid>

1 Reply 1 reply marked as answer

TS Thiyagu Subramani Syncfusion Team May 5, 2021 12:11 AM UTC

Hi Tarik, 

Thanks for contacting Syncfusion support. 

Based on your shared information we suspect that you want to send row data to the controller when clicking the external button. We have achieved your requirement by getting row data using getRowInfo, getRowByIndex methods and sending that  row data details to the controller using ajax call. Using this you can send row data to controller as per your needs.  Please refer to the below code and sample link. 

<ejs-button id="primarybtn" content="Send row data to controller" isPrimary="true"></ejs-button> 
<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })"> 
    . . . . . . .  
</ejs-grid> 
<script> 
    var SearchValue; 
    . . . . . . .  
    document.getElementById("primarybtn").addEventListener('click', function () { 
        debugger; 
        var gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
        SearchValue = gridObj.getRowInfo(gridObj.getRowByIndex(gridObj.getRowIndexByPrimaryKey(10001))) 
        var ajax = new ej.base.Ajax({ 
            type: "POST", 
            url: "/Home/SelectRecord", 
            contentType: "application/json; charset=utf-8", 
        }); 
        var data = JSON.stringify({ FilteredValue: SearchValue.rowData }); 
        ajax.send(data).then(); 
        ajax.onSuccess = result => { 
        }; 
    }); 
</script> 
 
public ActionResult SelectRecord([FromBody]SelectedModel row) 
        { 
            //perfoerm your action here as per your needs. 
            return Json(row); 
        } 
        public class SelectedModel 
        { 
            public object FilteredValue { get; set; } 
        } 


 


Note: To perform Edit actions in EJ2 Grid,  Grid must have at least one primary column. But in your shared code information you missed to define primary key column. 

Editing feature requires a primary key column for CRUD operations. To define the primary key, set columns.isPrimaryKey to true in particular column. 







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

Regards, 
Thiyagu S 



Marked as answer
Loader.
Up arrow icon