过滤 kendo ui 调度程序
Posted
技术标签:
【中文标题】过滤 kendo ui 调度程序【英文标题】：filtering kendo ui scheduler 【发布时间】：2016-10-24 14:12:44 【问题描述】：我在日记应用中有一个调度程序和一个下拉菜单。调度器是这样配置的：
$("#scheduler").kendoScheduler(
date : Date.now(),
workDayStart: new Date("2015/1/1 08:00 AM"),
workDayEnd: new Date("2015/1/1 8:00 PM"),
dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'ddd dd/M')#</strong>"),
majorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'HH')#</strong><sup>00</sup>"),
minorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'HH')#</strong><sup>#=kendo.toString(date, 'mm')#</sup>"),
selectable: true,
messages:
ariaSlotLabel: "Selected from 0:g to 0:g",
showWorkDay: "Show core work hours"
,
editable:
window:
title: "Work Request Details",
width: "800px"
,
template: $("#customEditorTemplate").html()
,
edit: function (e)
//set the start end datetime
if (e.event.isNew && e.event.id == -1)
var startDtp = e.container.find("[name=start][data-role=datetimepicker]");
var endDtp = e.container.find("[name=end][data-role=datetimepicker]");
var setStartDate = e.event.start;
var setEndDate = e.event.end;
setStartDate.setHours(8);
setEndDate.setHours(-6); // by default the end date is midnight on the following day of the selected cell so we subtract 6h to get 18:00 on the selected date.
$(startDtp).data("kendoDateTimePicker").value(setStartDate); //set start date to the selected cell start date and time 08:00
$(endDtp).data("kendoDateTimePicker").value(setEndDate); //set enddate to the selected cell end date and time 18:00
var recurrenceEditor = e.container.find("[data-role=recurrenceeditor]").data("kendoRecurrenceEditor");
//set start option value, used to define the week 'Repeat on' selected checkboxes
recurrenceEditor.setOptions(
start: new Date(e.event.start)
);
,
eventTemplate: $("#eventTemplate").html(),
height: 550,
messages:
allDay: "Anytime"
,
views: [
type: "day", allDaySlot: true,
type: "week", eventHeight: 80 ,
type: "timeline", eventHeight: 80 ,
type: "timelineWeek", selected: true, majorTick: 1440, minorTickCount: 1, eventHeight: 80 ,
type: "agenda" ,
type: "month", eventHeight: 80
],
timezone: "Etc/UTC",
selectable: true,
dataSource:
parameterMap: function parameterMap(data, type)
console.log(type);
if (type === "read")
//var reqFilter = wRequestFilter.value();
var reqFilter = 'ALL'
console.log(reqFilter);
if (reqFilter == "MY")
data.filter = logic: "and", filters: [ field: "diary", operator: "eq", value: 'UIS' , field: "AssigneeID", operator: "eq", value: 1 ] ;
else if (reqFilter == "ALL")
data.filter = logic: "and", filters: [ field: "diary", operator: "eq", value: 'UIS' ] ;
else
data.filter = logic: "and", filters: [ field: "diary", operator: "eq", value: 'UIS' , field: "team", operator: "eq", value: reqFilter ] ;
console.log(data);
return data;
,
type: "signalr",
push: function (e)
generateNotification(e.type, e.items[0].WRequestID, e.items[0].diary, e.items[0].team);
,
transport:
signalr:
hub: sHub,
promise: sHubStart,
server:
read: "read",
create: "create",
update: "update",
destroy: "destroy"
,
client:
read: "read",
create: "create",
update: "update",
destroy: "destroy"
,
,
schema:
model:
id: "WRequestID",
fields:
WRequestID:
type: "number",
editable: false,
defaultValue: -1
,
start:
from: "Start",
type: "date",
culture: "en-GB"
,
end :
from: "End",
type: "date",
culture: "en-GB" ,
diary:
from: "Diary",
type: "string",
defaultValue: "@AppShort"
,
team:
from: "Team",
type: "string",
validation: required: true
,
title:
from: "Title",
type: "string",
validation: required: true
,
workManager:
from: "WorkManagerID",
type: "number",
validation: required: true
,
assignee:
from: "AssigneeID",
type: "number",
validation: required: true
,
changeRef:
from: "ChangeRef",
type: "string",
validation: required: true
,
description:
from: "Description",
type: "string",
validation: required: true
,
impactedServers:
from: "ImpactedServers",
type: "string",
validation: required: true
,
impactedServices:
from: "ImpactedServices",
type: "string",
validation: required: true
,
isBAU:
from: "IsBAU",
type: "boolean",
defaultValue: false
,
projectRef:
from: "ProjectRef",
type: "string",
validation: required: true
,
notes:
from: "Notes",
type: "string"
,
isOOH:
from: "IsOOH",
type: "boolean",
defaultValue: false
,
isAllDay:
from: "IsAllDay",
type: "boolean",
defaultValue: false
,
recurrenceRule:
from: "RecurrenceRule",
type: "string"
,
recurrenceId:
from: "RecurrenceID",
type: "number"
,
recurrenceException:
from: "RecurrenceException",
type: "string"
,
startTimezone:
from: "StartTimezone",
type: "string"
,
endTimezone:
from: "EndTimezone",
type: "string"
,
requestStatus:
from: "RequestStatus",
type: "number",
defaultValue: 0
,
,
);
我正在尝试使用 parameterMap 根据一位或两位数据过滤数据。
如果下拉值 = ALL，则数据按日记过滤 = @AppShort 其中@AppShort 派生自 web.config 设置 部分。 如果下拉值 = MY，则数据将进一步过滤为 显示当前使用事件 如果下拉列表值是其他值，则表示团队名称是 选择，因此数据会按日记和团队过滤。我的问题是根本没有过滤数据，并且永远不会触发 parameterMap 函数。这是最好的方法还是有其他实现过滤的方法。
任何帮助表示赞赏。
更新
根据要求...这是我的 signalR 集线器代码：
Public Class WRequestHub
Inherits Hub
Private requestService As SchedulerRequestService
Public Sub New()
requestService = New SchedulerRequestService()
End Sub
Public Function Read() As IEnumerable(Of WRequestViewModel)
Return requestService.GetAll()
End Function
Public Sub Update(request As WRequestViewModel)
requestService.Update(request)
Clients.Others.update(request)
End Sub
Public Sub Destroy(request As WRequestViewModel)
requestService.Delete(request)
Clients.Others.destroy(request)
End Sub
Public Function Create(request As WRequestViewModel) As WRequestViewModel
requestService.Insert(request)
Clients.Others.create(request)
Return request
End Function
Public Sub LockRecord(id As Integer)
Clients.Others.lockRecord(New With
Key .id = id
)
End Sub
Public Sub UnlockRecord(id As Integer)
Clients.Others.unlockRecord(New With
Key .id = id
)
End Sub
End Class
这是我的 SchedulerRequestService 类...
Public Class SchedulerRequestService
Public Overridable Function GetAll() As IQueryable(Of WRequestViewModel)
Using de As New SupportDiaryEntities
Dim rList As IQueryable(Of WRequestViewModel)
rList = (From r In de.tWorkRequests
Select New WRequestViewModel() With
.WRequestID = r.WRequestID,
.Start = r.Start,
.[End] = r.[End],
.Title = r.Title,
.Diary = r.Diary,
.Team = r.Team,
.WorkManagerID = r.WorkManagerID,
.AssigneeID = r.AssigneeID,
.ChangeRef = r.ChangeRef,
.Description = r.Description,
.ImpactedServers = r.ImpactedServers,
.ImpactedServices = r.ImpactedServices,
.IsBAU = r.IsBAU,
.ProjectRef = r.ProjectRef,
.Notes = r.Notes,
.IsOOH = r.IsOOH,
.IsAllDay = r.IsAllDay,
.RecurrenceRule = r.RecurrenceRule,
.RecurrenceID = r.RecurrenceID,
.RecurrenceException = r.RecurrenceException,
.StartTimezone = r.StartTimezone,
.EndTimezone = r.EndTimezone,
.RequestStatus = r.RequestStatus
).ToList.AsQueryable()
Return rList
End Using
End Function
'OTHER FUNCTIONS (Insert, Update, Delete) Removed for brevity.
End Class
更新 2
借助 Calinaadi 的一些帮助以及在 Kendo Grid 上过滤 SignalR 数据源的示例，我可以看到我需要修改我的读取函数以接受我的过滤器。不幸的是，与网格一起使用的示例具有 .take、.skip、.sort、.filter 和 .aggregate 作为参数，当您有一个带有分页的网格并且您想在跳过 Y 记录后获取 X 记录时，我理解这些参数。
这是telerik demos中的一个典型例子……
public DataSourceResult Read(MyDataSourceRequest request)
return productService.Read().ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter, request.Aggregates);
对于调度程序，我希望读取以在当前调度程序视图开始时或之后结束并且在当前调度程序视图结束时或之前开始时取回所有事件。可能是按开始排序的。通过字段过滤器过滤是必要的（这些是我设置的过滤器）。我看不到 take、skip 或 aggregate 在获取事件数据方面有任何概念。
我的应用功能完全没有过滤。我有一个 VS 解决方案，如有必要，我可以与填充了虚拟记录的数据库共享。
为任何帮助提供赏金。
【问题讨论】：
能否请您添加触发过滤器的代码？ @calinaadi 我不确定我是否理解......调度程序在初始化时会触发读取我相信......数据源通过signalR绑定。你是说集线器代码吗？ @calinaadi 我已经添加了集线器和调用来读取数据的函数......你可能已经收集到我在这里有点超出我的深度......这个项目已经从一个基本的日历与许多功能合二为一。从我读到的内容来看，我认为过滤是在客户端完成的，但我可能错了......如果是服务器端，我如何通过我的读取请求传递我的过滤器？ 过滤是在数据源上完成的，您使用 datasource.filter 方法从客户端调用它一个例子来查看它的工作原理：jsfiddle.net/valchev/MG89G 此示例使用网格，过滤器是静态的。我需要动态，因为我有一个始终会被过滤的字段和另外两个可能会或可能不会被过滤的字段。用于过滤的值也是可变的。 【参考方案1】：你应该改变：
transport:
signalr:
hub: sHub,
promise: sHubStart,
ParameterMap: "parameterMap",
到：
transport:
parameterMap: function parameterMap(data, type)
alert(type);
,
signalr:
【讨论】：
Calinaadi，非常感谢您的帮助。我已按照说明更新了 parameterMap 部分。我暂时还添加了静态值，只是为了测试过滤而不是从页面上的其他元素中查找值。我添加了 console.log 命令来跟踪各种数据。不幸的是仍然没有过滤。所有数据都显示出来了……没有错误，记录也没有结果……好像 parameterMap 函数被忽略了。 查看了 dojo 示例...但我看不到 parameterMap 工作...警报（类型）未触发。 我什至尝试过添加过滤器...dojo.telerik.com/@Mych/IMoGa/2 我从你提供链接的道场中拿了一个分支......它有大写的 P，我没有发现它。警报现在有效，但过滤不起作用......请参阅dojo.telerik.com/@Mych/IMoGa/3，它有一个注释掉的过滤器。如果您运行警报将弹出并显示数据。如果您取消注释 data.filter 行并运行警报弹出但没有显示数据...我们应该看到 ProductName 以 T 开头的所有记录。 过滤器将不起作用，因为您需要执行类似参数映射的操作： function (options) return JSON.stringify(options);在服务器端，您将需要一个可以处理此类请求的方法....仅适用于 ex public JsonResult Get(DataOptions options) 其中 DataOptions 类似于： public GridFilter Filter get;放; 公共 int 跳过 获取；放; 公共 GridSort[] 排序 获取；放; 公共 int 采取 获取；放; 【参考方案2】：经过多次搜索和阅读。我现在有一个工作系统。调度程序需要参数serverFiltering: true 也必须重做Read, Create, Update and Destroy 函数才能接受已发布的过滤器。如果有人想要一份代码的副本，我可以让你拥有它。
【讨论】：
以上是关于过滤 kendo ui 调度程序的主要内容，如果未能解决你的问题，请参考以下文章