Reload Grid DataSource from ViewModel

[Anna]

Hello! I'm having some trouble reloading/refreshing my grid's dataSource from the viewModel and it's giving me kittens.

Here's how it works: The CompanyContactsGrid shows a list of all contacts that are associated with the specific company they are viewing. The user can add contacts to the company by clicking an Add Contact button, which opens a modal. Inside this modal is a grid of all Contacts in the system that are not yet associated with a Company. The user can select checkboxes next to Contacts to select that contact to add to the Company. Once they click the save button in the modal header, all selected Contacts will be updated with the Company's ID.

What I'm missing: Once the Contacts are updated, the modal should close (and right now it does), and the CompanyContactsGrid should refresh/reload (which it does not.) I have tried many things to get the DataSource and the Grid to refresh/reload, but to no avail. 

What I've tried: viewModelContacts.contactsDataSource.read() , viewModelContacts.contactsDataSource.sync() , viewModelContacts.contactsDataSource.fetch() , $('#CompanyContactsGrid').data("kendoGrid").dataSource.read() ,  $('#CompanyContactsGrid').data("kendoGrid").refresh() etc. 

Any help/advice/thoughts would be greatly appreciated!  

 

01.     var viewModelContacts = kendo.observable({
02.        contactsDataSource: new kendo.data.DataSource({
03.            transport: {
04.                read: {
05.                    url: "/Contact/GetContactsByCompany",
06.                    dataType: "json",
07.                    data: {
08.                        id: $("#Company_CompanyId").val()
09.                    }
10.                },
11.            },
12.            schema: {
13.                model: {
14.                    id: "Id",
15.                    fields: {
16.                        ContactId: { editable: false, nullable: true },
17.                        Name: {},
18.                        ContactType: { type: "number" },
19.                        ContactTypeDisplay: {},
20.                        WorkPhone: {},
21.                        CellPhone: {},
22.                        Email: {}
23.                    }
24.                },
25.                errors: "errorMsg"
26.            },
27.            pageSize: 100,
28.            error: function (e) {
29.                toastr.options = {
30.                    "positionClass": "toast-bottom-full-width"
31.                };
32.                toastr.error('Unable to save new contact' + e.errors, 'Uh Oh!');
33.            }
34.        }),
35.        addContactToCompany: function() {
36.            var companyContacts = [];
37.            $("input[name='addToCompany']:checked").each(function () {
38.                companyContacts.push(parseInt($(this).val()));
39.            })
40.
41.            $.ajax({
42.                type: "POST",
43.                url: "/Contact/UpdateCompany",
44.                data: { companyContacts: companyContacts, companyId: $('#Company_CompanyId').val() },
45.                dataType: "json",
46.                success: function () {
47.                    $('#CompanyContactAddModal').modal('hide');
48.                    viewModelContacts.contactsDataSource.read();
49.                }
50.            });
51.        }
52.    });
53.
54.    kendo.bind($('#CompanyContactsWrapper'), viewModelContacts);
55.
56.$("#CompanyContactsGrid").kendoGrid({
57.        dataSource: viewModelContacts.get("contactsDataSource"),
58.    });
59.
60.    $('#btnAddExistingContacts').on("click", function () {
61.        viewModelContacts.addContactToCompany();
62.    });

[Daniel]

Hello Anna,

Using the dataSource.read method is the correct approach. Perhaps the result is being cached. Could you check if disabling the caching:

transport: {
    read: {
        url: "/Contact/GetContactsByCompany",
        cache: false,
        dataType: "json",
        data: {
            id: $("#Company_CompanyId").val()
        }
    },
},

resolves the problem?

Regards,
Daniel
Telerik

 

 

[Anna]

Hey Daniel,

Thank you so much for the response. Unfortunately, adding cache: false did not fix my issue. In fact, I copied all of the code associated with this piece of the project into a different piece with similar functions and the dataSource.read() method works there. Just not here. I just went through the two sections of code with a fine-toothed code and they are identical. I have no clue why this isn't working.

Any other thoughts/considerations you have would be greatly appreciated!

Anna

[Anna]

Okay, so I fixed it. Rookie mistake. I had some code that was broken elsewhere on the page that had nothing to do with this piece. Whoops! Thank you for your reply.