我有一个分层网格，在主网格上我在网格顶部有一个按钮，使用工具栏模板点击它打开了剑道窗口。这完全没问题。在子网格上我必须具有相同的功能，其中我在子网格顶部有一个按钮，单击按钮它应该显示kendo窗口。但是点击子网格上的按钮没有触发。以下是代码。
/My main grid
<div class="container-fluid">
<div class="row">
<div class="col-xs-18 col-md-12">
@(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Filterable(false).Width(50);
columns.Bound(p => p.ContractorType);
columns.Bound(p => p.BHSISNum);
columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ContractorIsAlsoRegion);
columns.Bound(p => p.ContractorName);
columns.Bound(p => p.AddressBkNum);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Selectable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))
)
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
<button class="k-button k-button-icontext k-grid-add k-primary" id="providerskendowindow">Add Providers</button>
</div>
</text>);
})
)
</div>
</div>
</div>
//my child grid
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
.Name("grid_#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.Id).Width(50);
columns.Bound(o => o.ServiceId);
columns.Bound(o => o.ServiceType);
columns.Bound(o => o.AdultChild);
columns.Bound(o => o.IFGSwitch);
columns.Bound(o => o.CodeModifier);
columns.Bound(o => o.ServiceModifier);
columns.Bound(o => o.StartDate).Format("{0:MM/dd/yyyy}");
columns.Bound(o => o.EndDate).Format("{0:MM/dd/yyyy}");
})
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
<button class="k-button k-button-icontext k-grid-add k-primary" id="serviceskendowindow">Add Services</button>
</div>
</text>);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
//Main grid button click window
@(Html.Kendo().Window()
.Name("providerwindow")
.Title("Add Business Units")
.Content(@<text><div class="container-fluid">
<div class="row">
<div class="col-xs-18 col-md-12">
@(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>()
.Name("grid1")
.Columns(columns =>
{
columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chk' onclick='SetCheckBOX()' />");
columns.Bound(p => p.Id).Filterable(false).Width(50);
columns.Bound(p => p.ContractorType);
columns.Bound(p => p.BHSISNum);
columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ContractorName);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.HtmlAttributes(new { style = "height:350px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))
)
)
<button class="k-button close-button k-primary" style="bottom: 10px; ">Cancel</button>
<button class="k-button k-primary" id="showSelection" style="bottom: 10px; ">Add</button>
</div>
</div>
</div></text>
)
.Draggable()
.Resizable()
.Width(800)
.Visible(false)
)
//Child grid button click kendo window
@(Html.Kendo().Window()
.Name("servicewindow")
.Title("Add Business Units")
.Content(@<text><div class="container-fluid">
<div class="row">
<div class="col-xs-18 col-md-12">
@(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
.Name("grid1")
.Columns(columns =>
{
columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chk' onclick='SetCheckBOX()' />");
columns.Bound(p => p.Id).Filterable(false).Width(50);
columns.Bound(p => p.ServiceId);
columns.Bound(p => p.ServiceType);
columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.AdultChild);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.HtmlAttributes(new { style = "height:350px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#" }))
)
)
<button class="k-button close-button k-primary" style="bottom: 10px; ">Cancel</button>
<button class="k-button k-primary" id="showSelection" style="bottom: 10px; ">Add</button>
</div>
</div>
</div></text>
)
.Draggable()
.Resizable()
.Width(800)
.Visible(false)
)
<script>
function additionalInfo() {
var contractId =@Html.Raw(Json.Encode(ViewBag.ContractService.Id));
return {
Id: contractId
}
}
$(document).ready(function(){
$("#providerskendowindow").click(function(){
alert("inside");
$("#providerwindow").data("kendoWindow").center().open();
});
$("#serviceskendowindow").click(function(){
alert("inside");
$("#servicewindow").data("kendoWindow").center().open();
});
});
$(".close-button").click(function(){
// call 'close' method on nearest kendoWindow
$(this).closest("[data-role=window]").kendoWindow("close");
});
</script>
答案 0 :(得分：0)
The reason might be that at the time you are binding the click event to your child window grid button, it does not exist in the DOM. Your child grid is defined inside a template that is dynamically built within your main grid as the page is rendered. You should change the syntax of your event binding to this:
$(document).on('click', '#serviceskendowindow', function() {
alert("inside");
$("#servicewindow").data("kendoWindow").center().open();
});