This is a migrated thread and some comments may be shown as answers.

Button click on detail template is not firing (button on child grid in hierarchical grid)

2 Answers 24 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DHHS
Top achievements
Rank 1
DHHS asked on 12 Jun 2015, 05:08 PM
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>

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 15 Jun 2015, 10:59 AM

Hello DHHS,

I covered the question in the other thread on the same topic. Please avoid posting the same multiple threads.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
DHHS
Top achievements
Rank 1
answered on 17 Jun 2015, 07:31 PM

Hi Dimiter,

 

Sorry about that. I couldnt find the post, so i thought i lost it and so reposted. Thanks for the reply.

 

Thanks,

Veena

Tags
Grid
Asked by
DHHS
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
DHHS
Top achievements
Rank 1
Share this question
or