autofill the other fields based on a field's value in jsgrid

I have the following layout for a jsgrid table:

and I want to make the rest of the columns fill according to the value of the item code. I was able to retrieve the value of the item name from the database table via AJAX but I'm unable to asynchronously update the value of the other fields. I've tried a lot of methods that allowed me to set a default value for the item name for example but couldn't get it to update upon the completion of the ajax request.

this is a prototype that I used to verify the value retrieved from the table

insertTemplate: function () {
                var $insertControl = jsGrid.fields.text.prototype.insertTemplate.call(this);

                $insertControl.change(function () {
                    var item_code = $(this).val();
                    //alert(item_code);
                    $.ajax({
                    type: "POST",
                    url: 'itemquery.php',
                    data: { item_code : item_code },
                    success: function(data)
                    {
                        itemName = data;
                        alert(itemName);
                    }
                });
              });

                return $insertControl;
            },

and this is the code I used on the item name field to set a default value

insertTemplate: function() { 
          return $("<input>").attr("type", "text").attr("value", function(){
            return "test value";
          });

my goal was to have a dropdown list for the item name field and when the user selects a value the other fields autofill but I was trying to figure out how to do it from the item code first since it seemed more straightforward (and I'm leaving it as a plan B)

I needed to auto-fill in the Name, Email Address and Mobile No. of the student, based on the selected StudentId from the dropdown.

Here is the code of fields in the grid:

fields: [
      {
          name: "StudentId",
          insertTemplate: function () {
              var grid = this._grid;
              var insertResult = jsGrid.fields.select.prototype.insertTemplate.call(this, arguments);

              insertResult.on("change", function () {
                  const selectedValue = insertResult.val();
                  if (selectedValue != 0) {
                      const data = GetStudentDetails(selectedValue);
                      grid.option("fields")[1].insertControl.val(data.Name);
                      grid.option("fields")[2].insertControl.val(data.EmailAddress);
                      grid.option("fields")[3].insertControl.val(data.MobileNo);
                  }
                  else {
                      grid.option("fields")[1].insertControl.val("");
                      grid.option("fields")[2].insertControl.val("");
                      grid.option("fields")[3].insertControl.val("");
                  }
              });
              return insertResult;
          },
          editTemplate: function (value) {
              var grid = this._grid;
              var editResult = jsGrid.fields.select.prototype.editTemplate.call(this, value);

              editResult.on("change", function () {
                  const selectedValue = editResult.val();
                  if (selectedValue != 0) {
                      const data = GetStudentDetails(selectedValue);
                      grid.option("fields")[1].editControl.val(data.Name);
                      grid.option("fields")[2].editControl.val(data.EmailAddress);
                      grid.option("fields")[3].editControl.val(data.MobileNo);

                  }
                  else {
                      grid.option("fields")[1].editControl.val("");
                      grid.option("fields")[2].editControl.val("");
                      grid.option("fields")[3].editControl.val("");
                  }
              });
              return editResult;
          },
          type: "select",
          title: "StudentId",
          items: studentIds,
          valueField: "Id",
          textField: "Id",
          validate: {
              message: "Field StudentId is required",
              validator: function (value)
              {
                  return value != 0;
              }
          }
      },
      { name: "Name", type: "text", title: "Name", validate: "required", readOnly: true },
      { name: "EmailAddress", type: "text", title: "Email Address", readOnly: true},
      { name: "MobileNo", type: "text", title: "Mobile Contact", readOnly: true},
      { type: "control" }
]

Though the function GetStudentDetails to fetch student data using AJAX call was not async:

function GetStudentDetails(id) {
    var student = {};
    $.ajax({
        type: "GET",
        url: "/Students/Details",
        data: { "id": id },
        dataType: "json",
        async: false,
        success: function (response) {
            student.Name = response.Name;
            student.EmailAddress = response.EmailAddress;
            student.MobileNo = response.MobileNo;
        },
        error: function (response) {
        }
    });
    return student;
}