Not updating - MVC

[Ricardo]

I got a grid calling a template and my problem is that make changes to the collection in my template and the view get update but I doesn't go the the database and update my changes, only update if I modify in the input tags. To Edit my collection and I'm calling another template. Please help

My Grid Code
~~~~~~~~~~~~~~~~~~~~~~~~~~
 @(Html.Kendo().Grid<Activity>().Name("grdAssistant").Columns(columns =>
      {
        
          columns.Bound(model => model.ActivityDescription).Title("Descripcion").Width(200);
          columns.Bound(model => model.ActivityDate).Title("Fecha").Format("{0:MM/dd/yyyy}");
          columns.Bound(model => model.ActivityHourFrom).Title("Entrada").Format("{0:hh:mm tt}").EditorTemplateName("Time");
          columns.Bound(model => model.ActivityHourTo).Title("Salida").Format("{0:hh:mm tt}").EditorTemplateName("Time");
          columns.Bound(model => model.ActivityPersons).Title("Personas").ClientTemplate("#=proPersons(ActivityPersons)#").Encoded(false);
          columns.Command(command => { command.Edit().Text("Editar").UpdateText("Guardar").CancelText("Cancelar"); command.Destroy().Text("Borrar"); }).Width(200);
      }).Pageable()
          .ToolBar(toolbar => toolbar.Create().Text("Añadir"))
          .Events(ev =>
          {
              ev.Edit("onEdit");
          }) 
          .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Activity").Window(t =>
          {
              t.Title("Actividad");
              t.Height(685);
              t.Width(630);
          })).DataSource(dataSource => dataSource.Ajax().Model(model =>
          {
              model.Id(p => p.ActivityId);
              model.Field(f => f.ActivityPersons).DefaultValue(new List<ActivityPerson>());
              model.Field(f => f.StatusId).DefaultValue("1");
          })
              .Events(ev =>
              {
                  ev.Change("onChange");
                  ev.RequestEnd("onRequestEnd");
              })
              .Read(read => read.Action("Activity_Read", "Registry"))
              .Update(update => update.Action("Activity_Update", "Registry"))
              .Destroy(update => update.Action("Activity_Destroy", "Registry"))
              .Create(create => create.Action("Activity_Create", "Registry")))
          )

</div>
<script>
    function onRequestEnd(ev) {
        
        if (ev.type == "update" || ev.type == "create") {

            $('#grdAssistant').data("kendoGrid").dataSource.read();
        };
    };
    function onChange(ev) {
        //debugger;
        
        //if (ev.action == "add") {
        //    var newItem = ev.items[0];


        //    viewModel.Activity = ko.mapping.fromJS(newItem);
        //    ko.applyBindings(viewModel);

        //}
    };
    function onEdit(e) {
        //$('#tblActivityPersons').data().kendoGrid.dataSource.data(e.model.ActivityPersons);
        
        e.container.data("kendoWindow").bind("close", function () {
            
        });
        e.container.data("kendoWindow").bind("activate", function () {
            //$('#grdActivityPersons').data("kendoGrid").dataSource.read();
        });
    }
    function proPersons(data) {
        var output = '<ul>';
        
        $(data).each(function() {
            output += "<li>" + this.ActivityPersonFirstName + " " + this.ActivityPersonLastName1 + " " + this.ActivityPersonLastName2 + "</li>";
        });
        output += '</ul>';
        var html = $(output).html();
        return output;
    }
</script>

My Template Code
~~~~~~~~~~~~

@model Activity

<div class="container">
    <div class="form-horizontal">
        @Html.HiddenFor(model => model.ActivityId)
        <h4>Informacion de la Actividad</h4>
        <div class="form-group">
            <label class="control-label col-sm-4" for="ProgramActivityId">Programa de Actividad </label>

            @Html.Kendo().DropDownListFor(model => model.ProgramActivityId).Name("ProgramActivityId").DataValueField("ProgramActivitiesId").DataTextField("ProgramActivitiesDescription").DataSource(
                dataSource => dataSource.Read(read => read.Action("ProgramActivity_Read", "Registry")))

        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="ActivityDescription">Descripción </label>

            @Html.TextBoxFor(model => model.ActivityDescription, new { @class = "form-control k-textbox",style = "width: 300px;" })
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="StatusId">Estatus </label>
            @Html.Kendo().DropDownListFor(model => model.StatusId).Name("StatusId").DataValueField("StatusId").DataTextField("StatusDescription").DataSource(
                dataSource => dataSource.Read(read => read.Action("ActivityStatus_Read", "Registry"))
                )

        </div>
        <h4>Fecha de la Actividad</h4>
        <div class="form-group">
            <label class="control-label col-sm-4" for="ActivityDate">Fecha </label>
            @Html.Kendo().DatePickerFor(model => model.ActivityDate).Name("ActivityDate")
        </div>
        <h4>Hora de la Actividad</h4>
        <div class="form-group">
            <label class="control-label col-sm-1" for="ActivityHourFrom">Desde </label>
            <div class="col-sm-3">
                @Html.Kendo().TimePickerFor(model => model.ActivityHourFrom).Name("ActivityHourFrom")
            </div>
            <label class="control-label col-sm-1" for="ActivityHourTo">Hasta </label>
            <div class="col-sm-4">
                @Html.Kendo().TimePickerFor(model => model.ActivityHourTo).Name("ActivityHourTo")
            </div>
        </div>
        <h4>Listado de Estudiantes</h4>

        @Html.Kendo().Window().Width(500).Height(275).Modal(true).Visible(false).Name("newPersonWin").Title("Estudiante")
        
        <script type="text/x-kendo-template" id="toolbarTemp">
            <a class="k-button" onclick="showPerson()">Añadir</a>
        </script>

            
        <div id="tblActivityPersons" data-bind="source: ActivityPersons"></div>
           
        <script id="row-template" type="text/x-kendo-template">
            <tr>
                <td>#= ActivityPersonFirstName # #= ActivityPersonLastName1# #= ActivityPersonLastName2#</td>
                <td data-bind="text: ActivityPersonPhone1"></td>
            </tr>
        </script>
            

    </div>


</div>

<script id="newPersonTemplate" type="text/x-kendo-template">
    <br />
    <div class="container" id="newPersonForm" >
        <div class="form-group">
            <input id="uid" data-bind="value: uid" hidden="hidden" type="text" />
            <input id="ActivityPersonId" data-bind="value: ActivityPersonId" hidden="hidden" type="text" />
            <input data-bind="value: ActivityPersonFirstName" class="k-textbox" id="ActivityPersonFirstName" name="ActivityPersonFirstName" placeholder="Nombre" required="required" style="text-transform:capitalize;" type="text" />
            <input data-bind="value: ActivityPersonInitName" class="k-textbox" id="ActivityPersonInitName" name="ActivityPersonInitName" placeholder="Inicial" style="text-transform:capitalize;" type="text" value="" />
        </div>
        <div class="form-group">

            <input data-bind="value:ActivityPersonLastName1" class="k-textbox" id="ActivityPersonLastName1" name="ActivityPersonLastName1" placeholder="Apellido P" required="required" style="text-transform:capitalize;" type="text" value="" />
            <input data-bind="value:ActivityPersonLastName2" class="k-textbox" id="ActivityPersonLastName2" name="ActivityPersonLastName2" placeholder="Apellido M" required="required" style="text-transform:capitalize;" type="text" value="" />
        </div>
        <div class="form-group">

            <input data-bind="value: ActivityPersonPhone1" class="k-textbox" id="ActivityPersonPhone1" name="ActivityPersonPhone1" placeholder="Telefono 1" required="required" type="text" value="" />
            <input data-bind="value: ActivityPersonPhone2 " class="k-textbox" id="ActivityPersonPhone2" name="ActivityPersonPhone2" placeholder="Telefono 2" type="text" value="" />
        </div>
        <div class="form-group">

            <input data-bind="value: ActivityPersonSocSec" class="k-textbox" id="ActivityPersonSocSec" name="ActivityPersonSocSec" placeholder="Seguro Social" required="required" type="text" value="" />
        </div>
        <div class="form-group">

            <a id="btnSometer" onclick="someter()" class="btn btn-primary">Someter</a>
            <a id="btnCancelar" onclick="cancelar()" class="btn btn-warning">Cancelar</a>
        </div>
    </div>


</script>
<script>

function getId() {
    var id = $("#ActivityId").val();
    return { id: id };
};


function showPerson() {

    var win = $("#newPersonWin").data("kendoWindow");
    var template = kendo.template($("#newPersonTemplate").html());
    $("#newPersonWin").data("kendoWindow").content(template({}));

    win.open().center();
}



function editarPersona(e) {
    e.preventDefault();

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));



    var viewModel = kendo.observable(dataItem);
    var win = $("#newPersonWin").data("kendoWindow");
    var template = kendo.template($("#newPersonTemplate").html());
    $("#newPersonWin").data("kendoWindow").content(template({}));
    win.open().center();
    kendo.bind($("#newPersonForm"), viewModel);

};

$(function () {
    $("#tblActivityPersons").kendoGrid({
        pageable: {
            pageSize: 3
        },
        toolbar: [
            {
                template: $("#toolbarTemp").html()
            }
        ],
        columns: [
        {
            field: "ActivityPersonFirstName",
            title: "Nombre",
            template: "#: ActivityPersonFirstName# #: ActivityPersonLastName1# #: ActivityPersonLastName2#"
        },
        {
            field: "ActivityPersonPhone1",
            title: "Telefono1"
        },
        {
            command: [{text: "Editar", click: editarPersona },
            "destroy"]
}]

    });
});


function someter() {

    var activityPersonFirstName = $("#ActivityPersonFirstName").val();
    var activityPersonInitName = $("#ActivityPersonInitName").val();
    var activityPersonLastName1 = $("#ActivityPersonLastName1").val();
    var activityPersonLastName2 = $("#ActivityPersonLastName2").val();
    var activityPersonPhone1 = $("#ActivityPersonPhone1").val();
    var activityPersonPhone2 = $("#ActivityPersonPhone2").val();
    var activityPersonSocSec = $("#ActivityPersonSocSec").val();
    var activityId = $("#ActivityId").val();
    var activityPersonId = $("#ActivityPersonId").val();
    var uid = $("#uid").val();

    var activityPerson = new Object();
    activityPerson.ActivityPersonFirstName = ucFirstAllWords(activityPersonFirstName);
    activityPerson.ActivityPersonInitName = activityPersonInitName;
    activityPerson.ActivityPersonLastName1 = ucFirstAllWords(activityPersonLastName1);
    activityPerson.ActivityPersonLastName2 = ucFirstAllWords(activityPersonLastName2);
    activityPerson.ActivityPersonPhone1 = activityPersonPhone1;
    activityPerson.ActivityPersonPhone2 = activityPersonPhone2;
    activityPerson.ActivityPersonSocSec = activityPersonSocSec;
    activityPerson.ActivityId = activityId;
    activityPerson.ActivityPersonId = activityPersonId;

    var url = '@Url.Action("ActivityPerson_Create", "Registry", new {id = "_Id"} )'.replace("_Id", activityId);

    var isValidForm = $("#newPersonForm").kendoValidator({
        messages: {
            rules1: "Require tamaño de 9",
            rules2: "Require tamaño de 10",
            required: "Requerido"
        },
        rules: {
            rules1: function (input) {
                if (input.is("[name=ActivityPersonSocSec]")) {
                    return input.val().length === 9;
                }
                return true;
            },
            rules2: function (input) {
                if (input.is("[name=ActivityPersonPhone1]")) {
                    return input.val().length === 10;
                }
                return true;
            }

        }
    }).data("kendoValidator");

    if (isValidForm.validate()) {

        var ds = $("#tblActivityPersons").data("kendoGrid").dataSource;
        var rows = ds.data();
        if (uid != "")
        {
            var item = ds.getByUid(uid);

            item.set("ActivityPersonFirstName", activityPerson.ActivityPersonFirstName);
            item.set("ActivityPersonInitName", activityPerson.ActivityPersonInitName);
            item.set("ActivityPersonLastName1", activityPerson.ActivityPersonLastName1);
            item.set("ActivityPersonLastName2", activityPerson.ActivityPersonLastName2);
            item.set("ActivityPersonPhone1", activityPerson.ActivityPersonPhone1);
            item.set("ActivityPersonPhone2", activityPerson.ActivityPersonPhone2);
            item.set("ActivityPersonSocSec", activityPerson.ActivityPersonSocSec);
            ds.sync();


        } else {
            activityPerson.ActivityPersonId = 0;
            rows.push(activityPerson);
        }

        $("#newPersonWin").data("kendoWindow").close();

    }

};

function cancelar() {
    $("#tblActivityPersons").data("kendoGrid").dataSource.cancelChanges();
    $("#tblActivityPersons").data("kendoGrid").dataSource.refresh();

    var win = $("#newPersonWin").data("kendoWindow");
    win.close();
};

</script>

[Petur Subev]

Hello Ricardo,

I am not sure I understand your question. The DataSource does not support editing of a nested collection, instead you have to use a separate DataSource with its own transport configuration which will be used when its sync method is invoked (there will be separate request made).

Same scenario is used when creating hierarchy of Grids. Editing of hierarchies is demonstrates in the following code library:

http://www.telerik.com/support/code-library/grid-ajax-hierarchy-editing

Regards,
Petur Subev
Telerik