How to Prevent UI Refresh (Kendo Grid) if no Data Changes in DataSource

[Chris]

I have a Kendo Grid we are using as part of a Document Manager style setup. We would like to have heartbeat functionality that automatically refreshes the grid when it detects changes on the server, checking every 60 seconds or so. Unfortunately, one of the objects in the grid is a Silverlight object which must remain in place to monitor a file on the local user's system (in the Silverlight Isolated Storage). If the UI gets refreshed, we lose the Silverlight object and it has to be regenerated.

I would like to stop any UI refresh that would result in the same document listing as what is currently there. Essentially, I need to use a hasChanges type functionality, but I don't know where to put it.

I've reviewed dataSource.hasChanges but the example just shows a fetch and then add, I don't know how this relates to the .read function automatically refreshing the UI.

Some example code to show where I'm coming from in this:

fileInformationDataSource = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                kendo.ui.progress($("#fileInformationGrid"), true);
                var id = options.data.parentId;
                showHidden = options.data.showHidden;
                if (!id) { id = selectedTreeFolderId; }
                if (!showHidden) { showHidden = false; }
                // the below is a Spring implementation, it's basically just a fancy javascript to C# function caller with specific parameters
                DocumentWebService.GetFolderTreeInformation(documentTreeType, id,
                    utcOffsetInMins, isDstSupported, userId, showHidden,
                    function (result) {
                        options.success(result);
                        initializeMyDocuments();
                        kendo.ui.progress($("#fileInformationGrid"), false);
                    },
                    function (e) { options.error(e); }
                );
            }
        },
        batch: true,
        pageSize: 8,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: true },
                    Name: {}
                }
            }
        }
    });

fileInformationGrid = $("#fileInformationGrid").kendoGrid({
    dataSource: fileInformationDataSource, sortable: false, pageable: true, autoBind: false,
    columns: [ /*my columns implementation */ ], selectable: "row",
    change: function () { /* starts a separate ajax call to pull file details for loading into another piece of UI */ }
});

// Read function implemented inside the heartbeat
// There is a separate Kendo Tree View which shows explorer style folder navigation, the selectedId is coming from that UI
fileInformationDataSource.read({ parentId: selectedId });

[Alexander Valchev]

Hi Chris,

You may prevent the UI refresh of Grid's table at the dataBinding event.

• http://docs.telerik.com/kendo-ui/api/web/grid#events-dataBinding

I hope this approach will fit in your scenario.

Regards,
Alexander Valchev
Telerik

 

 

[Chris]

This isn't working, I tried adding e.preventDefault when it discovers the same set of Ids in the data:

 dataBinding: function (e) {
    console.log("---------------------------------------");
    ////console.log("match check");
    ////console.log(prevIds);
    ////console.log(currIds);
    if (arraysEqual(prevIds, currIds)) {
        console.log("matched! don't do databind");
        console.log("---------------------------------------");
        e.preventDefault();
        //refreshNodeActive = false;
        //try { clearInterval(RefreshNodeTimer); } catch (exce) { }
        //RefreshNodeTimer = setInterval(RefreshNode, 5 * 1000, "dataBinding: function (e) arraysEqual(prevIds, currIds) at interval");
        //RefreshNode("dataBinding: function (e) arraysEqual(prevIds, currIds) at instant");
        return;
    }
    console.log("not a match, do databind");
    console.log("---------------------------------------");
    //refreshNodeActive = false;
    //try { clearInterval(RefreshNodeTimer); } catch (exc) { }
    //RefreshNodeTimer = setInterval(RefreshNode, 5 * 1000, "dataBinding: function (e) !arraysEqual(prevIds, currIds) at 5 second interval");
    RefreshNode("dataBinding: function (e) !arraysEqual(prevIds, currIds) at instant");
},

However, the UI refresh still occurs. The only thing that stops the UI refresh is if I don't call options.success(result) in the transport read function of the datasource, but that's causing other issues.

This is my update to the DocumentWebService.GetFolderTreeInformation call

DocumentWebService.GetFolderTreeInformation(documentTreeType, id,
    utcOffsetInMins, isDstSupported, userId, showHidden,
    function (result) {
        console.log("============================================");
        console.log(result);
        console.log('Old Prev Ids');
        console.log(prevIds);
        console.log('Old Curr Ids');
        console.log(currIds);
        prevIds = currIds;
        console.log('New Prev Ids');
        console.log(prevIds);
        currIds = [];
        console.log('New Curr Ids (empty)');
        console.log(currIds);
        $.each(result, function (index, value) {
            currIds.push(value.Id);
        });
        console.log('New Curr Ids (populated)');
        console.log(currIds);
        if (arraysEqual(prevIds, currIds)) {
            console.log("new ids same as old, don't do options.success");
            //options.success(result);
            //initializeMyDocuments();
            kendo.ui.progress($("#fileInformationGrid"), false);
        } else {
            console.log("new ids different from old, do options.success");
            options.success(result);
            initializeMyDocuments();
            kendo.ui.progress($("#fileInformationGrid"), false);
        }
        console.log("============================================");
    },
    function (e) { options.error(e); }
);

I can see and recognize with code that the items are the same, but I need the following actions to occur:

1. User clicks the tree item (representing a folder)
-> immediately refresh the document grid with 'files in newly selected folder'
2. User double-clicks a 'folder' item in the document grid
-> immediately select the corresponding folder in the tree, then refresh the document grid with 'files in newly selected folder'
3. On Heartbeat (setInterval(RefreshNode, 5*1000)) refresh the data for the current folder, determine if it has changed and update UI if it has, don't update if the data is the same

I can PM you solution I'm working with for testing if need be.

[Alexander Valchev]

Hi Chris,

I prepared a small example which demonstrates how to prevent the data binding at the dataBinding event. Could you please check it and let me know what I am missing?

• http://dojo.telerik.com/@valchev/inELO

Looking forward to your reply.

Regards,
Alexander Valchev
Telerik

 

 

[Chris]

I've modified your example to function more like what I have. Before clicking Run make sure to open your console.

From what I'm seeing, the preventDefault() doesn't stop the UI from refreshing, only avoinging options.success. I am 'seeing' this via selecting the row and my selection gets cleared after each tick, whether the data is the same and I prevented default or not.

[Chris]

sorry, I didn't include the script updated link:
http://dojo.telerik.com/uTago/4

[Alexander Valchev]

Hi Chris,

I believe that the issue is connected with the if conditions put in the dataBinding event. I removed them and included only a simple flag with true/false value. On my side the dataBinding event do not fire if the flag is set to true.

• http://dojo.telerik.com/@valchev/akoJu

Am I missing something?

Regards,
Alexander Valchev
Telerik