How to search events?

9 posts, 1 answers
  1. 宏吉
    宏吉 avatar
    40 posts
    Member since:
    Mar 2017

    Posted 01 May 2017 Link to this post

    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?

  2. Sayer
    Sayer avatar
    16 posts
    Member since:
    May 2016

    Posted 02 May 2017 in reply to 宏吉 Link to this post

    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).

  3. 宏吉
    宏吉 avatar
    40 posts
    Member since:
    Mar 2017

    Posted 02 May 2017 Link to this post

    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

  4. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1209 posts

    Posted 03 May 2017 Link to this post

    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
    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.
  5. 宏吉
    宏吉 avatar
    40 posts
    Member since:
    Mar 2017

    Posted 03 May 2017 Link to this post

    Thank you~
  6. 宏吉
    宏吉 avatar
    40 posts
    Member since:
    Mar 2017

    Posted 03 May 2017 Link to this post

    Can I have multiple search box to search start_date and end_date and ownerID ?
  7. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1209 posts

    Posted 05 May 2017 Link to this post

    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
    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.
  8. 宏吉
    宏吉 avatar
    40 posts
    Member since:
    Mar 2017

    Posted 07 May 2017 in reply to Veselin Tsvetanov Link to this post

    But I still can't search for start dae in this sample
  9. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1209 posts

    Posted 10 May 2017 Link to this post

    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
    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