Data in kendogrid only shown after refreshing the grid manually, for some users

[Pino]

I have a strange problem, that only happens to some users.

The data is not shown for some users, although there is data. It's a really complexed application, so I hope I can give enough information.

function getWorkListItems() {

        setFieldValues();
        options = localStorage["grid-options" + viewStatesFilter];
        var gridSettings = {
            selectable: "multiple row",
            sortable: true,
            filterable: true,
            pageable: {
                refresh: true,
                pageSizes: [10, 20, 50, 100],
                buttonCount: 5
            },
            resizable: true,
            autoBind: !options,
            columns: [
                {
                    field: "EncryptedID",
                    hidden: true
                },
                {
                    field: "RequestHandler",
                    title: "Behandelaar",
                },
                {
                    field: "SpecialCharacteristicsIndicator",
                    title: "Bijzonder kenmerk",
                    filterable: { multi: true }
                },
                {
                    field: "CustomerRequestID",
                    title: "Aanvraag ID",
                },
                {
                    field: "ExternalID",
                    title: "SD nummer"
                },
                {
                    field: "Facility",
                    title: "Vestiging"
                },
                {
                    field: "PostalCode",
                    title: "Postcode",
                    width: '80px'
                },
                {
                    field: "BuildingNumber",
                    title: "Huisnummer",
                    width: '80px'
                },
                {
                    field: "Status",
                    title: "Status"
                },
                {
                    field: "DocumentDateTime",
                    title: "Aanvraag datum",
                    format: "{0: dd-MM-yyyy}"
                },
                {
                    field: "PlannedWeekNumber",
                    title: "Wensweek"
                },
                {
                    field: "TypeOfWork",
                    title: "Dienst"
                },
                {
                    field: "SubTypeOfWork",
                    title: "Subdienst."
                },
                {
                    field: "ConcernsMultipleAddressesIndicator",
                    title: "Meerdere adressen",
                    filterable: { multi: true }
                },
                {
                    field: "IsCombiRequestIndicator",
                    title: "Solo/Combi",
                    filterable: { multi: true }
                }
            ],
            change: function () {
                var row = this.select();
                var id = this.dataItem(row[0]).EncryptedID;
                window.location = 'Bpm/Werkvoorraad/WerkvoorraadDetails.aspx?rowtag=' + id + '&source=' + window.location;
            },
            sortable: {
                allowUnsort: false
            }
        };

        var customFields = [{
            field: "DocumentDateTime",
            filterable: {
                ui: function (element) {
                    element.kendoDatePicker({
                        format: '{0: d-M-yyyy}'
                    });
                    element.attr("readonly", true);
                },
                operators: {
                    string: {
                        eq: "Is gelijk aan",
                        gt: "Is na",
                        lt: "Is voor",
                    }
                }
            },
            format: '{0: d-M-yyyy}',
        }, {
            field: "BuildingNumber",
            sortable: {
                compare: function compare(a, b) {
                    return a.BuildingNumber - b.BuildingNumber;
                }
            }
        }];

        $.each(customFields, function (customFieldIndex, customField) {

            $.each(gridSettings.columns, function (columnIndex, column) {
                if (column.field == customField.field) {
                    if (customField.sortable) {
                        column.sortable = customField.sortable;
                    }
                    if (customField.template) {
                        column.template = customField.template;
                    }
                    if (customField.headerTemplate) {
                        column.headerTemplate = customField.headerTemplate;
                    }
                    if (customField.filterable) {
                        column.filterable = customField.filterable;
                    }
                    if (customField.filter) {
                        column.filter = customField.filter;

                    }
                    if (customField.format) {
                        column.format = customField.format;

                    }
                }
            });
        });

        searchGrid = $("#searchGrid").kendoGrid(gridSettings).data("kendoGrid");        
        searchGrid.thead.find("[data-field=IsSelected]>.k-header-column-menu").remove();
        searchGrid.thead.find("[data-field=ID]>.k-header-column-menu").remove();

        loadData();

    }

function loadData() {
        debugger;
        var url = BpmCore.GetRelativeWebUrl() + "_vti_bin/DeviationService.svc/GetGebruikersVestigingen";
        $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: null,
            xhrFields: {
                withCredentials: true
            },
            success: function (result) {
                getGebruikersVestigingenSuccessCallback(result);

            },
            error: function (e) {
                getGebruikersVestigingenErrorCallback(e);
            }
        });


    }

function getGebruikersVestigingenSuccessCallback(result) {
        var request = {
            CustomerRequestID: $("#txtAanvraagID").val(),
            States: $("#selStates").val() == null ? states : $("#selStates").val(),
            RequestHandler: $("#txtBehandelaar").val(),
            Street: $("#txtStraat").val(),
            PostalCode: $("#txtPostcode").val(),
            BuildingNumber: $("#txtHuisnummer").val(),
            City: $("#txtPlaats").val(),
            FacilityIDs: result.data[0].Vestiging
        };

        enexis.helpers.storage.setStorage(viewStatesFilter, request, "json");

        var ds = new kendo.data.DataSource({
            transport: {
                read: function read(options) {
                    enexis.services.customerrequests.find(request, function (result) {
                        if (result.Success) {
                        } else {
                            enexis.helpers.forms.showError(result.ErrorMessages);
                        }

                        options.success(result.Items || []);
                        searchGrid.refresh();
                    }, function (result) {
                        options.error(result);
                    });
                }
            },
            schema: {
                model: {
                    fields: {
                        DocumentDateTime: {
                            type: 'date',
                            parse: function (date) {
                                return kendo.parseDate(date, "dd-MM-yyyy");
                            }
                        }
                    }
                }
            },
            pageSize: 20,
            sort: { field: "DocumentDateTime", dir: "asc" }

        });

        searchGrid.setDataSource(ds);
        searchGrid.dataSource.read();
       
        searchGrid.thead.find("[data-field=IsSelected]>.k-header-column-menu").remove();
        searchGrid.thead.find("[data-field=ID]>.k-header-column-menu").remove();
        if (options) {
            searchGrid.setOptions(JSON.parse(options));
        }
    }

At first Id didn't have the line 

searchGrid.dataSource.read();

I added this, because sometimes the read function of the grid is not fired (for users who get the data this was working)

When I added that line the read function was fired and the data was collected (through the webapi). I can see that because result.Items countains the items.

I also added the line

searchGrid.refresh();

after 

options.success(result.Items || []);

because It is working when I click the refresh button, but that also didn't solve my problem

 

But nevertheless, the data is not shown in the grid, only when I manually click the refresh button of the grid (then the read function fires again).

It is really strange why it works for some users and for other users it isn't working.

FYI this is build in a SharePoint application,

[Nikolay]

Hi Pino,

Thank you for sharing the Grid declaration. 

I looked into it and noticed the autoBind property has a dynamic value :

options = localStorage["grid-options" + viewStatesFilter];
        var gridSettings = {
            autoBind: !options,
            ...

I guess this is why the data is not loading initially for some users. Can you set the atoBind to true and see if this makes difference?

Regards,

Nikolay

[Pino]

Hi Nikolay,

thanks for your response. Sadly setting the autobind to true is not the solution. 

We used that piece of code to save the gridsettings per users (sorting and filtering etc.).

Here you can see the result contains items. but even after a refresh in code there is no data shown in my grid:

After a manual refresh it does show data

 

EDIT: However, your solution got me thinking. So I removed nog every line of code wich has to to do with the global variable options and now it is working. So I now know where the problem is.

Now I have to find a solution to save the sorting and filtering per user, while still getting the data everytime by every user.

Is there maybe some other way to store the gridoptions (like sorting and filtering)?

A little context about this: When users see the grid they see their data, within the grid they can filter. When the click a record they go to the detail screen of the record. And when they go back to the page woth the grid, we want the filtering and sorting to still be there. At default it isn't.

I got the solution from here: https://docs.telerik.com/kendo-ui/knowledge-base/grid-automatically-persist-state

[Georgi Denchev]

Hello, Pino,

Thank you for the additional details.

You could utilize the filter and sort events instead of the onbeforeunload to save the options only when a filter/sort is applied by the user. After that you can use the document.ready event to restore the filters/sorts either with setOptions or by using the dataSource methods:

filter: function(e) {
 let filters = this.dataSource.filter(); // Retrieve all of the filters
 if(filters) {
   // Persist in local storage
 }
}

// Same approach for the sorts

grid.dataSource.filter(savedFiltersFromLocalStorage);
grid.dataSource.sort(savedSortsFromLocalStorage);

Best Regards,

Georgi

[Pino]

Hey Georgi,

I think this is the way to do it, only retrieving the filters doesn't work, because this.dataSource.filter() is undefined, the first time I filter.

And I also don't quite know how to save the filters in my localstorage and retrevieve them from it.

I tried

filter: function (e) {
                debugger;
                var filters = this.dataSource.filter(); // Retrieve all of the filters
                if (filters) {
                    localStorage["filters-" + viewStatesFilter] = kendo.stringify(filters);
                }
            },

searchGrid.dataSource.filter(localStorage["filters-" + viewStatesFilter]);

But that didn't work.

EDIT: I found this: https://www.telerik.com/forums/date-field-filter-is-not-persisted

And this helped me with the fix:

Saving the filter and sort in different localstorages

window.onbeforeunload = function () {
        localStorage["filter-" + viewStatesFilter] = kendo.stringify($("#searchGrid").data("kendoGrid").dataSource.filter());
        localStorage["sort-" + viewStatesFilter] = kendo.stringify($("#searchGrid").data("kendoGrid").dataSource.sort());
        return;
    }

And then setting the filter and sort, after i set the datasource:

searchGrid.setDataSource(ds);

        var savedFilters = localStorage["filter-" + viewStatesFilter];
        if (savedFilters) {
            $("#searchGrid").data("kendoGrid").dataSource.filter(JSON.parse(savedFilters));
        }
        var savedSort = localStorage["sort-" + viewStatesFilter];
        if (savedSort) {
            $("#searchGrid").data("kendoGrid").dataSource.sort(JSON.parse(savedSort));
        }

[Nikolay]

Hi Pino,

Thank you for the follow-up and for sharing the solution with the community.

In your code you need to substitute this:

var filters = this.dataSource.filter(); // Retrieve all of the filters

With this:

var filters = e.filter; // Retrieve all of the filters

in the filter event handler to obtain the initial filter object.

Regards,

Nikolay