How to search events?

[宏吉]

I want add a textbox to search the events.

The search results will display like agenda and I want the results also can be edit.

How to do that?

[Sayer]

For filtering with a text box, simply create the textbox wherever you want the filter to be, then when someone is typing in it (attach an event to text box to detect change) start filtering your events (you will have to call back to your database, get the events, then set them to your array of events you pass into 'read' in the dataSource, then call dataSource.read()) and your scheduler should update itself. If you are using remote data like in the kendo scheduler demos, it is easier and they have demos and examples of filtering with remote data.

And for editing agenda view events: http://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#configuration-views.editable

You can set editable options for each view individually.

But for the first question, you will have to give more details, like if you are working with remote data, or local data (keeping an array of events).

[宏吉]

I means I want have a textbox can type keywords to search all create events like kendo example can search demos.

And the results will show like agenda views,and the result events can be edit

[Veselin Tsvetanov]

Hello Hung-Chi,

Here you will find a Dojo sample, that implements the required functionality. As Sayer has suggested correctly, on typing in the TextBox the filtering is applied to the Scheduler DataSource: 

$("#search-box").on('keyup', function (e) {
    var text = $(e.target).val().toLowerCase();
    var scheduler = $("#scheduler").data("kendoScheduler");

    scheduler.dataSource.filter({
      field: "title",
      operator: "contains",
      value: text });
});

Also, in order to be able to edit events in Agenda view, you will need to use an EventTemplate as by default the Agenda view does not allow editing of events:

<script id="event-template" type="text/x-kendo-template">
  <button class="edit-event" data-uid="#=uid#">Edit</button
  <div>Title: #: title #</div>
</script>

and:

$("#scheduler").on("click", ".edit-event",function() {
  var dataItem = scheduler.occurrenceByUid($(this).data("uid"));
  scheduler.editEvent(dataItem);
});

Regards,
Veselin Tsvetanov
Telerik by Progress

[宏吉]

Thank you~

[宏吉]

Can I have multiple search box to search start_date and end_date and ownerID ?

[Veselin Tsvetanov]

Hi Hung-Chi,

Yes, you can have multiple search boxes, that filter against different fields of the event data items. For further reference you could review Kendo DataSource filter configuration. Note that the same array as the one in the configuration options could be passed to the filter() method.

Regards,
Veselin Tsvetanov
Telerik by Progress

[宏吉]

But I still can't search for start dae in this sample

[Veselin Tsvetanov]

Hi Nung-Chi,

In order to properly search for a start date of an event, you will need to pass a Date object as a value of the configured DataSource filter. therefore, I have changed the sample sent, so it uses Kendo DatePicker. You will notice, that I have implemented the filtering logic in the change event of the DatePicker.

In order to filter properly, you will need to specify first an OwnerId in the input field and then to select a date in the picker. For example, set 2 as OwnerId and select 10 June 2013. This will filter the results and will display only events for the owner 2, which start on or after 10/6/2013.

You will also notice, that I have removed the Recurring events from the DataSource. The reason for that is the fact that the occurrences could not be filtered, but only the master event will be filtered (the one, when the occurrences start). For example, if there is a recurring event starting on 9 June 2013 and the user filters to show only events starting after 10 June 2013, none of the occurrences of the above event will be displayed as its master event starts before the filtering date. This is the way the Scheduler DataSource is designed to behave and filtering occurrences is not supported.

Regards,
Veselin Tsvetanov
Telerik by Progress