How to add filtering of Schedule data based on user selection?

[Richard Werning]

I have a requirement to allow users to filter the events shown in the Schedule component, by giving them a dropdown list of some option such as the event type, or customer.  I'm having trouble figuring out how to do it, and haven't been able to find anything in the help documentation or searching the forums. We're using ASP.NET and the EJ2 components, version 17.1.50

The Schedule component is declared in the Index.cshtml similar to this:

        <div class="content-wrapper">

            @(Html.EJS().Schedule("eventSchedule")

                  .Width("100%")

                  .Height("650px")

                  .SelectedDate(DateTime.Today)

                  .CurrentView(View.Month)

                  .AllowDragAndDrop(false)

                  .AllowResizing(false)

                  .EventSettings(es => es.EnableTooltip(true).TooltipTemplate("#EventTooltipTemplate")

                      .DataSource(dataManager => { dataManager

                          .Url(Url.Action("LoadRecords", "Schedule"))

                          .CrudUrl(Url.Action("UpdateData", "Schedule"))

                          .Adaptor("UrlAdaptor");

                      })

                  )

                  .Render()

            )

        </div>

The controller action is declared as:
public ActionResult LoadRecords(string StartDate, string EndDate) {

 [...]

}

2 questions with this issue:

  1) How can I pass additional parameters to the controller so I can filter the data as needed?

  2) How can I add a component such as a DropDownList to the Schedule toolbar, to the right of the Date selection that is already there?

thank you

Rich W

[Nevitha Ravi]

Hi Richard, 

Greetings from Syncfusion Support. 

Q: How can I pass additional parameters to the controller so I can filter the data as needed? 

You can pass additional parameter using addparams method in Query. Please refer the following UG link for your reference. 

https://ej2.syncfusion.com/aspnetmvc/documentation/schedule/data-binding/#passing-additional-parameters-to-the-server 

 

Q: How can I add a component such as a DropDownList to the Schedule toolbar, to the right of the Date selection that is already there? 

The dropdownlist can be added to the scheduler toolbar using actionBegin event.  Please refer the following code for the same. 

 

<div> 

    @(Html.EJS().Schedule("schedule") 

        .Width("100%") 

        .Height("550px") 

        .ActionBegin("onActionBegin") 

        .SelectedDate(new DateTime(2018, 2, 15)) 

        .Render() 

    ) 

</div> 

<script type="text/javascript"> 

    var profilePopup; 

    function onActionBegin(args) { 

        if (args.requestType === 'toolbarItemRendering') { 

            var sportsData = [ 

                { Id: 'Game1', Game: 'American Football' }, 

                { Id: 'Game2', Game: 'Badminton' }, 

                { Id: 'Game3', Game: 'Basketball' }, 

                { Id: 'Game4', Game: 'Cricket' }, 

                { Id: 'Game5', Game: 'Football' }, 

                { Id: 'Game6', Game: 'Golf' }, 

                { Id: 'Game7', Game: 'Hockey' }, 

                { Id: 'Game8', Game: 'Rugby' }, 

                { Id: 'Game9', Game: 'Snooker' }, 

                { Id: 'Game10', Game: 'Tennis' }, 

            ]; 

            var userIconItem = { 

                align: 'Left', type: 'Input', template: new ej.dropdowns.DropDownList({ dataSource: sportsData, width: 120, index: 2, fields: { text: 'Game' }, }) 

            }; 

            args.items.push(userIconItem); 

        } 

    } 

</script> 

 

Regards, 

Nevitha 

[Richard Werning]

Thank you, that was enough to help me solve the issue.

[Vengatesh Maniraj]

Hi Richard, 

 

We are happy that our solution fulfils your requirement. 

 

Regards, 

Vengatesh