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

[DHHS]

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>

[Dimiter Madjarov]

Hello DHHS,

With the current implementation, the click handlers are attached only to elements existing on document.ready, which is the reason why the function is executed for the main Grid, but not for the child Grids which are appended dynamically to the DOM. You could change it like this.
E.g.

$("#grid").on("click", "#serviceskendowindow", function(){
    alert("inside");
    $("#servicewindow").data("kendoWindow").center().open();
});

Regards,
Dimiter Madjarov
Telerik

 

 

[DHHS]

Hi Dimiter,

 Thanks , the solution you gave worked.

I have grid on the kendowindow and would like to pass some parameters to the grid on kendo window on click of the add button on child grid. I would like to pass the parent Id of the child grid as parameter to grid on kendo window. I have tried something like this but it is getting the next row id.

//button click on child grid opens up kendo window

 $("#grid").on("click", "#serviceskendowindow", function(){
        var grid = $("#grid").data("kendoGrid");
        var row = grid.dataItem($(event.target).closest(".k-detail-row"));
        var row1 = grid.dataItem($(event.target).closest("tr"));
        alert(row.Id);
        alert(row1.Id);
        $("#servicewindow").data("kendoWindow").center().open();
        $('#grid2').data().kendoGrid.dataSource.read();
    });

Both alerts are showing up next row id 

 

 

 

Thanks,

Veena

[DHHS]

And one more thing, I am trying to add a delete button on child grid on each row. I have added custom command and added click event on that. It is firing the click event on child grid and after that is going to click event of the parent grid, even though i am not calling the parent grid click event anywhere.

 

Thanks,

Veena

[Dimiter Madjarov]

Hello DHHS,

I would suggest to name the custom command in the child Grid custom command different than the one in the master Grid in order to prevent the unwanted behavior.

Regarding the other issue, if I understand correctly, you want to get the parent item id. In this case you should retrieve the master row instead of the detail row.
E.g.

var row = grid.dataItem($(event.target).closest(".k-detail-row").prev(".k-master-row"));

Regards,
Dimiter Madjarov
Telerik

 

 

[DHHS]

Hi Dimiter,

 

The solutions you gave for both questions worked. Thanks a lot.

I am wondering, if i can keep the display name for custom command on both the grids same, even though the custom command names are different, just for display to user?

One more thing, when my kendo window shows up, still all the buttons on the main windows are clickable. When i see the demos, everything behind became grayed out. Did i miss something, I have tried everything.

 

Thanks,

Veena

[Dimiter Madjarov]

Hello DHHS,

Yes, the text of the command could be configured the following way:

command => command.Custom("ViewDetails").Click("showDetails").Text("Custom display text")

Regarding the second question, if you are referring to the following demo, the window is specified as modal, which dims the background.

@(Html.Kendo().Window().Name("Details")
   .Title("Customer Details")
   .Modal(true)

Regards,
Dimiter Madjarov
Telerik

 

 

[DHHS]

Hi Dimiter,

Thats works like perfect. Thank you.

I have one more issue which i am not able to figure from days. I have two grids each one on the two kendo windows on the click of two buttons in the hierarchical grid. I have check boxes on each grid. check box on the services grid is working but the check box on the providers grid is not working. It always returns false when checked or unchecked. I believe it is the issue of the window where the grid lies, when i moved the checkbox from providers grid to services grid and it works perfectly fine.

 

//Hierarchical grid, master 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);
            columns.Command(command => command.Custom("Remove").SendDataKeys(true).Click("deleteClick").Text("Delete"));

        })
        .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>

//Hierarchical 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.Qualifier);
                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}");
                columns.Command(command => command.Custom("Delete").SendDataKeys(true).Click("deleteClickServices"));
            })
             .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>
            <button class="k-button" id="btnAddText"  style="float:right"> Add Note </button>
        </div>
    </text>);
})
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                                      .Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#", contractId = ViewBag.ContractService.Id }))
                    )


                    .Pageable()
                    .Sortable()
                    .ToClientTemplate()

    )
</script>


//Provider Grid on Provider window

@(Html.Kendo().Window()
    .Name("providerwindow")
    .Title("Add Providers")
          .Modal(true)
    .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("gridProvidersWindow")
        .Columns(columns =>
        {
            //check box that does not work on this grid. but when i move this check box to services grid it works perfectly fine
            columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chkBoxProviders' onclick='SetCheckBoxProviders()' />");
            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("GetAllContractors_Read", "Contract").Data("additionalInfo"))
                )
                    )
                    <button class="k-button close-button k-primary" style="bottom: 10px; ">Cancel</button>
                    <button class="k-button k-primary" id="addSelectedProviders" style="bottom: 10px; ">Add</button>
                </div>

            </div>


        </div></text>
            )
            .Draggable()
    .Resizable()
    .Width(800)

    .Visible(false)
)

//Services Grid on Services Window

@(Html.Kendo().Window()
    .Name("servicewindow")
    .Title("Add Services")
        .Modal(true)
    .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("gridServicesWindow")
        .Columns(columns =>
        {
//check box that is working perfectly fine on services grid
            columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chkBoxServices' onclick='SetCheckBoxServices()' />");
            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()
                        .AutoBind(false)
                .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
                .HtmlAttributes(new { style = "height:350px;" })
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                        .Read(read => read.Action("GetAllServices_Read", "Contract").Data("additionalInfoAddServices"))
                )
                    )
                    <button class="k-button close-buttonservices k-primary" style="bottom: 10px; ">Cancel</button>
                    <button class="k-button k-primary" id="addSelectedServices" style="bottom: 10px; ">Add</button>
                </div>

            </div>


        </div></text>
            )
            .Draggable()
    .Resizable()
    .Width(800)

    .Visible(false)

)

//Opens up the Services window on click of a button on child grid

    $("#grid").on("click", "#serviceskendowindow", function(){
        $("#servicewindow").data("kendoWindow").center().open();
        var grid = $("#grid").data("kendoGrid");
        var row= grid.dataItem($(event.target).closest(".k-detail-row").prev(".k-master-row"));
        addSelectedContractorService = row.Id;
        $('#gridServicesWindow').data().kendoGrid.dataSource.read();
    });

//Opens up providers windows on click of button on master grid

    $(document).ready(function(){
        $("#providerskendowindow").click(function(){
            $("#providerwindow").data("kendoWindow").center().open();
            $('#gridProvidersWindow').data().kendoGrid.dataSource.read();
        });
    });

    function additionalInfo() {
        var contractId =@Html.Raw(Json.Encode(ViewBag.ContractService.Id));
        return {
            Id: contractId
        }
    }
    function additionalInfoAddServices(){
        var contractId =@Html.Raw(Json.Encode(ViewBag.ContractService.Id));
        var grid = $("#grid").data("kendoGrid");
        var row= grid.dataItem($(event.target).closest(".k-detail-row").prev(".k-master-row"));

        if(Object.keys(row).length===0){
            return {
                Id: contractId,
                contractorId : 0
            }
        }
        else{
            return {
                Id: contractId,
                contractorId : row.Id
            }
        }
    }

//On click of check box on providers grid on providers window

   function SetCheckBoxProviders()
    {
        var checked = false;
//this is always false.
        alert(document.getElementById('chkBoxProviders').checked);
        if (document.getElementById('chkBoxProviders').checked){
            alert("inside if");
            checked = true;
        }
    }

//On click of checkbox on services grid on services window

    function SetCheckBoxServices()
    {
        var checked = false;
//this works fine
        alert(document.getElementById('chkBoxServices').checked);
        if (document.getElementById('chkBoxServices').checked){
            checked = true;
        }
    }

[Dimiter Madjarov]

Hello DHHS,

It is not completely clear for us what could be causing the problem. Nevertheless I would suggest to remove the id attribute from the checkboxes, as it should be unique for the whole page, which is not the current case. If the issue is still reproducing, please demonstrate it in small isolated runnable example so we could inspect it locally.

Regards,
Dimiter Madjarov
Telerik

 

 

[DHHS]

Hi Dimiter, 

To your solution, I need the Id for the checkbox because i need to find if the checkbox is checked when checkbox clicked. I have written code onclick of checkbox in which it checks if the checkbox is checked using the id of the checkbox. I have tried removing the checkbox on services and just keeping checkbox on providers its self but still it is not working as expected, it is always false.

 

I have created separate project and tried to replicate the same issue(I just copy pasted the necessary code from my project ). To my surprise it worked as expected. I have done the same things in my project by commenting out all the other stuff and tried but still I am getting the same issue. Can you please let me know if you think of any thing i missed that my affect the checkbox result. I feel like i am out of options. :(

I have attached the newly created project files(Just view, controller and model folders, since whole project is exceeding 2mb. I have created the grid on contact page) 

steps to follow:

Click on Add Providers button - kendo window should show up with providers grid on it

click on checkbox on the window - alert true should show up (in my project it is always false- only this checkbox has issue on this window, but when i move this checkbox to services window it works perfectly)

 close the kendo window and open detail template - You should see the list of services attached for that providers

Click on Add Services button - kendo window should show up with services grid on it.

click on checkbox on the window - alert true should show up (in my project it is true which is expected)

 

Any ideas would be appreciated. I have been working on this issue for way longer and i feel like i have thought of all the things i might have missed. :(

[Dimiter Madjarov]

Hello DHHS,

The provided code is not a runnable project, so we cannot see the issue in action. Nevertheless, as stated in the previous reply, the id of the checkbox should be removed. An id is unique for the whole page. You could assure this here.

Since the current topic got shifted away from the initial problem of this forum thread, I would suggest to open a separate support ticket, which will allow uploading 20 MB project, which should be sufficient to demonstrate the case.

Regards,
Dimiter Madjarov
Telerik

 

 

[DHHS]

Hi Dimiter, 

 

sure i will raise a support ticket. Thanks for the help. 

 If i remove the id of the checkbox how can i check if the checkboc is checked when it is clicked?

 Thanks,

veena

[Dimiter Madjarov]

Hello DHHS,

I would attach the click handler via jQuery through the checkboxes CSS class and use the is(":checked") method.
E.g.

$("#gridID").on("click", ".checkbox", function (e) {
    var checked = $(this).is(":checked");
});

Regards,
Dimiter Madjarov
Telerik

 

 

[DHHS]

Hi Dimiter,

 

Thanks a lot for all your answers. 

 

Thanks,

veena