search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

DayPilot HTML5 Scheduler - Filter Row (dp.onRowFilter) Conflict

Asked by Sharon
5 years ago.

Hi
I want to be able to use both the "room" filter...

dp.onRowFilter = function(args) {
  if (args.row.name.toUpperCase().indexOf(args.filter.toUpperCase()) === -1) {
    args.visible = false;
  }
};

and the "Hide Empty Rows" function...

dp.onRowFilter = function (args) {
  var hideEmptyRows = args.filter;
  args.visible = !hideEmptyRows || !args.row.events.isEmpty();
};

But as they both use "onRowFilter" I cannot use them together. As soon as I type for the room filter the empty rows disappear. ;( I want to be able to to filter the rows to show set rooms, then to hide the empty ones. Is there a workaround?

Thank You ;)

Comment posted by Dan Letecky [DayPilot]
5 years ago.

You need to combine both rules like this:

dp.onRowFilter = function(args) {
  if (args.row.name.toUpperCase().indexOf(args.filter.toUpperCase()) === -1) {
    args.visible = false;
  }
  else if (args.row.events.isEmpty()){
    args.visible = false;
  }
};

Comment posted by Sharon
5 years ago.

Thank you for the quick reply. This doesnt appear to work. It does the same thing. When I try to filter the rooms it also removes the empty rooms. I need to be able to toggle the "hide empty", so I can see all rooms on floor 2 then toggle hide/show empty via the tick box.

Thank you ;)

Answer posted by Dan Letecky [DayPilot]
5 years ago.

In that case you need to extend the filter object to include both parameters.

Let's have this filter form (HTML):

<div class="space">
    Filter: <input id="filter" /> <a href="#" id="clear">Clear</a>
    <input type="checkbox" id="hideEmpty"> Hide empty
</div>
Filter rule (onRowFilter):
dp.onRowFilter = function(args) {
  var query = args.filter.query;
  var hideEmpty = args.filter.hideEmpty;

  if (args.row.name.toUpperCase().indexOf(query.toUpperCase()) === -1) {
    args.visible = false;
  }
  else if (hideEmpty && args.row.events.isEmpty()){
    args.visible = false;
  }
};

And you need to include both parameters (here it is the search string as "query" and the checkbox state as "hideEmpty") in the rows.filter() argument:

$(document).ready(function() {

    function filter() {
        dp.rows.filter({
          query: $("#filter").val(),
          hideEmpty: $("#hideEmpty").is(":checked")
        });
    }

    $("#filter").keyup(function() {
        filter();
    });

    $("#hideEmpty").change(function() {
        filter();
    });

    $("#clear").click(function() {
        $("#filter").val("");
        dp.rows.filter(null);
        return false;
    });
});
Comment posted by Sharon
5 years ago.

oh, thank you very much. I will try this first thing in the morning and get back to you. thank you so much, fingers crossed this will work ;) there are a few more things Ive spent weeks troubleshooting so may get back to you about those too ;).

Comment posted by Sharon
5 years ago.

That worked a treat! Thank you so much. It is so refreshing to have someone who clearly knows exactly what they are doing! Absolutely wonderful ;)

I do have another question (this but in reverse to only show empty rooms) but I will start a new thread for this second part to help anyone else in the future trying to find the same solution. Thank you again ;)

Comment posted by Dan Letecky [DayPilot]
5 years ago.

Great, thanks for the update! ;-)

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.