2012-11-15 10 views
5

Update Ich habe es geschafft, das Formular-Rendering (siehe Bild) mit Werten und Editor-Vorlagen zu bekommen.Editierbare Detailvorlage Kendo UI Gitter

Sorry for blacked out labels. NDA stuff. Entschuldigung für geschwärzte Etiketten. NDA Anforderungen ...

Dies nun über mehrere Zeilen funktioniert, weil ich die uid der Reihe bin mit dem Detail-Vorlage einen eindeutigen Namen zu geben, dies zu tun:

@(Html.Kendo().TabStrip() 
    .Name("Details_#=uid#") 

Ich habe die Quelle aktualisiert unten an die neueste Version und habe eine Liste von Problemen enthalten, mit denen ich immer noch gerne Hilfe hätte.

Offene Fragen:

  • Serialisierung der Detailvorlage zusammen mit dem Netz, wenn ich Änderungen speichern
  • zuordnen Etikett und Validierungsregeln mit Hilfe von Data Annotations auf dem View-Modell (Dies scheint nicht, da ich zur Arbeit kann nicht scheinen, Html Helfer arbeiten zu bekommen. Tipps wäre toll!

Orignal Beitrag Text (Quelltext aktualisiert wurde)

Ich versuche ein Stapelraster zu erstellen, in dem jedes Element eine Detailvorlage enthält.

Jede Detailvorlage enthält eine Registerkarte, in der ich zusätzliche Formulardaten speichern möchte.

Im Moment habe ich die Standard-Batch-Raster arbeiten, aber ich kann nicht scheinen, um die Informationen auf dem Bildschirm für jedes Element zu bekommen und es bearbeitbar zu haben. Außerdem bricht die Detailvorlage ab, wenn mehr als eine Zeile vorhanden ist. Die Vorlage wird zwar gerendert, aber Schaltflächen sind nicht funktionsfähig, da beide Vorlagen dieselbe ID haben, die die Interaktion des Benutzers beeinträchtigt. Ich bin mir jedoch nicht sicher, wie eindeutige Kennungen für jede Zeilenvorlage sichergestellt werden können.

Ich bin auch nicht sicher, wie diese Formulardaten zu serialisieren, nachdem ich diesen ersten Schritt abgeschlossen habe, aber ich kann eine separate Frage für das, sollte es sich als notwendig erweisen.

Grid

@(Html.Kendo().Grid(Model.ItemModelList) 
.Name("ItemGrid") 
.Columns(columns => 
{ 
    //Other columns omitted for brevity 
    columns.Bound(i => i.Description).Width(100); 
    columns.Command(command => 
    { 
     command.Destroy(); 
    }).Width(60); 
}) 
.ClientDetailTemplateId("ItemDetails") 
.ToolBar(toolbar => 
{ 
    toolbar.Create(); 
    toolbar.Save(); 
}) 
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom)) 
.Pageable() 
.Sortable() 
.Scrollable() 
.Resizable(resize => resize.Columns(true)) 
.DataSource(dataSource => dataSource 
    .Ajax() 
    .Batch(true) 
    .ServerOperation(false) 
    .Events(events => 
    { 
     events.Error("ItemGrid_ErrorHandler"); 
    }) 
    .Model(model => 
    { 
     model.Id(i => i.ItemModelID); 
     model.Field(i => i.DimensionUOM).DefaultValue("in"); 
     model.Field(i => i.WeightUOM).DefaultValue("lbs"); 
    }) 
    .Create(create => create.Action("CreateProducts", "ItemGrid")) 
    .Read(read => read.Action("GetProducts", "ItemGrid")) 
    .Update(update => update.Action("UpdateProducts", "ItemGrid")) 
    .Destroy(destroy => destroy.Action("DeleteProducts", "ItemGrid")) 
) 

)

Detailvorlage

<script id="ItemDetails" type="text/kendo-tmpl"> 

@(Html.Kendo().TabStrip() 
    .Name("Details_#=uid#") 
    .SelectedIndex(0) 
    .Items(items => 
    { 
     items.Add().Text("test").Content(@<div>  
      <table id="testForm"> 
       <tr> 
        <td>TEST</td> 
       </tr> 
       <tr> 
       </tr> 
      </table> 
     </div>); 

     items.Add().Text("test2").Content(@<div>  
      <table id="test2Form"> 
       <tr> 
        <td><label>A</label></td> 
        <td><label>B</label></td> 
        <td><label>C</label></td> 
        <td><label>D</label></td> 
        <td><label>E</label></td> 
       </tr> 
       <tr> 
        <td> 
         <input class="k-textbox" value="#=objectA#"> 
        </td> 
        <td> 
         @(Html.Kendo().DropDownList() 
          .Name("objectB") 
          .Value("#=objectB#") 
          .DataTextField("Text") 
          .DataValueField("Value") 
          .BindTo(new SelectList((System.Collections.IEnumerable)ViewBag.objectBListing, "Value", "Value")) 
          .ToClientTemplate() 
         ) 
        </td> 
        <td> 
         @(Html.Kendo().DropDownList() 
          .Name("objectC") 
          .Value("#=objectC#") 
          .DataTextField("Text") 
          .DataValueField("Value") 
          .BindTo(new SelectList((System.Collections.IEnumerable)ViewBag.objectCListing, "Value", "Value")) 
          .ToClientTemplate() 
         ) 
        </td> 
        <td><input class="k-textbox" value="#=objectD#"></td> 
        <td><input class="k-textbox" value="#=objectE#"></td> 
       </tr> 
      </table> 
     </div>); 
    }) 
    .ToClientTemplate() 
) 

Antwort

0
  1. Sie sollten ein Modell für Ihre persönlichen Informationen erstellen und sie als Eigentum Ihrer ItemModelList wie folgt hinzu:

    public class BaseMode 
    { 
        public string UID { get; set; } // Create your own UID, distinguished from Telerik UID by casing. 
    } 
    
    public class ExtraInfoModel : BaseModel 
    { 
        [DisplayName("Object A")] 
        [Required] // For example 
        public string ObjectA { get; set; } 
    
        [DisplayName("Object B")] 
        [UIHint("DropDownList")] 
        public int? ObjectB { get; set; } 
    
        [DisplayName("Object C")] 
        public int? ObjectC { get; set; } 
    
        public ExtraInfoModel(string uid) 
        { 
         this.UID = uid; 
        } 
    } 
    
    public class ItemModelList : BaseModel 
    { 
        public ExtraInfoModel ExtraInfo { get; set; } 
    
        public ItemModelList() 
        { 
         this.UID = Guid.NewGuid().ToString(); // Not sure about syntax, please review. 
         this.ExtraInfo = new ExtraInfoModel(this.UID); // Guarantee ExtraInfo.UID is the same as parent UID when you get model from DB. 
        } 
    } 
    
  2. eine Teilansicht zusätzliche Informationen für Ihre Detail erstellen einen Kendo Raster in Ihrem zweiten Reiter:

    @model ExtraInfoModel 
    
    @(Html.Kendo().TabStrip() 
        .Name("Details_#=UID#") 
        .SelectedIndex(0) 
        .Items(items => 
        { 
         items.Add().Text("test").Content(@<text> 
          <div>  
           <table id="testForm"> 
            <tr> 
             <td>TEST</td> 
            </tr> 
            <tr></tr> 
           </table> 
          </div> 
         </text>); 
    
         items.Add().Text("test2").Content(@<text> 
          @(Html.Kendo().Grid<ExtraInfoModel>() 
           .Name("gvDetail_#=UID#") 
           .Columns(c => 
           { 
            c.Bound(m => m.ObjectA).ClientTemplate(Html.Kendo().TextBox() 
             .Name("ObjectA") 
             .HtmlAttributes(new { id = "ObjectA_#=UID#" }) 
             .Value(Model.AgencyCode) 
             .ToClientTemplate() 
             .ToHtmlString()); 
            c.Bound(m => m.ObjectB).ClientTemplate(Html.Kendo().DropDownList() 
             .Name("ObjectB") 
             .HtmlAttributes(new { id = "ObjectB_#=UID#" }) 
             .Value((Model != null && Model.ObjectB.HasValue) ? Model.ObjectB.ToString() : string.Empty) 
             .OptionLabel("Select B...") 
             .BindTo(ViewBag.Data) 
             .ToClientTemplate() 
             .ToHtmlString()); 
    
            // Config ObjectC same as ObjectB. 
           }) 
           .BindTo(new ExtraInfoModel[] { Model }) // Your detail grid has only one row. 
          ) 
         </text>); 
        }) 
    ) 
    
  3. Verwenden Sie in Ihrer Hauptansichtsseite die Serverdetailvorlage anstelle der Clientdetailvorlage. Ich schlage vor, Server-Vorlage zu verwenden, weil ich Server in Schritt Bindung bin mit 2. Natürlich können Sie es ändern Bindung oder lokale Bindung Ajax (von Ereignisse OnDetailExpand definieren)

    @Html.Kendo().Grid(Model.ItemModelList) 
        ... 
        .DetailTemplate(@<text> 
         @Html.Partial("YourPartialName", item.ExtraInfo) // item stands for ItemModelList, which is the binding data item. 
        </text>) 
    
  4. Und die letzten, für Ihre erste Ausgabe, Serialisierung zusätzliche Info-Daten beim Speichern, sollten wir Änderungsereignis jeder zusätzlichen Info-Eigenschaft, um Wert und schmutzige Flag auf Master-Datenelement zu setzen. Denken Sie daran, dass das Kendo-Raster in der Stapelverarbeitung nur schmutzige Datenelemente übermittelt. Zurück zu Schritt 2:

        c.Bound(m => m.ObjectB).ClientTemplate(Html.Kendo().DropDownList() 
             .Name("ObjectB") 
             .HtmlAttributes(new { id = "ObjectB_#=UID#" }) 
             .Value((Model != null && Model.ObjectB.HasValue) ? Model.ObjectB.ToString() : string.Empty) 
             .OptionLabel("Select B...") 
             .BindTo(ViewBag.Data) 
             .Events(e => e.Change("onChangeObjectB")) // Added this line 
             .ToClientTemplate() 
             .ToHtmlString()); 
    
    <script type="text/javascript"> 
        function onChangeObjectB(e) { 
         var selectedValue = this.value(); 
    
         var sender = e.sender; 
         if (sender != undefined && sender.length > 0) { 
          var detailRow = sender.closest(".k-detail-row"); 
          var masterRow = detailRow.prev(); 
          var mainGrid = $("#ItemGrid").data("kendoGrid"); 
          if (mainGrid != null) { 
           var masterRowIndex = masterRow.parent().find(".k-master-row").index(masterRow); 
    
           var dataItem = mainGrid.dataSource._data[masterRowIndex]; 
           dataItem.ObjectB = selectedValue; 
           dataItem._dirty = true; 
          } 
         } 
        } 
    </script> 
    

    Und die Speicheraktion funktioniert wie gewohnt.