How to pre-select the resource values on a kendoScheduler pop-up window?

Question

Concerning a project I'm developing with focus on the Scheduler widget, I would like to know it it's possible to achieve the following functionality:

screencast

With my current Scheduler, I can bring the values of my startDate and endDate as expect, however, I'm not being able to see my pop-up window with the values of my resources, meaning that, I have to make an extra click inside the pop-up window to choose the value I want.

Here's a code snippet from my script:

        group: {
        resources: ["Colaboradores"],
        orientation: "vertical"
    },

    resources: [{
        field: "UtilizadorID",
        name: "Colaboradores",
        dataTextField: "Nome",
        dataValueField: "ID",
        dataSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: './../Services/HCAnestesiaWeb-AnestesiaDomainService.svc/JSON/GetColaboradores'
                    }
                },
                schema: {
                    type: "json",
                    data: "GetColaboradoresResult.RootResults",
                    total: "GetColaboradoresResult.TotalCount"
                }
            }
        ),
        multiple: true,
        title: "nome"
    },
    {
        field: "TipoEstado",
        dataValueField: "TipoDeEstadoID",
        dataTextField: "descr",
        dataColorField: "Cor",
        /*dataStartDateField: "startHour",
        dataEndDateField: "endHour",*/
        dataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: './../Services/HCAnestesiaWeb-AnestesiaDomainService.svc/JSON/GetTiposEstados'
                }
            },
            schema: {
                type: "json",
                data: "GetTiposEstadosResult.RootResults",
                total: "GetTiposEstadosResult.TotalCount"
            }
        })
    }],

    // FRONT-END:
    edit: function(e) {

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

        var utilizador = e.container.find("#selectColaborador").data("kendoMultiSelect");

        var TipoEstado = e.container.find("#selectEstado").kendoMultiSelect({
            /*optionLabel: "Seleccionar...",*/
            dataTextField: "descr",
            dataValueField: "TipoDeEstadoID",
            dataColorField: "Cor",
            template: '<div style="background-color: #:Cor#; border-radius: 10px; height: 30px; width: 30px; float: left"></div><div>#:descr#</div>'
        }).data("kendoMultiSelect");
        TipoEstado.dataSource.data(e.sender.resources[1].dataSource.data());

        // $("#dataInicio").val(e.event.start);
        // $("#dataFim").val(e.event.ID);
        // $("#data").val(e.event.UtilizadorID);
        console.log(e.event);
        /*var dataInicio = e.container.find("#dataInicio").data("kendoDropDownList");*/
        // dataInicio.dataSource.data(e.sender.resources[0].dataSource.data());

        /*var dataFim = e.container.find("#dataFim").data("kendoDropDownList");*/
        // dataFim.dataSource.data(e.sender.resources[0].dataSource.data());

    },

Answer 1

Got a solution for this issue so, here it goes:

• As I am setting the source manually, it means that it is empty during the widget's attempt to set its value. Expectdly, it does not select anything because it is empty and then, when the source is set, there is no code that will re-apply the value;

• The solution for this case is to select the values manually. Basically, in the edit event, as the e.event instance is populated correctly, it is possible to use directly the e.event.UserID value.

• I had to create a new variable and call its value below the line that gets all the data source for the kendoMultiSelect:

  var UtilizadorIDsender = e.event.UtilizadorID[0];

  var UtilizadorID = e.container.find("#selectColaborador").kendoMultiSelect({ dataTextField: "Nome", dataValueField: "ID" }).data("kendoMultiSelect"); UtilizadorID.dataSource.data(e.sender.resources[0].dataSource.data()); $("#selectColaborador").getKendoMultiSelect().value(UtilizadorIDsender);

Answer 2

On your multiselect definition inside the edit function, you can set the selected values like this:

var UtilizadorID = e.container.find("#selectColaborador").kendoMultiSelect({
            dataTextField: "Nome",
            dataValueField: "ID",
            value: ["1", "3"] // here you set the selected value(s)
        }).data("kendoMultiSelect");

You must find the resource id you need and put it there.

Here a JSBin