2012-11-15 23 views
5

अद्यतन मैंने मूल्यों और संपादक टेम्पलेट्स के साथ फ़ॉर्म प्रतिपादन (छवि देखें) प्राप्त करने में कामयाब रहे हैं।संपादन योग्य विस्तार टेम्पलेट केंडो यूआई ग्रिड

Sorry for blacked out labels. NDA stuff. ब्लैक आउट लेबल के लिए खेद है। एनडीए आवश्यकताओं ...

यह अब अनेक पंक्तियों में काम करता है, क्योंकि मैं पंक्ति के uid उपयोग कर रहा हूँ विस्तार टेम्पलेट का एक अलग नाम यह कर देने के लिए:

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

मैं स्रोत के लिए नीचे नवीनीकृत किया है नवीनतम संस्करण और उन मुद्दों की एक सूची शामिल की है जिन्हें मैं अभी भी सहायता से प्यार करूंगा।

बकाया मुद्दों:

  • ग्रिड जब मैं बचाने
  • असाइन लेबल और सत्यापन नियमों देखें मॉडल पर डेटा एनोटेशन का उपयोग कर (यह बाद से मैं काम करने के लिए प्रतीत नहीं होता है में परिवर्तन के साथ साथ विस्तार टेम्पलेट Serializing एचटीएमएल सहायकों काम करना आरंभ नहीं कर पा रहे। सलाह बहुत अच्छा होगा!

Orignal पोस्ट पाठ (स्रोत कोड अद्यतन किया गया है)

मैं बैच ग्रिड बनाने की कोशिश कर रहा हूं जहां प्रत्येक आइटम में एक विस्तृत टेम्पलेट होता है।

प्रत्येक विवरण टेम्पलेट में एक टैबस्ट्रिप होता है जिसमें मैं अतिरिक्त फॉर्म डेटा रखना चाहता हूं।

अभी, मैं मानक बैच ग्रिड काम कर रहे है, लेकिन मैं प्रत्येक आइटम के लिए स्क्रीन पर जानकारी प्राप्त नहीं कर पा रहे हैं और यह संपादित किए जा सकते है। साथ ही, एक से अधिक पंक्ति मौजूद होने पर विस्तार टेम्पलेट टूट जाता है। टेम्पलेट अभी भी प्रस्तुत करता है, लेकिन बटन गैर-कार्यात्मक हैं क्योंकि दोनों टेम्पलेट्स में एक ही आईडी है जो उपयोगकर्ता की बातचीत करने की क्षमता को समझने में टूटती है, लेकिन मुझे यकीन है कि प्रत्येक पंक्ति टेम्पलेट के लिए अद्वितीय पहचानकर्ताओं को कैसे सुनिश्चित किया जाए (शायद किसी भी तरह माता-पिता का उपयोग करें?)

मुझे यह पहला नियम पूरा करने के बाद इस फ़ॉर्म डेटा को क्रमबद्ध करने के बारे में भी अनिश्चितता है, लेकिन मैं इसके लिए एक अलग सवाल कर सकता हूं जिसके लिए यह आवश्यक साबित होना चाहिए।

ग्रिड

@(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")) 
) 

)

विस्तार खाका

<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() 
) 

उत्तर

0
  1. आप अपने अतिरिक्त जानकारी के लिए एक मॉडल बना सकते हैं और इस तरह से अपनी ItemModelList की संपत्ति के रूप में जोड़ना चाहिए: अपने दूसरे टैब में

    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. अपने विस्तार अतिरिक्त जानकारी के लिए एक आंशिक दृश्य बनाएँ, एक केन्डो ग्रिड का उपयोग कर:

    @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. अपने मुख्य दृश्य पृष्ठ में, ग्राहक विवरण टेम्पलेट के बजाय सर्वर विवरण टेम्पलेट का उपयोग करके। मैं क्योंकि मैं बेशक कदम 2 में बाध्यकारी सर्वर का उपयोग कर रहा सर्वर टेम्पलेट का उपयोग करने का सुझाव देते हैं, तो आप के लिए बाध्यकारी या स्थानीय बंधन (घटना OnDetailExpand को परिभाषित करते हुए) अजाक्स के

    @Html.Kendo().Grid(Model.ItemModelList) 
        ... 
        .DetailTemplate(@<text> 
         @Html.Partial("YourPartialName", item.ExtraInfo) // item stands for ItemModelList, which is the binding data item. 
        </text>) 
    
  4. और पिछले एक, इसे बदल सकते हैं आपका पहला मुद्दा, सहेजने पर अतिरिक्त जानकारी डेटा को क्रमबद्ध करना, हमें डेटा डेटा आइटम पर मूल्य और गंदे ध्वज सेट करने के लिए प्रत्येक अतिरिक्त जानकारी संपत्ति के परिवर्तन ईवेंट को संभालना चाहिए। याद रखें कि बैच संपादन में केंडो ग्रिड केवल गंदे डेटा आइटम सबमिट करता है। कदम वापस 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> 
    

    और बचाने कार्रवाई सामान्य रूप में काम करेंगे।

संबंधित मुद्दे