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

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 中给你例子。 在这种情况下，您可以在控制器中创建下拉列表模板并像这样显示在视图中

$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。在 jquery 中，angularjs 和 jquery 有一些不同