Kendo UI Grid MVC not responding to sync() and refresh()

[Gordon]

I have a grid that I am using to manage outlook contacts. This data grid is using inline editing to make edits to the contacts. I also have a button on the page that reads the contacts from the database and checks for address errors. The issue is that the update does not propagate to the database until I force a browser refresh. The goal is to make changes then check the contact addresses without having to leave the page or force a browser refresh.

01.
02.<div class="SectionBoxCorners" style="width: 1610px;height:760px;position: absolute;top: 180px;left:35px">
03.    <div class="SectionBoxGradient" style="width: 1610px;height:725px; padding: 10px;padding-right: 20px">
04.        @(Html.Kendo().Grid<OutlookContact>()
05.              .Name("outlookContacts")
06.              .Columns(columns =>
07.                  {
08.                      columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
09.                      columns.Bound(p => p.FirstName).Width(100);
10.                      columns.Bound(p => p.LastName).Width(125);
11.                      columns.Bound(p => p.Suffix).Width(75);
12.                      columns.Bound(p => p.Company).Width(150);
13.                      columns.Bound(p => p.Department).Width(100);
14.                      columns.Bound(p => p.JobTitle).Width(100);
15.                      columns.Bound(p => p.BusinessStreet).Title("Bus. Street").Width(150);
16.                      columns.Bound(p => p.BusinessStreet2).Title("Bus. Street 2").Width(150);
17.                      columns.Bound(p => p.BusinessCity).Width(125);
18.                      columns.Bound(p => p.BusinessState).Title("Bus. State").Width(100);
19.                      columns.Bound(p => p.BusinessPostalCode).Title("Bus. Zip").Width(75);
20.                      columns.Bound(p => p.HomeStreet).Width(150);
21.                      columns.Bound(p => p.HomeStreet2).Width(150);
22.                      columns.Bound(p => p.HomeCity).Width(100);
23.                      columns.Bound(p => p.HomeState).Title("Home State").Width(100);
24.                      columns.Bound(p => p.HomePostalCode).Title("Home Zip").Width(100);
25.                      columns.Bound(p => p.AssistantsPhone).Width(150);
26.                      columns.Bound(p => p.BusinessFax).Title("Bus. Fax").Width(125);
27.                      columns.Bound(p => p.BusinessPhone).Title("Bus. Phone").Width(125);
28.                      columns.Bound(p => p.BusinessPhone2).Title("Bus. Phone 2").Width(125);
29.                      columns.Bound(p => p.HomePhone).Width(125);
30.                      columns.Bound(p => p.HomePhone2).Width(125);
31.                      columns.Bound(p => p.MobilePhone).Width(125);
32.                      columns.Bound(p => p.OtherFax).Width(125);
33.                      columns.Bound(p => p.OtherPhone).Width(125);
34.                      columns.Bound(p => p.PrimaryPhone).Width(125);
35.                      columns.Bound(p => p.Telex).Width(100);
36.                      columns.Bound(p => p.Account).Width(100);
37.                      columns.Bound(p => p.Anniversary).Format("{0:MM/dd/yyyy}").Width(100);
38.                      columns.Bound(p => p.AssistantsName).Width(125);
39.                      columns.Bound(p => p.BillingInformation).Width(200);
40.                      columns.Bound(p => p.Birthday).Format("{0:MM/dd/yyyy}").Width(100);
41.                      columns.Bound(p => p.Categories).Width(200);
42.                      columns.Bound(p => p.EmailAddress).Width(200);
43.                      columns.Bound(p => p.EmailDisplayName).Width(250);
44.                      columns.Bound(p => p.Email2Address).Width(200);
45.                      columns.Bound(p => p.Email2DisplayName).Width(250);
46.                      columns.Bound(p => p.Email3Address).Width(200);
47.                      columns.Bound(p => p.Email3DisplayName).Width(250);
48.                      columns.Bound(p => p.Gender).Width(100);
49.                      columns.Bound(p => p.Initials).Title("Init.").Width(50);
50.                      columns.Bound(p => p.ManagersName).Title("Manager").Width(100);
51.                      columns.Bound(p => p.Mileage);
52.                      columns.Bound(p => p.Notes).Width(250);
53.                      columns.Bound(p => p.OfficeLocation);
54.                      columns.Bound(p => p.OrganizationalIdNumber).Title("Org. ID").Width(75);
55.                      columns.Bound(p => p.Spouse).Width(100);
56.                      columns.Bound(p => p.User1);
57.                      columns.Bound(p => p.WebPage).Width(200);
58.                  })
59.              .ToolBar(toolbar => toolbar.Create())
60.              .Editable(editable => editable.Mode(GridEditMode.InLine))
61.              .Filterable()
62.              .Pageable()
63.              .Sortable()
64.              .Scrollable()
65.              .HtmlAttributes(new { style = "height:675px; td height:50px;" })
66.              .Resizable(resize => resize.Columns(true))
67.              .DataSource(dataSource => dataSource
68.                                            .Ajax()
69.                                            .AutoSync(true)
70.                                            .PageSize(100)
71.                                            .Model(model=> model.Id(p=> p.OutlookContactId))
72.                                            .Create(update=> update.Action("AddOutlookContact", "Options"))
73.                                            .Update(update=> update.Action("UpdateOutlookContact", "Options"))
74.                                            .Destroy(update=> update.Action("DeleteOutlookContact", "Options"))
75.                                            .Read(read => read.Action("GetOutLookContacts", "Options"))
76.              ))
77.        </div>
78.</div>

01.@(Html.Kendo().Window()
02.    .Name("window")
03.    .Title("Contact Address Errors")
04.    .Content("loading  info...")
05.    .LoadContentFrom("CheckContacts", "Options")
06.    .Iframe(false)
07.    .Draggable()
08.    .Resizable()
09.    .Height(350)
10.    .Width(350)
11.)
12.
13.<script>
14.    $(document).ready(function () {
15.        $("#window").data("kendoWindow").close();
16.        $("#CheckContacts")
17.            .bind("click", function () {
18.                var grid = $("#outlookContacts").data("kendoGrid");
19.                //grid.datasource.saveChanges();
20.                grid.dataSource.sync();
21.                grid.dataSource.read();
22.                $("#window").data("kendoWindow").center();
23.                $("#window").data("kendoWindow").open();
24.            });
25.    });
26.</script>

[Vladimir Iliev]

Hi Gordon,

 
From the provided information it's not clear for us what is the exact reason for current behavior - could you please provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
Telerik

[Gordon]

Vladimir,

I was thinking about the problem and I believe that the issue has to do with the fact that the grid is loaded on the server by the model and there is no call back to the controller to reload the model from the entity framework and database.

I am planning to try the JQuery and AJAX to load of the grid instead to see if it fixes the issue.

I will post my results.

Thank you,

Gordon Neuls