Senden Sie das Formular mit Kendo MVC Grid-und anderen Elementen

Ich versuche ein Formular mit einem telekik MVC grid-und anderen Elementen zu unterbreiten.

View-Modell enthält drei string-Felder und ein IEnumerable Sammlung.
Das raster ist server gebunden. Ich bin nicht hinzufügen, Elemente löschen oder alle Elemente aus der Liste mit Hilfe der raster aber raster enthält ein Kontrollkästchen zugeordnet, um eine boolean-Spalte in der Liste Elemente.

Immer wenn ich dieses Formular abgesendet haben die drei string-Elemente zurück in die post-Methode, aber Liste ist immer null.

Hier ist das Daten-Modell:

public class Parent
{
    public string Field1{get;set;}
    public string Field2{get;set;}
    public string Comments {get;set;}
    public IEnumerable<ChildItems> Children{get;set;}

}

Public class ChildItems
{
    public string ChildField1{get;set;}
    public string ChildField2{get;set;}
    public boolean Include{get;set;}

}

Hier ist meine Ansicht:

@{
    ViewBag.Title = "Index";
}
@model GridInForm.Models.Parent


@using(Html.BeginForm("Save", "Home"))
{
    <fieldset>
        <legend>Editing Parent</legend>

        @Html.LabelFor(parent => parent.Field1)
        @Html.EditorFor(parent => parent.Field1)

        @Html.LabelFor(parent => parent.Field2)
        @Html.EditorFor(parent => parent.Field2)
        @Html.LabelFor(parent => parent.Comments)
        @Html.EditorFor(parent => parent.Comments)
        @(Html.Kendo().Grid(Model.Children)
              .Name("Children")
              .ToolBar(tools => tools.Create().Text("Add new Children"))
              .Editable(editable =>      editable.Mode(GridEditMode.PopUp)
               .CreateAt(GridInsertRowPosition.Bottom))
              .Columns(columns =>
              {
                  columns.Bound(p => p.ChildField1).ClientTemplate("#= ChildField1 #" + 
                    "<input type='hidden' name='ChildField1[#= index(data)#].ChildField1'        
                     value='#= Name #' />"
                  );

                  columns.Bound(p => p.ChildField2).Hidden().ClientTemplate("#= ChildField1
                   #" +
                    "<input type='hidden' name='ChildField1[#= index(data)#].ChildField1' 
                  value='#= ChildField1 #' />"
                  );

                  columns.Command(command => 
                      {
                         //command.Destroy();
                          command.Edit();
                      }
                      ).Width(100);
              })
              .DataSource(dataSource => dataSource.Server().Create("Create", 
              "Home").Read("Index", "Home").Update("Update", "Home")
                   .Model(model => 
                       {
                           model.Id(p => p.ChildField1);
                           model.Field(p => p.ChildField1).Editable(false);
                       })
                   //.ServerOperation(true)
              )
        )
    </fieldset>

    <input type="submit" value="Save" />
}

<script>

function index(dataItem) {
    alert("bindind");
    var data = $("#Products").data("kendoGrid").dataSource.data();

    return data.indexOf(dataItem);
}

</script>

Wenn ich das Formular abschicken bekomme ich die Eltern-Elemente zurück in die Ansicht Modell, aber das Inumerable Felder aus dem grid sind immer null..

Ist dies einfach nicht der Weg, dies zu tun und wenn ja, was ist der Weg zu acommplish so etwas wie dieses. Ich hatte dieses Problem bei früheren Versionen von telerik und ich sehe es ist das gleiche auf die Kendo-UI. Jede Richtung würde sehr geschätzt werden. Dies wurde entlang gehen am Problem.

Ich habe das gleiche problem mit einer form, die ich arbeite. Jede Hilfe wäre auf jeden Fall werden es zu schätzen wissen. Das ist unnötig frustrierend.

InformationsquelleAutor user2016808 | 2013-01-28

Ich habe genau dieses Szenario funktioniert perfekt in mein Projekt. Hier ist mein raster Erklärung...

@(Html.Kendo().Grid(Model.ChildLines)
    .Name("RequestLinesGrid")
    .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
         .Columns(columns =>
         {
             columns.Bound(p => p.ItemCode).ClientTemplate("#= ItemCode #" +
               "<input type='hidden' name='MyLines[#= index(data)#].ItemCode' value='#= ItemCode #' />"
             );
             columns.Bound(p => p.Description).ClientTemplate("#= Description #" +
               "<input type='hidden' name='MyLines[#= index(data)#].Description' value='#= Description #' />"
             );
             columns.Bound(p => p.UoM).ClientTemplate("#= UoM #" +
               "<input type='hidden' name='MyLines[#= index(data)#].UoM' value='#= UoM #' />"
             );
             columns.Bound(p => p.QtyCC).ClientTemplate("#= QtyCC #" +
                "<input type='hidden' name='MyLines[#= index(data)#].QtyCC' value='#= QtyCC #' />"
             );
             columns.Bound(p => p.QtyEmployee).ClientTemplate("#= QtyEmployee #" +
                "<input type='hidden' name='MyLines[#= index(data)#].QtyEmployee' value='#= QtyEmployee #' />"
             );
             columns.Bound(p => p.ItemListLineID).Hidden(true).ClientTemplate("#= ItemListLineID #" +
                "<input type='hidden' name='MyLines[#= index(data)#].ItemListLineID' value='#= ItemListLineID #' />"
             );
             columns.Bound(p => p.ItemListCode).Hidden(true).ClientTemplate("#= ItemListCode #" +
                "<input type='hidden' name='MyLines[#= index(data)#].ItemListCode' value='#= ItemListCode #' />"
             );
             columns.Command(command =>
             {
                 command.Destroy();
             }).Width(200);
         })
    .DataSource(dataSource => dataSource.Ajax()
         .Model(m =>
         {
             m.Id(p => p.ItemCode);
             m.Field(p => p.ItemCode).Editable(false);
             m.Field(p => p.Description).Editable(false);
             m.Field(p => p.UoM).Editable(false);
             m.Field(p => p.QtyCC).Editable(true);
             m.Field(p => p.QtyEmployee).Editable(true);
             m.Field(p => p.ItemListLineID).Editable(false);
             m.Field(p => p.ItemListCode).Editable(false);
         })
         .Batch(true)
         .ServerOperation(false)
         //these are dummy action methods that don't really exist.
         .Update("upd", "upd") 
         .Destroy("del", "del")
         .Create("cre", "cre")
    )
    .Navigatable()
)

Hier ist die "index" - Funktion:

function index(dataItem) {
    var data = $("#RequestLinesGrid").data("kendoGrid").dataSource.data();

    return data.indexOf(dataItem);
}

Hi Shawn, Ihre Lösung wird von der post wieder alle Zeilen des Rasters, ist es eine Möglichkeit, ändern Sie Ihre Erklärung nur post geändert Zeilen?
Nope, müsste man überprüfen, für geänderte Zeilen in der controller-action-Methode.
Wo sind Sie zu bekommen-Index aus? Ich bin immer ein Fehler auf?
Ich habe die index-Funktion auf meine Antwort
Erstmal, Super Antwort. Dies hat mir geholfen, enorm. Zweitens, für alle, die kommen über diese Antwort und Frage mich, was "MyLines" ist.. Es ist der name der Sammlung/Aufzählbare/Auflisten auf Ihre Eltern view-Modell. Seine wohl auf der Hand, um Sie Veteranen, aber es dauerte eine minute oder 2, um herauszufinden, während des Debuggens. Danke Shawn!

InformationsquelleAutor Shawn de Wet

So, hier ist Teil einer Lösung für Ihre Frage. Ich streckte die kendo-Datenquelle, so können Sie diese Funktion aufrufen und erhalten Sie alle aktualisiert, gelöscht, erstellt, die Elemente aus. Schalten Sie es in json und senden Sie es zurück mit dem restlichen Formularfelder. Ich habe diese Arbeit jetzt. Dachte, ich würde teilen.

kendo.data.DataSource.prototype.GetUnsavedData = function () {
    var that = this,
        idx,
        length,
        created = [],
        updated = [],
        destroyed = that._destroyed,
    allRows = [],
        data = that._flatData(that._data);

    for (idx = 0, length = data.length; idx < length; idx++) {
        if (data[idx].isNew()) {
            created.push(data[idx]);
        } else if (data[idx].dirty) {
            updated.push(data[idx]);
        }
    }

    allRows = created.concat(updated).concat(destroyed);
    var allRowsJSON = JSON.stringify(allRows);
    return allRowsJSON;
}

InformationsquelleAutor

Inspiriert wurde ich dazu von codebeastie und @user1878526 um die folgende hybrid-Idee - einfach Rückkehr das raster als eine Liste von strings an den controller speichern Aktion:

Controller:

Function Save(ThisForum As myModel, gridData As List(Of String)) As ActionResult

Anzeigen:

$("#myForm").submit(function (event) {
            var grid = $("#myGrid").data("kendoGrid");
            var data = grid.dataSource.view();
            var input;
            for (var i = 0; i < data.length; i++) {
                var s = JSON.stringify(data[i]).replace(/["']/g, "");
                input = $("<input>", { type: 'hidden', name: 'data[' + i + ']', value: s });
                $(this).append($(input));
            }
        })

Diese können dann analysiert werden, in der Steuerung relativ einfach durch 'Split' Ing auf Kommas und Doppelpunkte.

InformationsquelleAutor Richard Freeman

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.