Add filter to resource datasource

[Alexander]

Hi. When looking at the basic example for the Scheduler (Scheduler basic usage), there is an example of how to apply a filter for the datasource. In my Scheduler, I'm binding the resources to a datasource, but when trying to apply the filter in javascript (like in the example for the main datasource filter), it is not working.

scheduler.resources.datasource.filter(filter);

Do anyone have an example for how to do this? Is it possible at all?

[Rosen]

Hello Alexander,

Changing the resources will not automatically update the UI. Therefore, you will need to refresh it manually. This can be achieved by selecting the current view via the Scheduler view method. Here you can find a test page which illustrates this.

Regards,
Rosen
Telerik

[Alexander]

Thanks for the answer. That gives good sense.

I am still having an error in my code though. I'm getting "" when trying to access the datasource filter of the resources.

Here is my complete code for the Scheduler:

<script type="text/javascript">
    kendo.culture("da-DK");
</script>
<div id="lokation">
    <label><input checked type="checkbox" value="1" />Parken Stadium</label>
    <label><input checked type="checkbox" value="2" />Sportspladsen</label>
</div>

@(Html.Kendo().Scheduler<NFFO_MVC4.Models.BookingViewModel>()
    .Name("Scheduler")
    .Date(DateTime.Today)
    .StartTime(DateTime.Today.AddHours(7))
    .EndTime(DateTime.Today.AddHours(20))
    .Height(600)
    .Messages(message =>
        {
            message.AllDay("Hele dagen");
            message.Today("I dag");
        })
    .Timezone("Europe/Copenhagen")
    .Views(views =>
    {
        views.DayView(day => day.Title("Dag"));
        views.WeekView(week => week.DateHeaderTemplate("<span title='#=kendo.toString(date, 'dddd dd.MMM')#'>#=kendo.toString(date, 'ddd')#</span>").Title("Uge"));
        views.MonthView(month => month.Title("Måned").Selected(true));
        views.AgendaView();
    })
        .Group(group => group.Resources("Lokationer"))
        .Resources(resource => resource.Add(m => m.LokationId)
                                    .Title("Lokation")
                                    .Name("Lokationer")
                                    .DataTextField("Navn")
                                    .DataValueField("Id")
                                    .DataColorField("BaggrundsFarve")
                                    .DataSource(ds => ds.Read("GetLocations", "Scheduler")))
        .DataSource(d => d
            .Model(m => m.Id(f => f.BookingId))
            .Read("GetBookings", "Scheduler")
    )
)

<script type="text/javascript">
    $(function () {
        $("#lokation :checkbox").change(function (e) {
            var checked = $.map($("#lokation :checked"), function (checkbox) {
                return parseInt($(checkbox).val());
            });

            var filter = {
                logic: "or",
                filters: $.map(checked, function (value) {
                    return {
                        operator: "eq", field: "Id", value: value
                    };
                })
            };

            var scheduler = $("#Scheduler").data("kendoScheduler");
            scheduler.resources[0].datasource.filter(filter);
            scheduler.view(scheduler.view().name);
        });
    })
</script>

[Rosen]

Hello Alexander,

Looking at the provided code snippet it seems that the error is caused by incorrect casing. The dataSource field is camel case instead of lower case shown in the pasted code.

scheduler.resources[0].datasource.filter(filter);

//should be

scheduler.resources[0].dataSource.filter(filter);

Regards,
Rosen
Telerik

[Alexander]

Thanks a lot! That did it.

[Alexander]

...well, actually it didn't. Because I need to filter the entire resource itself - not just the appointments. The solution I am looking for, is to dynamically be able to select how many schedulers is shown beside each other. Is that possible?

[Rosen]

Hello Alexander,

I'm afraid that it is not clear what is the exact functionality you are trying to achieve nor the issue you are facing. Could you modify the test page I have provided in my previous message to showcase this issue.

Regards,
Rosen
Telerik

[Alexander]

I have a list of checkbox'es, where I want to choose what resources to group with in the scheduler. So I'm trying to change the resource datasource, when a user is selecting/deselecting checkboxes.

Here is the new scriptblock I have rewritten:

<script type="text/javascript">
    $(document).ready(function () {
        $("#lokation :checkbox").change(function() {
            var selected = new Array();
            $('#lokation input:checked').each(function () {
                selected.push($(this).attr('value'));
            });
            $.ajax({
                url: '/Scheduler/GetLocations',
                type: 'POST',
                cache: false,
                data: { locations: selected.join(",") },
                success: function (source) {
                    var scheduler = $("#Scheduler").data("kendoScheduler");
                    scheduler.resources[0].dataSource = source;
                    scheduler.view(scheduler.view().name);
                }            });        });    });
</script>

I have debugged this code and I can see that the source object contains the list of resources when it returs, so my only issue is setting the new datasource. I have tried different approaches on setting the datasource, but neither have worked.

[Rosen]

Hello Alexander,

As you may be aware the resources dataSource field contains a reference to a DataSource instance, therefore replacing it with an array will not work as expected.

If I understood you correctly you want to repopulate the resource DataSource. The easiest way to achieve this is by setting the DataSource to be populated remotely and to rebind it when user change the checkbox selection.

$("#lokation").change(function() {
  var dataSource = scheduler.resources[0].dataSource;
  dataSource.one("change", function() {
      scheduler.view(scheduler.view().name);
  });
  dataSource.read();
});

Here you can find a modified version of the page which demonstrates a mock of this scenario.

Note that the checkbox values are passes as additional values of the DataSource's read request. Here you can find information on how to set this when using KendoUI for ASP.NET MVC.Regards,
Rosen
Telerik

[Alexander]

OK. So since the Resource DataSource is only a reference, I need to bind the filter directly to the Read action.

Then I have another question. Because I want to keep the @(Html.Kendo()... syntax of the scheduler, how would I write 'data' part of the following code (can't seem to find any explanation of the correct syntax):

read: {
    url: "/Scheduler/GetLocations",
    dataType: "json",
    data: {
        locations: function () {
            return $.map($("#lokation :checked"), function (checkbox) {
                return parseInt($(checkbox).val());
            });
        }
    }
}

[Rosen]

Hello Alexander,

As mentioned in the article linked in my previous post, a function which to provide the additional data can be set via the DataSource Read Data option. For example:

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
    .Name("scheduler")
     //...
    .DataSource(d => d
        .Read(read => read.Action("Read", "Scheduler").Data("additionalData"))
        //..
    )
)

<script type="text/javascript">

    function additionalData(e) {
        var locations = $.map($("#lokation :checked"), function (checkbox) {
            return parseInt($(checkbox).val());
        });

        return {
            locations: locations.join(",")
        }
    }

</script>

Regards,
Rosen
Telerik

[Alexander]

That is exactly what I tried, but it generated a JavaScript runtime error telling me that the function method is undefined, so I thought I had it wrong. It turns out I had called the function "GetSelectedItems" but had the data reference called "GetSelectedItem" (missing the 's').
So now the ControllerAction gets the right parameters (both first time and when the checkbox'es are changed). But it does not change the "number of schedulers" shown. Well if I change the 'checked' from the checkboxes, so the start-values are different, it shows right. But not after changing the checked value on the page.

I don't know if I have explained my purpose wrong. But I need to dynamically add/remove the number of resources shown (aka number of schedulers shown beside eachother). I don't know if you can see any errors in the parts of the code handling this:

PS! I'm sorry for being such a newbie, but I'm quite new with both jQuery and MVC too.

.Group(group => group.Resources("Lokationer"))
.Resources(resource => resource.Add(m => m.LokationId)
                            .Title("Lokation")
                            .Name("Lokationer")
                            .DataTextField("Navn")
                            .DataValueField("Id")
                            .DataColorField("BaggrundsFarve")
                            .DataSource(ds => ds
                                .Read(read => read
                                    .Url("/Scheduler/GetLocations")
                                    .Data("GetSelectedItems"))))

<script type="text/javascript">
    $("#lokation").change(function () {
        var scheduler = $("#Scheduler").data("kendoScheduler");
        var dataSource = scheduler.resources[0].dataSource;
        dataSource.one("change", function () {
            scheduler.view(scheduler.view().name);
        });
        dataSource.read();
    });

    function GetSelectedItems() {
        var selected = new Array();
        $('#lokation input:checked').each(function () {
            selected.push($(this).attr('value'));
        });
        return { locations: selected.join(",") };
    }
</script>

[Rosen]

Hello Alexander,

Could you please send us a small runnable sample which demonstrates the issue you are facing. This way we will be able to get better understanding about your exact scenario and implementation and provide you with more to-the-point answer.

Regards,
Rosen
Telerik

[Alexander]

Off course. Here is my entire solution (i have removed the package folder for smaller filesize). Basically it's only a standard MVC4 Internet project with KendoUI. The Scheduler is located on the HomeControllers Index.cshtml, but take use of SchedulerController.

[Rosen]

Hi Alexander,

We were able to identify the cause for the issue you are facing. It appear to be caused by issue with the month view name being change due to the different culture used. However, we managed to address it and the fix will be included in the next internal build (available to our commercial license holders) and also available with the Q2 2013 SP1 release of KendoUI (scheduled for the second half of September). Meanwhile, I have updated your telerik points.

Regards,
Rosen
Telerik

[Alexander]

OK. Yes, I could see, that if I changed to week view it rendered fine.

Thank you for your help and looking forward for the fix.