How can I retrieve the color of my Events on the Scheduler pop-up window?

Question

I am making my own pop-up window on a Scheduler widget with two resources. Both of my resources can be seen on a DropDownList. However, at least for the "Events" resources, I need to see the respective color because each event will have his own color.

This is the part of my Scheduler that helped me to create my custom Edit pop-up window:

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());

    },

My pop-up window shows up with both of resources, however, I don't see the colors of my events on my dropdownlist.

Any ideas?

Answer 1

Ok,I think you want to display event name and color on single dropdownlist in popup template From database.I have some example given below in angularjs if you have support this code i will also give you example in jquery. In this case you can create dropdownlist template in controller and display in view like that

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

This is your controller and you can use this template in view like that

 <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>

This is your angular.In jquery some different between angularjs and jquery