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

0 Answers 16 Views
Data Source Grid
Pino
Top achievements
Rank 1
Pino asked on 06 Sep 2022, 10:17 AM

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
Telerik team
commented on 09 Sep 2022, 08:36 AM

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
Top achievements
Rank 1
commented on 09 Sep 2022, 09:36 AM | edited

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
Telerik team
commented on 14 Sep 2022, 07:11 AM

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
Top achievements
Rank 1
commented on 15 Sep 2022, 09:34 AM | edited

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
Telerik team
commented on 20 Sep 2022, 07:09 AM

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

No answers yet. Maybe you can help?

Tags
Data Source Grid
Asked by
Pino
Top achievements
Rank 1
Share this question
or