Grid Inline Edit Update Id not Name

[Jorge Orellana]

Hi I have a grid that that I am trying to implement inline editing for. I have a list of courses, each course has a Tearcher and a Teacher Assistant that are assigned to it.

Here is what my grid looks like (Teacher and Assistant, have additional properties like Tearcher.ResourceId, the key, Teacher.Name (obtained from the account id) and Teacher.AccountId

"<ejs-grid id="course-teacher" allowfiltering="true" width="100%" allowpaging="true" toolbar="@(new List<string>() { " edit",="" "cancel",="" "update"="" })"=""></ejs-grid></p><p>

<e-data-manager json="@Model.Course.ToArray()" adaptor="RemoteSaveAdaptor" updateurl="@Url.Action(" updateteacher",="" "syncfusion",="" new="" {="" area="" })"=""></e-data-manager></p><p><e-grid-filtersettings type="Menu"></e-grid-filtersettings></p><p><e-grid-editsettings allowediting="true"></e-grid-editsettings></p><p> <e-grid-columns></e-grid-columns></p><p><e-grid-column field="Course" allowediting="false" allowsorting="false" type="string" headertext="Name" width="140"></e-grid-column></p><p><e-grid-column field="Teacher.Name" edittype="dropdownedit" type="string" allowsorting="false" headertext="Teacher" width="200"></e-grid-column>"

When I click on the inline edit drop down and change the value of the Teacher or Assistant name and I post this to be saved, only the Name is actually updated, it does not update the account Id which I need to use to update my database. The question is, how do I get the Teacher.AccountId update posted rather than just the Teacher.Name property.

Thank you in advance

[Pavithra Subramaniyam]

Hi Jorge, 

Thanks for contacting Syncfusion support. 

You can get and save the id value along with the Name by using the ‘edit params’ feature of Grid columns. Using this feature, you can add the change event for the dropdown and inside this event you can get the id value. And before saving the record you can assign this id to the changed record inside the Grid ‘actionBegin’ event . Please refer to the below code example, documentation link for more information. 

 <ejs-grid id="course-teacher" allowfiltering="true" width="100%" allowpaging="true" toolbar="@(new List<string>() { " edit","cancel","update"}) load="load" actionBegin="actionBegin"> 

.  .  . 

<e-grid-column field="Teacher.Name" headerText="Order Date" edit=dpParams editType="dropdownedit" width="150"></e-grid-column> 

.  .  . 

</ejs-grid> 

 

<script> 

fun 

var id; 

function load(){ 

  var grid = document.getElementById('course-teacher').ej2_instances[0]; 

  grid.getColumnByField("Teacher.Name").edit = {params:{ 

        query: new ej.data.Query().select(['Teacher.AccountId', 'Teacher.Name']), 

          change: (e) => { 

            id = e.itemData['Teacher']['AccountId']; 

          }, 

  }} 

} 

function actionBegin (e) { 

    if (e.requestType == 'save') { 

       e.data['Teacher']['AccountId'] = id || e.data['Teacher']['AccountId']; 

      id = null; 

    } 

  }, 

</script> 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-type-and-its-params  

https://ej2.syncfusion.com/javascript/documentation/api/drop-down-list#query 

                             https://ej2.syncfusion.com/javascript/documentation/api/drop-down-list#change
                             https://ej2.syncfusion.com/javascript/documentation/api/grid#actionbegin 

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

Regards, 

Pavithra S