I have a hierarchical grid, on main grid i have a button on the top of the grid using toolbar template on click it opens the kendo window. This works perfectly fine. On the child grid I have to have the same functionality, where I have a button on the top of the child grid, On click of the button it should show the kendo window. But the button click on the child grid is not firing. Below is the code.
//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
>