wie in benutzerdefinierter kendo.ui.Window für bearbeiten erstellen kendo.ui.grid

Question

Ich bin Starter in kendo.Ui, schreibe ich diesen Code für das Netz

erstellen

@(Html.Kendo().Grid<BrandViewModel>(Model) 
    .Name("Grid") 
    .Columns(columns => 
    { 
     columns.Bound(p => p.BrandName); 
     columns.Bound(p => p.BrandAbbr); 
     columns.Bound(p => p.SrcImage); 

     columns.Command(command => command.Custom("Edit").Click("editItem")); 

    }) 

    .DataSource(dataSource => dataSource 
     .Ajax() 
     .Read(read => read.Action("CustomCommand_Read", "Brand")) 
     .Model(model => model.Id(p => p.Id)) 

       ) 
) 

ich will, wenn Benutzer klicken Sie in Edit Taste öffnen Edit view in Kendo Fenster schreiben ich diesen Code

@(Html.Kendo().Window().Name("Details") 
    .Title("Customer Details") 
    .Visible(false) 
    .Modal(true) 
    .Draggable(true) 

    .Width(300) 
) 



<script type="text/x-kendo-template" id="template"> 
    <div id="details-container"> <!-- this will be the content of the popup --> 
     BrandName: <input type='text' value='#= BrandName #' /> 

    </div> 
</script> 

und Java-Script-Code:

<script type="text/javascript"> 
    var detailsTemplate = kendo.template($("#template").html()); 

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

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

     $("#Details").data("kendoWindow").refresh({ 
      url: "/Brand/Edit/" + dataItem.Id 
     }); 
     $("#Details").data("kendoWindow").open(); 



    } 
</script> 

dieses c ode funktionieren Zum ersten Mal, wenn ich auf einen Knopf klicken, aber wenn ich

0x800a138f - JavaScript runtime error: Unable to get property 'refresh' of undefined or null reference 

mir bitte eine zweite time.I angetroffen klicken Sie auf den folgenden Fehler helfen, bedankt sich bei allen

Answer 1

Ich erinnere mich, ich hatte ein ähnliches Problem mit dieser Kontrolle. Jetzt funktioniert es für mich mit dem folgenden Javascript-Code:

<script type="text/javascript"> 
    var detailsTemplate = kendo.template($("#template").html()); 
    var windowObject; 

    $(document).ready(function() { 
     windowObject = $("#Details").data("kendoWindow"); 
    }); 

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

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

     windowObject.refresh({ 
      url: "/Brand/Edit/" + dataItem.Id 
     }); 
     windowObject.open(); 
    } 
</script> 

Hoffe, es hilft!

Answer 2

Das Problem ist, dass das Fenster standardmäßig beim Schließen zerstört (aus dem DOM entfernt) wird. Ich würde vorschlagen, die "undefined" Bedingung zu entfernen, die ich in dem Beispiel unten hinzufügte und stattdessen das "Details" div an erster Stelle nicht verursache.

<script type="text/javascript"> 
    var detailsTemplate = kendo.template($("#template").html()); 

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

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

     if($("#Details") == undefined) 
      $("body").append("<div id=\"Details\"></div> 

     $("#Details").data("kendoWindow").refresh({ 
      url: "/Brand/Edit/" + dataItem.Id 
     }); 
     $("#Details").data("kendoWindow").open(); 



    } 
</script>