0

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?

samureira
  • 253
  • 2
  • 17

1 Answers1

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

Sundar
  • 142
  • 1
  • 15
  • Hi Sundar. Thanks for your answer, I appreciated your effort and time. This can be an useful approach indeed, however, I already resolved this issue with some other solution. – samureira Sep 28 '15 at 09:47
  • heeeeeee..it's ok samurira.I have some other problems,could you help me please..This is my problems link:http://stackoverflow.com/questions/32820469/how-to-change-view-date-dynamically-which-is-filter-event-by-date-time – Sundar Sep 28 '15 at 10:41
  • I don't think I can help with you that, therefore, I can only suggest you to go ask that doubt of yours at Telerik forum [link](http://www.telerik.com/forums/kendo-ui/scheduler). – samureira Sep 28 '15 at 11:55