如何在“计划程序”弹出窗口中检索“事件”的颜色?

时间:2015-09-02 14:42:39

标签: javascript jquery kendo-ui kendo-scheduler kendo-datasource

我正在使用两个资源在Scheduler小部件上创建自己的弹出窗口。我可以在DropDownList上看到我的两个资源。但是,至少对于"事件"资源,我需要看到各自的颜色,因为每个事件都有自己的颜色。

这是我的Scheduler帮助我创建自定义编辑弹出窗口的部分:

smart

我的弹出窗口显示了两种资源,但是,我在下拉列表中看不到我的事件的颜色。

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

好的,我想你想在弹出模板中的单个下拉列表中显示事件名称和颜色从数据库。我在angularjs中给出了一些例子,如果你支持这个代码,我也会在jquery中给你一个例子。       在这种情况下,您可以在控制器中创建下拉列表模板,并在视图中显示

$scope.eventTypeDataSource = {
    dataSource: {
        transport: {
            read: function (e) {
                API.get("/EventType/GetEventTypes").then(function (data) {

                    e.success(data);


                });
            }
        }
    },
    headerTemplate: '<div class="dropdown-header"></div>',
    valueTemplate: function (dataItem) {
        if (dataItem === undefined || dataItem.SeasonTeamName === "") {
            return "";
        }
        else {

            var template = '<span class="k-scheduler-mark" style="background-color:' + dataItem.color + '"></span><span>{{dataItem.EventTypeName}}</span>';
            return template;
        }
    },
    template: function (dataItem) {
        var template = '';
        template = '<div class="tracker-select my-team-ko-wrapper clearfix"><span class="k-state-default tracker-tauko my-team-ko-tauko clearfix">' +
                '<span class="k-scheduler-mark pull-left" style="background-color:' + dataItem.color + ';margin-top:10px;"></span>' +
                '<span class="k-state-default tracker-jiu pull-left"><h3>{{dataItem.EventTypeName}}</h3></span></div>';
        return template;
    }
};

这是您的控制器,您可以在视图中使用此模板

 <li  class="clearfix">
                                    <label>Event Type</label>

                                    <select ng-model="_filterParamObj.eventTypeId"
                                            k-data-text-field="'EventTypeName'"
                                            k-data-value-field="'EventTypeId'"
                                            kendo-drop-down-list
                                            k-options="eventTypeDataSource" class="selectField"></select>
                                </li>

这是你的angular.In jquery angularjs和jquery之间的一些不同