This is a migrated thread and some comments may be shown as answers.

How to prevent grid filter reset on push update

4 Answers 120 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 25 Nov 2017, 05:10 PM

   

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

4 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 28 Nov 2017, 05:39 PM
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.
0
Ian
Top achievements
Rank 1
answered on 28 Nov 2017, 06:18 PM

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

 

 

 

0
Konstantin Dikov
Telerik team
answered on 30 Nov 2017, 11:48 AM
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.
0
Ian
Top achievements
Rank 1
answered on 30 Nov 2017, 01:14 PM

Thanks Konstantin,

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

Ian

Tags
Grid
Asked by
Ian
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Ian
Top achievements
Rank 1
Share this question
or