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

Hide group when unchecking resource

11 Answers 248 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
salvador
Top achievements
Rank 1
salvador asked on 18 Oct 2013, 08:04 AM
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

11 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 21 Oct 2013, 08:07 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
salvador
Top achievements
Rank 1
answered on 21 Oct 2013, 10:01 AM
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
0
Rosen
Telerik team
answered on 22 Oct 2013, 06:10 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sreekar
Top achievements
Rank 1
answered on 05 Dec 2013, 08:27 AM
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
0
Rosen
Telerik team
answered on 05 Dec 2013, 11:19 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sreekar
Top achievements
Rank 1
answered on 05 Dec 2013, 11:47 AM
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
0
Rosen
Telerik team
answered on 05 Dec 2013, 12:07 PM
Hi Sreekar,

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

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Christopher
Top achievements
Rank 1
answered on 30 Jul 2014, 11:15 AM
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.
0
Rosen
Telerik team
answered on 31 Jul 2014, 07:55 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Alan
Top achievements
Rank 1
answered on 27 Dec 2016, 11:06 AM

Hi,

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

0
Rosen
Telerik team
answered on 28 Dec 2016, 07:22 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Scheduler
Asked by
salvador
Top achievements
Rank 1
Answers by
Rosen
Telerik team
salvador
Top achievements
Rank 1
Sreekar
Top achievements
Rank 1
Christopher
Top achievements
Rank 1
Alan
Top achievements
Rank 1
Share this question
or