jak tworzyć niestandardowe kendo.ui.Window do edycji w kendo.ui.grid

Question

jestem rozrusznik w kendo.Ui, piszę ten kod do tworzenia siatki

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

       ) 
) 

chcę i kiedy użytkownik kliknie w Edit przycisk otwarty Edit view w kendo okna i napisać ten kod

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

i kod skryptu Java:

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

to c Ode praca w porządku po raz pierwszy I kliknij na przycisk, ale gdy klikam drugi time.I napotkał następujący błąd

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

proszę mi pomóc, dzięki wszystkim

Answer 1

Pamiętam, miałem podobny problem z tą kontrolą. Teraz działa dla mnie z następującym kodem 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> 

Mam nadzieję, że pomoże!

Answer 2

Problem polega na tym, że domyślnie okno zostanie zniszczone (usunięte z DOM) przy zamknięciu. Sugerowałbym usunięcie "nieokreślonego" warunku dodanego w poniższym przykładzie, a zamiast tego nie tworzyłem elementu "Szczegóły" w pierwszej kolejności.

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