Hide group when unchecking resource

Thread is closed for posting
12 posts, 0 answers
  1. salvador
    salvador avatar
    17 posts
    Member since:
    Oct 2013

    Posted 18 Oct 2013 Link to this post

    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
  2. Rosen
    Admin
    Rosen avatar
    3247 posts

    Posted 21 Oct 2013 Link to this post

    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!
  3. salvador
    salvador avatar
    17 posts
    Member since:
    Oct 2013

    Posted 21 Oct 2013 Link to this post

    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
  4. Rosen
    Admin
    Rosen avatar
    3247 posts

    Posted 22 Oct 2013 Link to this post

    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!
  5. Sreekar
    Sreekar avatar
    4 posts
    Member since:
    Nov 2013

    Posted 05 Dec 2013 Link to this post

    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
  6. Rosen
    Admin
    Rosen avatar
    3247 posts

    Posted 05 Dec 2013 Link to this post

    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!
  7. Sreekar
    Sreekar avatar
    4 posts
    Member since:
    Nov 2013

    Posted 05 Dec 2013 Link to this post

    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
  8. Rosen
    Admin
    Rosen avatar
    3247 posts

    Posted 05 Dec 2013 Link to this post

    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!
  9. Christopher
    Christopher avatar
    1 posts
    Member since:
    Feb 2012

    Posted 30 Jul 2014 in reply to Rosen Link to this post

    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.
  10. Rosen
    Admin
    Rosen avatar
    3247 posts

    Posted 31 Jul 2014 Link to this post

    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!
     
  11. Alan
    Alan avatar
    1 posts
    Member since:
    Dec 2016

    Posted 27 Dec 2016 in reply to Rosen Link to this post

    Hi,

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

  12. Rosen
    Admin
    Rosen avatar
    3247 posts

    Posted 28 Dec 2016 Link to this post

    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.
Back to Top