kendo SchedulerCustomEditor with View Model Collection Binding.

[Philippe]

hi,

I am trying to make a scheduler custom editor with a View Model Collection Binding.

So what i really want. I need to my editor to dynamically a list of dropdownlist. Take a look in my attach image.

 My view model is like this (just show you the concern parts): I added one item to the list for testing

 public class RendezVousViewModel : ISchedulerEvent
    {

        public RendezVousViewModel()
        {
            this.ListRendezVousMateriels = new List<RendezVousMateriel>();
            var RendezVousMateriel = new RendezVousMateriel();
            RendezVousMateriel.MaterielID = 1;
            this.ListRendezVousMateriels.Add(RendezVousMateriel);
        }
        public List<RendezVousMateriel> ListRendezVousMateriels { get; set; }

        #endregion

    }
}

Extract of my editor :

  @for (var i = 0; i < Model.ListRendezVousMateriels.Count; i++)
    {
        @(Html.Kendo().DropDownListFor(model => model.ListRendezVousMateriels[i].MaterielID)
                       .HtmlAttributes(new { data_bind = "value:ListRendezVousMateriels_" + i + "__MaterielID", style = "width: 280px" })
                       .DataTextField("Text")
                       .DataValueField("Value")
                       .ValuePrimitive(true)
                       .HtmlAttributes(new { @style = "width:100%" })
                       .DataSource(source => source.Read(read => read.Action("GetDiplomes", "Diplomes")).ServerFiltering(true))
              .OptionLabel("Choix du matériel"))
    }

 So apparently it's doesn't work, do you confirm that is not implemented? Else do you have an idea how i can achieve somethink like this?

 Thanks by advance.

 

[Vladimir Iliev]

Hello,

Currently we have no such example which we can provide, however the desired behavior can be achieved using custom code. Similar demo is available for the Grid widget - you can check it and try using the same approach for the Scheduler editor:

• Grid Popup Editing Navigation Property Collection with nested Grid

Regards,
Vladimir Iliev
Telerik

[Philippe]

Thanks the example is a good help but when i am trying to set the datasource differently from the example the list stay at null.

here my js function : 

function onEditSch(e) {
        if (e.event.id == 0)
            isNouveau = true;
        else {
            isNouveau = false;
        }
        list = e.event.Grid;
        $('#Grid').data().kendoGrid.dataSource.data(e.event.Grid);

        if (isNouveau) {
            alert(e.event.RendezVousSiteProduitID);
        }

        $.ajax({
            url: '@Url.Action("GetProduitMateriel", "Schedule")',
            data: { ProduitID: e.event.RendezVousSiteProduitID },
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                $('#Grid').data().kendoGrid.dataSource.data(data);
            }
        });

    }

when i set the datasource like this $('#Grid').data().kendoGrid.dataSource.data(e.event.Grid); the list is empty but i can add items with the grid and when i save my popup the list is filling like i want.

 

But unfortunately i need to feel the list by default values getting thanks to the id from the ressource.

So i try this : $.ajax({
            url: '@Url.Action("GetProduitMateriel", "Schedule")',
            data: { ProduitID: e.event.RendezVousSiteProduitID },
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                $('#Grid').data().kendoGrid.dataSource.data(data);
            }
        });

 

The grid is filling but the list stay at null when i save the event.

 

 

 

[Philippe]

Finally is good i did like this :

 $('#Grid').data().kendoGrid.dataSource.data(e.event.Grid);

        if (isNouveau) {


                $.ajax({
                    url: '@Url.Action("GetProduitMateriel", "Schedule")',
                data: { ProduitID: e.event.RendezVousSiteProduitID },
                type: 'POST',
                async: false,
                dataType: 'json',
                success: function (data) {
                    var i = 0;
                    $.each(data, function () {
                        $('#Grid').data().kendoGrid.dataSource.add({ MaterielID: this.MaterielID, RendMateNbNecessaire: this.RendMateNbNecessaire, RendMateNbReserve: this.RendMateNbReserve, RendezVousMaterielID: i, TypeDropDownList: this.MaterielID});
                    });
                }
            });
        }