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")
)
)
Hello everyone,
I'm currently testing the Kendo Ui, especially the Grid, in an ASP.NET MVC - Environment and I'm a bit confused by the AJAX-Databinding.
The grid is constructed with the Kendo MVC GridBuilder in a razor-view.
There are multiple columns that are set to visible / invisible dynamically.
Everything was working like a charm until I've inspected the network-traffic that showed me, that the JSON-Result contains every column of the IEnumerable the grid is bound to, also the ones that are not even mentioned in the Columns-section.
Is there a way to turn this off and only download the data that is actually needed?
Thanks.
Kind regards,
Stefan
Hi,
I am trying to load the razor page/ form as acontent for TabStrip dynamically from Menu click event. The telerik team can help to with sample example.
Thanks,
Kiran
Dear Telerik,
I have the fallowing problem reported by my QA team on a page with moltipale comboboxs the value of the combo shows up as the combo syncs with server data the it disappears and is synced.
As I was checking this I see that the fields .value() and text(). of the kendo ui ComboBox have this strange behavior. They sync with each other. When I change the text in the combo box value is set to the text current value. This can be seen an the kendo ui demo basic usage , by writing "Item 4" in the combo and the value() and the text() of the combo will both be "Item 4". This could cause problem if the data arrived at the server when a code is expected. In my view .text should not be synced to the .value. If there selection of the value.
here is a disction of this :
http://stackoverflow.com/questions/18870746/avoid-combobox-sending-values-that-arent-on-the-list
Yours,
Ariel
Hello,
Please give me an idea how to do multiple nested subgrids. please see the attachment for more details.
I have a main grid (one row), a subgrid1 (9 rows) and below the subgrid1 with 5 hyperlinks.
If a user clink on a hyperlink then a subgrid2 will show the data. If the user click on the different hyperlink then the subgrid2 will be updated.
My question:
how to add 5 hyperlinks below subgrid1.
how to show subgrid2 when a user click on a hyperlink.
Thank you!!!
Hi,
I have one dropdownlist and one grid in my form.I fill grid from dropdownlist change event with script.I initialize the data from page load in the controller.I create dynamic grid with columns.In dropdownlist item support has diffrent column count and names think about like table.When I selected the item on dropdownlist the grid data will come but columns number will not change how can I change the columns from selected item?.I get the columns and data from controller.Data will come but columns will not come and change.And also the view page(.cshtml) not trigger when grid read the data.How can I solve this issue changing the columns selecting from dropdownlist
And my view page source codes is here.
Can any one help?
<
div
id
=
"DropDown"
>
@(Html.Kendo().DropDownList()
.Name("DropDownList")
.HtmlAttributes(new { style = "width: 350px" })
.DataTextField("text")
.DataValueField("value")
.Filter("startswith")
.OptionLabel("--SELECT--")
.DataSource(source =>
{
source.Custom()
.Type("aspnetmvc-ajax")
.Transport(transport =>
{
transport.Read("CodesDropDownList", "GlobalSettings");
})
.Schema(schema =>
{
schema.Data("Data")
.Total("Total");
});
})
.Events(e =>
{
e.Change("onChange");
})
)
</
div
>
<
div
id
=
"DynmicGrid"
>
@(Html.Kendo().Grid<
dynamic
>()
.Name("grid")
.AutoBind(false)
.Columns(columns =>
{
foreach (DataColumn column in Model.Columns)
{
var c = columns.Bound(column.ColumnName);
c.Title(column.Caption);
}
})
.Pageable(pager => pager.Refresh(true))
.Sortable()
.ToolBar(toolbar => toolbar.Create())
.Editable(ed => ed.Mode(GridEditMode.PopUp))
.Selectable(selectable =>
{
selectable.Mode(GridSelectionMode.Single);
selectable.Type(GridSelectionType.Row);
})
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
var id = Model.PrimaryKey[0];
foreach (var keyColumn in Model.PrimaryKey)
{
var field = model.Field(keyColumn.ColumnName, keyColumn.DataType);
field.Editable(false);
}
model.Id(id.ColumnName);
})
.Read(read => read.Action("Read", "GlobalSettings").Data("additionalData"))
.Update(update => update.Action("UpdateRecordINGrid", "GlobalSettings"))
.Create(read => read.Action("CreateNewRowDataINGrid", "GlobalSettings").Data("additionalData"))
)
.Events(e =>
{
})
)
</
div
>
var
ddlItem;
function
onChange() {
ddlItem =
this
.value();
var
grid = $(
"#grid"
).data(
"kendoGrid"
);
grid.dataSource.read();
}
function
additionalData(e) {
return
{ item: ddlItem }
}
I am using rad tree view in my project. Where i need to get all the child node details when i select the parent node alone without expanding for the first time.
i found in forum that GetItemByPath() (http://docs.telerik.com/devtools/wpf/controls/radtreeview/how-to/get-item-by-path.html) is the only option.
Please guide me on this..
Thanks in advance..