How to prevent grid filter reset on push update

5 posts, 0 answers
  1. Ian
    Ian avatar
    13 posts
    Member since:
    Nov 2013

    Posted 25 Nov Link to this post


       

    I am using kendo grid with signalr push updates.

    I also have code for server filtering and paging working.

    It all works apart from when a filter menu is open and a push update occurs. I have code intended to prevent the update and data binding - however it isn't preventing the filter menu getting reset and any filter text being cleared.

    Thanks in advance..

    var hubUrl = "/signalr";
    var connectionGrid = $.hubConnection(hubUrl, { useDefaultPath: false });
    var hubGrid = connectionGrid.createHubProxy("eventAlertsHub");
    var hubGridStart = connectionGrid.start();
     
    ////////////////////////////////////////////////
     
     
    // Kendo grid
    $("#grid").kendoGrid({
        dataSource: {
            push: onPush,
            type: "signalr",
            transport: {
                signalr: {
                    promise: hubGridStart,
                    hub: hubGrid,
                    server: {
                        read: "read"
                    },
                    client: {
                        read: "read",
                        update: "update",
                        destroy: "destroy",
                        create: "create"
                    }
                }
     
            },
     
            schema: {
                data: "Data",
                total: "Total",
                model: {
                    id: "id",
                    fields: {
                        id: {
                            editable: false,
                            nullable: true
                        },
                        LogTime: { type: "date" },
                        OperatingMode: { type: "string" },
                        StatusDescription: { type: "string" },
                        LogSeverity: { type: "number" },
                        MessageSource: { type: "string" },
                        MessageSourceDetails: { type: "string" }
                    }
                }
            },
            sort: { field: "LogTime", dir: "desc" },
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: false
        },
        filterable: true,
        sortable: true,
        pageable: true,
        scrollable: true,
        height: 180,
        columns: [{
            field: "LogTime",
            width: "150px",
            title: "Timestamp",
            format: "{0:dd/MM/yyyy HH:mm:ss}",
            filterable: {
                ui: "datetimepicker"
            }
        }, {
            field: "MessageSource",
            width: "10%",
            title: "Source",
            values: [
                { text: "DATA_BROKER", value: "DATA_BROKER" },
                { text: "RULES_ENGINE", value: "RULES_ENGINE" },
                { text: "UI_SUBSYSTEM", value: "UI_SUBSYSTEM" },
                { text: "DATA_PUBLISHER", value: "DATA_PUBLISHER" }
            ],
            }, {
                field: "MessageSourceDetails",
                width: "15%",
                title: "Source Details",
                filterable: false
        }
        ,{
            field: "OperatingMode",
            title: "Status",
            width: "10%",
            values: [
                { text: "STARTUP", value: "STARTUP" },
                { text: "INITIALISATION", value: "INITIALISATION" },
                { text: "NORMAL", value: "NORMAL" },
                { text: "STOPPING", value: "STOPPING" }
            ],
        }, {
            field: "StatusDescription",
            width: "55%",
            title: "Message",
            filterable: false
        }, {
            field: "LogSeverity",
            width: "10%",
            values: [
                { text: "DEBUG", value: 1 },
                { text: "INFO", value: 2 },
                { text: "WARN", value: 3 },
                { text: "ERROR", value: 4 },
                { text: "FATAL", value: 5 }
            ],
            title: "Severity"
        }
        ]
    });
     
    function onPush(e) {
        console.log("Push update received type = " + e.type);
        //var notification = $("#notification").data("kendoNotification");
        //notification.success(e.type);
     
        //var dataSource = $grid.dataSource;
     
        // Check if a filter menu is open. If so, prevent binding, for binding will interfere with everyting typed in the filter
        //var $filtermenu = $(".k-filter-menu");
        if ($('.k-animation-container').is(":visible")) {
            console.log("Filter is open push update binding cancelled ");
            e.preventDefault();
        }
     
        //if (e.type === "create") {
        //    // Sort grid programmatically
     
        //    dataSource.sort(dataSource._sort);
        //}
    };
     
    $("#grid").data('kendoGrid').bind("dataBinding", function (e) {
     
        console.log("Binding");
        // Check if a filter menu is open. If so, prevent binding, for binding will interfere with everyting typed in the filter
        if ($('.k-animation-container').is(":visible")) {
            e.preventDefault();
            console.log("Prevent binding");
        }
    });
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2138 posts

    Posted 28 Nov Link to this post

    Hello Ian,

    This is a limitation with the SignalR binding, but you could try the following workaround, where the filter value is retrieved and stored in global variable within the "change" event of the and then set it back within the "push" event:
     
    var currentValue = [];
    function change(e) {
        currentValue[0] = $(".k-filter-menu input").first().val();
    }
      
    function push(e) {
        $(".k-filter-menu input").first().val(currentValue[0]);
        $(".k-filter-menu input").first().trigger("change");
    }
     
     

    The above is an example for the first input element, but it could be modified to handle all filter input elements.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Ian
    Ian avatar
    13 posts
    Member since:
    Nov 2013

    Posted 28 Nov in reply to Konstantin Dikov Link to this post

    Hi Konstantin,

    That workaround had occurred to me already but it seems rather cumbersome.

    Is there alternative way of intercepting the signalr push-create callback?

    In this post https://www.telerik.com/forums/prevent-grid-signalr-(server-side-paging)-to-append-another-client-modified-rows#OcgGerlyBkmiHsV2gg1wCA one of your colleagues describes a custom signalr transport binding. Couldn't this method be adapted? I tend to think this should be possible but would like some advice before attempting.

    Regards

    Ian

     

     

     

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2138 posts

    Posted 30 Nov Link to this post

    Hi Ian,

    With the suggested in the forum thread approach you should be able to prevent the push update if the filter is opened (or any other custom condition).

    In my personal opinion, using SignalR for Grid with enabled editing, filtering, etc. could be overwhelming, because there are too many scenarios that could result in bad user experience, where the entered input is cleared (even while editing).


    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Ian
    Ian avatar
    13 posts
    Member since:
    Nov 2013

    Posted 30 Nov in reply to Konstantin Dikov Link to this post

    Thanks Konstantin,

    I take your point - maybe a separate grid for filtering the history might be the way to go.

    Ian

Back to Top