javascript - 如何在调度程序弹出窗口中检索事件的颜色？

Question

我正在使用两个资源在调度程序小部件上制作自己的弹出窗口。我的两个资源都可以在 DropDownList 上看到。但是，至少对于“事件”资源，我需要看到相应的颜色，因为每个事件都有自己的颜色。

这是我的调度程序的一部分，帮助我创建自定义编辑弹出窗口:

edit: function(e) {

        var UtilizadorID = e.container.find("#selectColaborador").kendoDropDownList({
                    optionLabel:"Selecionar Colaborador",
                    dataTextField:"Nome",
                    dataValueField:"ID"
            }).data("kendoDropDownList");
        UtilizadorID.dataSource.data(e.sender.resources[0].dataSource.data());

        var TipoEstado = e.container.find("#selectEstado").kendoDropDownList({
                    optionLabel:"Selecionar Estado",
                    dataTextField:"descr",
                    dataValueField:"TipoDeEstadoID",
                    dataColorField: "Cor"
            }).data("kendoDropDownList");
        TipoEstado.dataSource.data(e.sender.resources[1].dataSource.data());

    },

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

有什么想法吗？

Answer 1

好吧，我想你想在来自数据库的弹出模板中的单个下拉列表上显示事件名称和颜色。我在下面给出了 AngularJS 中的一些示例，如果你支持此代码，我也会在 jquery 中为你提供示例。 在这种情况下，您可以在 Controller 中创建下拉列表模板并像这样在 View 中显示

$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;
    }
};

这是你的 Controller ，你可以在 View 中使用这个模板

 <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 之间的一些不同