Grid's Header doesn't refresh

[Victoria]

Hi,

I have a Kendo Grid that autorefreshes data every 15 minutes. It also has a dynamic header with the columns as dates (past 2 days worth of data). At midnight I would expect the headers to change by 1 day (from 1/28 to 1/29 and from 1/27 to 1/28), but this is not happening, even though the data refreshes just fine and in the very first column accurately displays today's (1/29) data with the header still being for yesterday (1/28). If I manually refresh the page, everything is working perfectly, but if I'd like it to silently refresh on the background, the headers are not refreshing. Both header's data and grid's data are coming from the same data source which is refreshed every 15 minutes.

HTML:
    <span data-bind="text: getDisconnectsMed" class="neutralTextMedium" >  </span> 
    <table id="gridDisconnectsMed" style="font-size: 8pt">     
     <thead>         
        <th data-field="Description">Description</th> 
        <th data-field="CountDay0" data-bind="text: setDay0Label"></th>
        <th data-field="CountDay1" data-bind="text: setDay1Label"></th>                                 
     </thead>
    </table>

JavaScript:

var disconnectsDS = new kendo.data.DataSource({
    transport: {
        read: {
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            url: getDisconnectsUrl,
            dataType: 'json'
        }
    },
    change: function (data) {
        disconnectsMediumViewModel.set("returnData", data.items);
    },
    error: function (e) {
        disconnectsMediumViewModel.set("error", e.errorThrown);
    }
});

var disconnectsMediumViewModel = kendo.observable({
    returnData: null,
    error: "none",

    getDisconnectsMed: function () {

        var value = checkForError(this.returnData, this.error);
        if (value.length == 0) {
            $("#gridDisconnectsMed").kendoGrid({
                dataSource: disconnectsDS,
                sortable: false,
                scrollable: false
            });
            $("#gridDisconnectsMed").show();
        }
        else
            $("#gridDisconnectsMed").hide();
        return value;
    },
    setDay0Label: function () {
        if (this.returnData != null && this.returnData.length > 0) {
            return kendo.toString(this.returnData[0].CountDay0Label);
        }
    },
    setDay1Label: function () {
        if (this.returnData != null && this.returnData.length > 0) {
            return kendo.toString(this.returnData[0].CountDay1Label);
        }
    }

});

Do you know what the issue might be?

Thanks,
Victoria

[Dimo]

Hi Victoria,

The Grid header content does not update automatically. You can use the widget's dataBound event to check whether the date needs changing and update it manually via standard DOM operations.

All the best,
Dimo
the Telerik team

[Kubica]

Does anyone know if there has been an update to this that makes this an easier problem to solve?

[Dimo]

Hello Chris,

The header area is recreated only when using setOptions() to recreate the whole Grid. Otherwise it is maintained static, for performance reasons.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

http://demos.telerik.com/kendo-ui/grid/persist-state

Regards,
Dimo
Telerik

 

 

[Kubica]

Thanks, Dimo.  

Having a complete rerender is exactly what I'm looking for.  This grid's columns and groupings are contextual to prompted filter criteria on the page that a user will be changing and resubmitting. 

[Kubica]

Is there a way to force a full refresh of the grid and detailInit with detail rows?  The grid is rerendering fine now, but I've spent half a day trying to get the detail row to completely rerender when a form submission is made that changes the columns.  

 

If I can get the entire thing to refresh that would be optimal.

[Dimo]

Hi Chris,

I am not sure I understand your scenario. Using setOptions() on the child Grid should do the job, no?

Regards,
Dimo
Telerik

 

 

[Kubica]

It is working now with setOptions() on both the parent and child grid.

 

Thank you.