This is a migrated thread and some comments may be shown as answers.

Not updating - MVC

1 Answer 178 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ricardo
Top achievements
Rank 1
Ricardo asked on 02 Jun 2014, 05:05 PM
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>

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 04 Jun 2014, 04:09 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Ricardo
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or