come creare kendo.ui.Window personalizzato per modificare in kendo.ui.grid

Question

Sono avviamento in kendo.Ui, scrivo questo codice per creare griglia

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

       ) 
) 

voglio quando l'utente clicca in Edit pulsante di apertura Edit view nella finestra di kendo scrivo questo codice

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

e il codice java script:

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

questo c ode bel lavoro per la prima volta ho cliccare su un pulsante, ma quando clicco un secondo time.I rilevato il seguente errore

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

please help me, ringrazia tutti

Answer 1

Mi ricordo che ho avuto un problema simile con questo controllo. Ora funziona per me con il seguente codice Javascript:

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

Spero che aiuti!

Answer 2

Il problema è che, per impostazione predefinita, la finestra verrà distrutta (rimossa dal DOM) alla chiusura. Vorrei suggerire di rimuovere la condizione "indefinita" che ho aggiunto nell'esempio qui sotto e, invece, non creare il div "Dettagli" in primo luogo.

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