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

7 posts, 0 answers
  1. Chris
    Chris avatar
    16 posts
    Member since:
    Mar 2007

    Posted 29 Jan 2015 Link to this post

    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 });





  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 02 Feb 2015 Link to this post

    Hi Chris,

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

    I hope this approach will fit in your scenario.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Chris
    Chris avatar
    16 posts
    Member since:
    Mar 2007

    Posted 02 Feb 2015 in reply to Alexander Valchev Link to this post

    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.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 04 Feb 2015 Link to this post

    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?
    Looking forward to your reply.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Chris
    Chris avatar
    16 posts
    Member since:
    Mar 2007

    Posted 04 Feb 2015 in reply to Alexander Valchev Link to this post

    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.
  7. Chris
    Chris avatar
    16 posts
    Member since:
    Mar 2007

    Posted 04 Feb 2015 in reply to Chris Link to this post

    sorry, I didn't include the script updated link:
    http://dojo.telerik.com/uTago/4
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 06 Feb 2015 Link to this post

    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.
    Am I missing something?

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready