how to create custom kendo.ui.Window for edit in kendo.ui.grid
I'm starter in kendo.Ui , i write this code for create grid
@(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))
)
)
i want when user click in Edit button open Edit view in kendo window i write this 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>
and 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>
this code work fine For the first time I click on a button,But when I click a second time.I encountered the following error
0x800a138f - JavaScript runtime error: Unable to get property 'refresh' of undefined or null reference
please help me, thanks all
I remember I had a similar issue with this control. Now it works for me with the following 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>
Hope it helps !
The problem is that, by default, the window will be destroyed (removed from the DOM) on closure. I would suggest removing the "undefined" condition i added in the example below and, instead, dont create the "Details" div in the first place.
<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>