How to filter the appointments of EJMVC Scheduler based on the custom field value?
This knowledge base article explains the way to filter the appointments from scheduler using the custom field value.
Step 1: Create an MVC application with default Scheduler example by referring the below knowledge base link.
https://www.syncfusion.com/kb/3606/how-to-add-the-ejmvc-schedule-control-in-the-mvc-application
@(Html.EJ().Schedule("Schedule1")
.Width("100%")
.Height("500px")
.CurrentDate(new DateTime(2015, 8, 6))
.ScheduleClientSideEvents(evt => evt.Create("onCreate"))
.AppointmentSettings(fields => fields.Datasource(ViewBag.datasource)
.ApplyTimeOffset(false)
.Id("Id")
.Subject("Subject")
.StartTime("StartTime")
.EndTime("EndTime")
.Description("Description")
.AllDay("AllDay")
.Recurrence("Recurrence")
.RecurrenceRule("RecurrenceRule"))
)
Step 2: Now render the Syncfusion Dropdown control on the same page with the client-side Select event as depicted below.
@Html.EJ().DropDownList("statusList").Width("150px").Datasource((IEnumerable<Status>)ViewBag.data).DropDownListFields(df => df.ID("Id").Text("Text").Value("Text")).WatermarkText("Select a Status").ClientSideEvents(cse => cse.Select("onSelect"))
Step 3: Define the data source for drop down field at controller side as shown below.
List<Status> st = new List<Status>();
public ActionResult Index()
{
st.Add(new Status { Id = "1", Text = "Open" });
st.Add(new Status { Id = "2", Text = "Closed" });
st.Add(new Status { Id = "3", Text = "InProgress" });
ViewBag.data = st;
return View();
}
public class Status
{
public string Id;
public string Text;
}
Step 4: Other than the default scheduler fields, include an additional custom field in your database appointment collection as shown below. Make sure to bind the same database appointment collection to the scheduler.
Figure 1: DB collection with additional custom field
Step 5: When a value is selected from a dropdown control, onSelect function will be called, where the appointments are filtered using the filterAppointments public method based on the custom field value selected from drop-down and then the results are displayed in a grid as shown below.
function onSelect(args) {
var filter = [], proxy = $("#Schedule1").data("ejSchedule");
filter.push({ field: "Status", operator: "contains", value: args.value, predicate: "or" });
if (filter.length > 0) {
var searchList = proxy.filterAppointments(filter);
if (!ej.isNullOrUndefined(searchList) && searchList.length != 0) {
proxy.element.find(".e-datecommondiv").hide();
proxy.element.find(".e-scheduleheader").next().hide();
proxy.element.find(".e-scheduleheader").next().next().hide();
proxy.element.find(".e-viewsdiv").css("visibility", "hidden");
proxy.element.find("#grid").show();
proxy.element.find("#grid").data("ejGrid") && proxy.element.find("#grid").ejGrid("destroy");
proxy.element.find("#grid").ejGrid({
dataSource: searchList,
allowPaging: true,
pageSettings: { pageSize: 10 }
});
proxy.element.find("#grid").find("div.e-prev").removeClass("e-prev");
}
else {
proxy.element.find(".e-datecommondiv").show();
proxy.element.find(".e-scheduleheader").next().show();
proxy.element.find(".e-scheduleheader").next().next().show();
proxy.element.find("#grid").hide();
proxy.element.find(".e-viewsdiv").css("visibility", "");
}
}
}
Step 6: Run the sample and Schedule will initially display all the appointments from database as depicted below.
Figure 2: Schedule displaying all appointments with no filtering.
Step 7: When the Closed value is selected from drop down, the filtered appointment collection based on the closed status will be displayed in Grid as shown below.
Figure 3: Grid displaying filtered appointment collection.
Sample: https://www.syncfusion.com/downloads/support/directtrac/190203/ze/Sample-354323409
