Filter Scheduler Events on Client Side after Push of a change with SignalR

[Sotiris]

In the application that I am currently working, I am using Telerik UI ASP.NET Core Scheduler Component and concerning binding I use SignalR. When a user creates an event all clients that are connected to the Hub are successfully notified for the relative creation and the created event is successfully created too.

My concern is that I am looking for a way to prevent the notification and the event creation for clients that meet a condition.

• So far I have tried to apply preventDefault in the context of onPush function but it didn't work.
• I have also tried to filter dataSource but it fails too.
• Moreover, I tried to remove a specific eventElement during databound. This worked but when I tried to create a new event in the same timeslot like the one that was including the previously removed eventElement, the new eventElement was placed under the section that would include the removed eventElement.

 

Is there any way to filter the events that are displayed on a client based on client related conditions i.e what values the user of the client has selected on some fields of a form on the same page with Scheduler?

[Tsvetomir]

Hi, Sotiris,

If you would like to prevent the addition of a row to the SignalR backend service, you should prevent the binding of the grid inside the Change event of the data source. The Push event proves to be non-preventable:

.Events(events => events.Change("onChange"))


function onChange(event) {
        var scheduler = $("#scheduler").data("kendoScheduler");

        if (event.action == "add" && event.index !== 0) {
            scheduler.one("dataBinding", function (e) {
                e.preventDefault();
            });
        }
    }

Give this suggestion a try and let me know how it works out for you.

 

Kind regards,
Tsvetomir
Progress Telerik

[Sotiris]

Dear Tsvetomir,

Thank you very much for your constructive feedback.
I have already tried it and noticed the following behavior.

Having opened two separate tabs that are connected to the same hub, when I create an event in tab 1,
the relative event is not created in tab 2 (as required). Nevertheless, when I try to create another event on tab 2, then on the same tab (tab 2), I see created two events:
- the one that just created in tab 2 (required) and
- the one that was previously created on tab 1 and initially was prevented to be created

Best regards,
Sotiris

[Tsvetomir]

I tested a couple of approaches and the best solution that came to my mind was to obtain the ids of the rows during the add action and store them in an array. Then in the Push event, iterate over that array and hide any rows that we don't want to be seen on the receiving client's grid.

var ids = [];

    function onPush(event) {
        var grid = $("#grid").data("kendoGrid");

        for (var i = 0; i < ids.length; i++) {
            var uid = this.get(ids[i]).uid;
            var row = grid.tbody.find("tr[data-uid='" + uid + "']");
            $(row).hide();
        }
    }

    function onChange(event) {
        if (event.action == "add" && event.index !== 0) {
            if (data.Result == false) {
                var id = event.items[0].id;
                ids.push(id);
            }
        }
    }

Could you evaluate this approach and let me know how it works out for you?