Hide group when unchecking resource

[salvador]

Hello everybody,

    First of all, excuse my low English level.

    In the scheduler I have added resources with check boxes like the basic usage demo. Also a group for these resources (each attendee is a group).

dataSource: {
    .
    .
    .
    filter: {
        logic: "or",
         filters: [
             { field: "atendees", operator: "eq", value: 1 },
             { field: "atendees", operator: "eq", value: 2 },
             { field: "atendees", operator: "eq", value: 3 }
         ]
     }
},
group: {
     resources: ["Atendees"],
     orientation: "vertical"
},
resources: [
      {
          field: "atendees",
          name: "Atendees",
          dataSource: [
              { text: "Alex", value: 1, color: "#f8a398" },
               { text: "Bob", value: 2, color: "#51a0ed" },
               { text: "Charlie", value: 3, color: "#56ca85" }
           ],
           title: "Atendees"
     }
]

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

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

      var scheduler = $("#scheduler").data("kendoScheduler");
      scheduler.dataSource.filter(filter);
});


    I would like to hide the group when you uncheck the resource, not only to hide the events of the unchecked resource and to show a blank group.

    I could attach the complete code if it is necessary.

Thank you very much

[Rosen]

Hi salvador,

You can achieve this by simply filtering the resource data source and refreshing the current view. For example:

$("#people :checkbox").change(function(e) {
  var checked = getCheckedValues();

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

  var scheduler = $("#scheduler").data("kendoScheduler");
  //filter the resource data source
  scheduler.resources[0].dataSource.filter(filter);

  scheduler.view(scheduler.view().name); //refresh the currunt view
});

Here you can find a test page which demonstrates this approach in action.
Regards,
Rosen
Telerik

[salvador]

Hi Rosen,

    Thank you very much!

    I have used your solution and works fine :)

    I have another question. I would like to set dinamically the number of attendees. How could I do it?

    I can see that attendees are defined in dataSource.filter.filters and resources.dataSource.

    I have little knowledge of javascript.

Regards

[Rosen]

Hello salvador,

The resource items are configured via the resource dataSource option, the filter option of the Scheduler's DataSource is not related. In order to change the resource items you may use its DataSource API similar to the way shown in my previous reply. For example:

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.resources[0].dataSource.data([
    { text: "Alex", value: 1, color: "#f8a398" },
    { text: "Bob", value: 2, color: "#51a0ed" }]);

  scheduler.view(scheduler.view().name); //refresh the currunt view

On a side note as your question diverge from the initial thread topic, please consider opening a new one, if additional questions arise. Regards,
Rosen
Telerik

[Sreekar]

Hi Rosen,


I have a scheduler with resources binded from server and I am taking a drop down list of resources outside the scheduler as..
@(Html.Kendo().DropDownList()
          .Name("providerID")
          .HtmlAttributes(new { style = "width: 250px" })
           .DataTextField("Name")
          .DataValueField("ProviderID")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetUsersList", "Home");
              }); 
          })
    )
So, when i change the drop down the scheduler changes according to the resource(Provider).
What i am looking for is that when i change the resource from the drop down Can I change the "workStartTime" and "workEndTime" of the scheduler's views from the script of On change
as..

$("#providerID").change(function (e) {

            var providerID = parseInt($(this).val());
            //                        var filter = {
            //                                        filters: $.map(selected, function (value) { return { operator: "eq", field: "ProviderID", value: value }; })
            //                        };

            var scheduler = $("#scheduler").data("kendoScheduler");
            scheduler.dataSource.filter({ field: "providerID", operation: "eq", value: providerID });
           
        });
    })

Thanks,
Sreekar

[Rosen]

Hi Sreekar,

Although this is not supported, you may try changing the scheduler's workDayStart/workDayEnd options before refreshing the view. 

scheduler.options.workDayStart = new Date("2013/6/6 10:30 AM");
scheduler.options.workDayEnd = new Date("2013/6/6 10:30 PM");

scheduler.view(scheduler.view().name); //refresh the current view

As a side note, I would ask you in future to open new thread instead of reopening already existing ones.

Regards,
Rosen
Telerik

[Sreekar]

Hi Rosen,

I will post a new thread from the next time.

But the code you gave is not working.

when will it be supported?


thanks,
Sreekar

[Rosen]

Hi Sreekar,

Here is the suggestion applied on the example from my initial post.

Regards,
Rosen
Telerik

[Christopher]

HI Rosen,

In my project we want to group the calender on click of specific user(the same behavior as filter but for group user calendar). Could you please suggest me any solution for this.

[Rosen]

Hi Christopher,

I'm not sure I understood your question. Do you want to group when a button is clicked? This can be achieved by updating the group option resources:

var scheduler = $("#scheduler").data("kendoScheduler");
var resources = scheduler.options.group.resources;
if (resources.length) {
  resources = [];
} else {
  resources = ["Rooms"];
}
scheduler.options.group.resources = resources; // update the grouping
scheduler.view(scheduler.view().name); // refresh the current view

As demonstrated by this test page. 

Regards,
Rosen
Telerik

 

 

[Alan]

Hi,

After successful filtering the attendees are also removed from the create/edit form. Can we avoid this behaviour?

[Rosen]

Hello Alan,

I do not understood you question nor the scenario. Please open a separate support request where to provide a more in-depth description about  your scenario and the issue you are facing. A small runnable test page demonstrating the issue will also be appreciated. 

Regards,
Rosen
Telerik by Progress