I'm trying to filter calendar MeetingAttendees which can have multiple users. I've built a filter and tested with various options, but it doesn't work. The basic example shows how to filter a calendar owner (which is a single value) and it works fine for me. But Attendees is an array and when I'm trying to filter that all my events disappear.
Here is my filter:
<
script
type
=
"text/javascript"
>
$(function () {
$("#teamMembers :checkbox").change(function (e) {
var checked = $.map($("#teamMembers :checked"), function (checkbox) {
return parseInt($(checkbox).val());
});
//alert(checked);
var filter = {
logic: "or",
filters: $.map(checked, function (value) {
return {
operator: "eq",
field: "Attendees",
value: value
};
})
};
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter(filter);
});
})
</
script
>
}
Here is the code that loads calendar events:
public virtual IQueryable<
MeetingViewModel
> GetAll()
{
return db.Meetings.ToList().Select(meeting => new MeetingViewModel
{
MeetingID = meeting.MeetingID,
Title = meeting.Title,
Start = DateTime.SpecifyKind(meeting.Start, DateTimeKind.Utc),
End = DateTime.SpecifyKind(meeting.End, DateTimeKind.Utc),
StartTimezone = meeting.StartTimezone,
EndTimezone = meeting.EndTimezone,
Description = meeting.Description,
IsAllDay = meeting.IsAllDay,
SupportGroupId = meeting.SupportGroupId,
RecurrenceRule = meeting.RecurrenceRule,
RecurrenceException = meeting.RecurrenceException,
RecurrenceID = meeting.RecurrenceID,
Attendees = meeting.MeetingAttendees.Select(m => m.AttendeeID).ToArray(),
ActivityTypeId = meeting.ActivityTypeId
}).AsQueryable();
}
Here is my custom editor template:
@model Itsws.Models.MeetingViewModel
@{
//required in order to render validation attributes
ViewContext.FormContext =
new
FormContext();
}
@functions{
public
Dictionary<
string
,
object
> generateDatePickerAttributes(
string
elementId,
string
fieldName,
string
dataBindAttribute,
Dictionary<
string
,
object
> additionalAttributes =
null
)
{
Dictionary<
string
,
object
> datePickerAttributes = additionalAttributes !=
null
?
new
Dictionary<
string
,
object
>(additionalAttributes) :
new
Dictionary<
string
,
object
>();
datePickerAttributes[
"id"
] = elementId;
datePickerAttributes[
"name"
] = fieldName;
datePickerAttributes[
"data-bind"
] = dataBindAttribute;
datePickerAttributes[
"required"
] =
"required"
;
datePickerAttributes[
"style"
] =
"z-index: inherit;"
;
return
datePickerAttributes;
}
}
<div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.Title))
</div>
<div data-container-
for
=
"title"
class
=
"k-edit-field"
>
@(Html.TextBoxFor(model => model.Title,
new
{ @
class
=
"k-textbox"
, data_bind =
"value:title"
}))
</div>
<div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.Start))
</div>
<div data-container-
for
=
"start"
class
=
"k-edit-field"
>
@(Html.Kendo().DateTimePickerFor(model => model.Start)
.HtmlAttributes(generateDatePickerAttributes(
"startDateTime"
,
"start"
,
"value:start,invisible:isAllDay"
)))
@(Html.Kendo().DatePickerFor(model => model.Start)
.HtmlAttributes(generateDatePickerAttributes(
"startDate"
,
"start"
,
"value:start,visible:isAllDay"
)))
<span data-bind=
"text: startTimezone"
></span>
<span data-
for
=
"start"
class
=
"k-invalid-msg"
></span>
</div>
<div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.End))
</div>
<div data-container-
for
=
"end"
class
=
"k-edit-field"
>
@(Html.Kendo().DateTimePickerFor(model => model.End)
.HtmlAttributes(generateDatePickerAttributes(
"endDateTime"
,
"end"
,
"value:end,invisible:isAllDay"
,
new
Dictionary<
string
,
object
>() { {
"data-dateCompare-msg"
,
"End date should be greater than or equal to the start date"
} })))
@(Html.Kendo().DatePickerFor(model => model.End)
.HtmlAttributes(generateDatePickerAttributes(
"endDate"
,
"end"
,
"value:end,visible:isAllDay"
,
new
Dictionary<
string
,
object
>() { {
"data-dateCompare-msg"
,
"End date should be greater than or equal to the start date"
} })))
<span data-bind=
"text: endTimezone"
></span>
<span data-
for
=
"end"
class
=
"k-invalid-msg"
></span>
</div>
<div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.IsAllDay))
</div>
<div data-container-
for
=
"isAllDay"
class
=
"k-edit-field"
>
<input data-bind=
"checked: isAllDay"
data-val=
"true"
id=
"IsAllDay"
name=
"IsAllDay"
type=
"checkbox"
/>
</div>
@*<div
class
=
"endTimezoneRow"
>
<div
class
=
"k-edit-label"
></div>
<div
class
=
"k-edit-field"
>
<label
class
=
"k-check"
>
<input
checked
=
"checked"
class
=
"k-timezone-toggle"
type=
"checkbox"
value=
"true"
/>
Use separate start and end time zones
</label>
</div>
</div>*@
<script>
$(
".k-timezone-toggle"
).on(
"click"
, function () {
var isVisible = $(
this
).
is
(
":checked"
);
var container = $(
this
).closest(
".k-popup-edit-form"
);
var endTimezoneRow = container.find(
"label[for='EndTimezone']"
).parent().add(container.find(
"div[data-container-for='endTimezone']"
));
endTimezoneRow.toggle(isVisible);
if
(!isVisible) {
var uid = container.attr(
"data-uid"
);
var scheduler = $(
"\#scheduler"
).data(
"kendoScheduler"
);
var model = scheduler.dataSource.getByUid(uid);
model.
set
(
"endTimezone"
,
null
);
}
});
var endTimezone =
'${data.endTimezone}'
;
if
(!endTimezone || endTimezone ==
"null"
) {
$(
".k-timezone-toggle"
).trigger(
'click'
);
}
</script>
@*<div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.StartTimezone))
</div>
<div data-container-
for
=
"startTimezone"
class
=
"k-edit-field"
>
@(Html.Kendo().TimezoneEditorFor(model => model.StartTimezone)
.HtmlAttributes(
new
{ data_bind =
"value:startTimezone"
}))
</div>
<div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.EndTimezone))
</div>
<div data-container-
for
=
"endTimezone"
class
=
"k-edit-field"
>
@(Html.Kendo().TimezoneEditorFor(model => model.EndTimezone)
.HtmlAttributes(
new
{ data_bind =
"value:endTimezone"
}))
</div>*@
<div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.RecurrenceRule))
</div>
<div data-container-
for
=
"recurrenceRule"
class
=
"k-edit-field"
>
@(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
.HtmlAttributes(
new
{ data_bind =
"value:recurrenceRule"
}))
</div>
<div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.Description))
</div>
<div data-container-
for
=
"description"
class
=
"k-edit-field"
>
@(Html.TextAreaFor(model => model.Description,
new
{ @
class
=
"k-textbox"
, data_bind =
"value:description"
}))
</div>
<div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.ActivityTypeId))
</div>
<div data-container-
for
=
"ActivityTypeId"
class
=
"k-edit-field"
>
@(Html.Kendo().DropDownListFor(model => model.ActivityTypeId)
.HtmlAttributes(
new
{ data_bind =
"value:ActivityTypeId"
, style =
"width: 280px"
})
.DataTextField(
"Text"
)
.DataValueField(
"Value"
)
.OptionLabel(
"None"
)
.ValuePrimitive(
true
)
.Template(
"<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#"
)
.BindTo(ViewBag.ActivityTypes).ToClientTemplate()
)
</div>
<div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.SupportGroupId))
</div>
<div data-container-
for
=
"ActivityTypeId"
class
=
"k-edit-field"
>
@(Html.Kendo().DropDownListFor(model => model.SupportGroupId)
.HtmlAttributes(
new
{ data_bind =
"value:SupportGroupId"
, style =
"width: 280px"
})
.DataTextField(
"Text"
)
.DataValueField(
"Value"
)
.OptionLabel(
"None"
)
.ValuePrimitive(
true
)
.Template(
"<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#"
)
.BindTo(ViewBag.SupportGroups).ToClientTemplate()
)
</div>
<div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.Attendees))
</div>
<div data-container-
for
=
"Attendees"
class
=
"k-edit-field"
>
@(Html.Kendo().MultiSelectFor(model => model.Attendees)
.HtmlAttributes(
new
{ data_bind =
"value:Attendees"
})
.DataTextField(
"Text"
)
.DataValueField(
"Value"
)
.ValuePrimitive(
true
)
.TagTemplate(
"<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#"
)
.ItemTemplate(
"<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#"
)
.BindTo(ViewBag.TeamMembers).ToClientTemplate()
)
</div>
@{
ViewContext.FormContext =
null
;
}
Here is the sheduler code:
@(Html.Kendo().Scheduler<
Itsws.Models.MeetingViewModel
>()
.Name("scheduler")
.Date(DateTime.Today)
.Editable(editable =>
{
editable.TemplateName("CustomEditorTemplate");
})
.StartTime(new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 7, 00, 00))
.Height(600)
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
views.TimelineView();
})
.Timezone("Etc/UTC")
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.MeetingID);
m.Field(f => f.Title).DefaultValue("No title");
m.RecurrenceId(f => f.RecurrenceID);
m.Field(f => f.Title).DefaultValue("No title");
})
.Read("Meetings_Read", "Scheduler")
.Create("Meetings_Create", "Scheduler")
.Destroy("Meetings_Destroy", "Scheduler")
.Update("Meetings_Update", "Scheduler")
)
)