how change this code in widget

See more:

Javascript

hello
i am working with widget library in a c# asp mvc.(server side)
i have a grid in page that have several columns like below
i have problems with my code.
this is my table :

var source =t
          {
              datatype: "json",
              datafields: [
                  { name: 'EmployeeID' },
                  { name: 'FirstName' },
                  { name: 'LastName' },
                  { name: 'Title' },
                  { name: 'Address' },
                  { name: 'City' },
                  { name: 'Country' }
              ],

1 - when i update a cell in grid it is not updated at the same time and indeed it
is not refreshed.

2-i want to have my city column as a dropdownlist type.
when i click on that column it be included all my cities.
but if i select a city in list -it is not shown in list in next time.
how can i solve it.

how should i modify my code? pls help me . thankyou so much

this is my code:

@{
    ViewBag.Title = "Employee";
}
@section scripts {
    <script type="text/javascript" src="../../scripts/Widget/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../Scripts/Widget/jqx-all.js"></script>
    <link rel="stylesheet" type="text/css" href="../../Content/Widget/jqx.base.css" />
    <script type="text/javascript">
        $(document).ready(function() {
            // prepare the data
            var data = {};
            var theme = 'classic';
            var editedRows = new Array();

            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'EmployeeID' },
                    { name: 'FirstName' },
                    { name: 'LastName' },
                    { name: 'Title' },
                    { name: 'Address' },
                    { name: 'City' },
                    { name: 'Country' }
                ],
                id: 'EmployeeID',
                url: '/Customer/GetEmployees',
                updaterow: function(rowid, rowdata, commit) {

                   


// synchronize with the server - send update command
                    var data =
                        "update=true&FirstName=" + rowdata.FirstName +
                            "&LastName=" + rowdata.LastName +
                            "&Title=" + rowdata.Title + "&Address=" + rowdata.Address;
                    data = data +
                        "&City=" + rowdata.City + "&Country=" +
                        rowdata.Country;
                    data = data + "&EmployeeID=" + rowdata.EmployeeID;
                    $.ajax({
                        dataType: 'json',
                        url: '/Customer/UpdateEmployees',
                        data: data,

                        success: function(data, status, xhr) {
                            // update command is executed.
                            commit(true);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            // update failed.
                            commit(false);
                        }
                    });
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            var cellclass = function(row, datafield, value, rowdata) {

                // fruits.push("Lemon");

                for (var i = 0; i < editedRows.length; i++) {
                    if (editedRows[i].index == row) {
                        return "editedRow";
                    }

                }

            }

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 1000,
                height: 350,
                selectionmode: 'singlecell',
                source: dataAdapter,
                theme: theme,
                editable: true,

                columns: [
                    {
                        text: 'EmployeeID',
                        editable: false,
                        datafield: 'EmployeeID',
                        width: 100
                    },
                    {
                        text: 'First Name',
                        datafield: 'FirstName',
                        width: 100,
                        editable: false
                    },
                    {
                        text: 'Last Name',
                        columntype: 'dropdownlist',
                        cellclassname: cellclass,
                        datafield: 'LastName',
                        width: 100
                    },
                    { text: 'Title', datafield: 'Title', width: 180, },
                    { text: 'Address', datafield: 'Address', width: 180 },
                    {
                        text: 'City',
                        datafield: 'City',
                        columntype: 'dropdownlist',
                        cellclassname: cellclass,
                        width: 100,
              
                      

                    },
                    { text: 'Country', datafield: 'Country', width: 140 }
                ]
            });
        });
    </script>
}
    <h2>Employee</h2>
    <div id="jqxgrid"></div>

and this is my server side code for updating :
<pre lang="cs">public bool UpdateEmployees(Employee employee)
     {
         if (ModelState.IsValid)
         {
             //  var nn = new Customer();
             //var chkInOut = (from rec in db2.Customers
             //                where rec.CustomerID == customer.CustomerID
             //                select rec).SingleOrDefault();

             db2.Entry(employee).State = EntityState.Modified;
             db2.SaveChanges();
             // db22.SubmitChanges();
             RedirectToAction("GetEmployees","Customer");
             return true;

         }
         return false;
     }

this is my method for list of table.

public ActionResult GetEmployees()
        {
            var dbResult = db2.Employees.ToList();
            var employees = from e in dbResult
                            select new
                            {
                                e.EmployeeID,
                                e.FirstName,
                                e.LastName,
                                e.Title,
                                e.Address,
                                e.City,
                                e.Country
                            };
            return Json(employees, JsonRequestBehavior.AllowGet);
          //  return View();
            return Json(employees, JsonRequestBehavior.AllowGet);
        }