Button Click Event inside kendo-template never hit

[Genadij]

Hi,

I cannot get Click event on button inside <script type="text/x-kendo-template"> .

My code:

    <script type="text/x-kendo-template" id="template-sub">
        <div id="details-container-sub"  class="details-container">
            <table id="datails-sub-table" class="datails-table">
                <tr >
                    <th>Parameter</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td align="right">Connected By:</td>
                    <td>#= ConnectedBy #</td>
                </tr>
                <tr>
                    <td align="right">Connected On: </td>
                    <td>#= ConnectedOn #</td>
                </tr>
            </table>
            <div>
                <button id="btnClose" class="k-button close-button">Close</button>
            </div>
       </div>
    </script>

    @(Html.Kendo().Window().Name("Details")
        .Visible(false)
        .Modal(true)
        .Draggable(true)
        .Width(450)
    )

<script>

    function showDetails(e) {
        e.preventDefault();
        var wnd = $("#Details").data("kendoWindow");
        var treeItem = $("#ddlSubs").data("kendoTreeList").dataItem($(e.currentTarget).closest("tr"));
        switch (treeItem.Type) {
            case "sub":
                wnd.title("Subscription Details");
                wnd.content(kendo.template($("#template-sub").html())(treeItem));
                wnd.center().open();

               break;

             [.... more cases...]

        }

    }

    $(document).ready(function () {
       $('#Details').data("kendoWindow").bind('refresh', function (e) {
            var wnd = $("#Details").data("kendoWindow");
            $('#btnClose').click(function () {
                wnd.close();
            });
        });

    });

</script>

What is wrong?

Thank you in advance.

[Boyan Dimitrov]

Hello Genadij Zavrid,

The problem with the provided code is that the refresh event of the Kendo UI Window is not fired and the code inside the handler is never executed. My suggestion is to change the code as shown below and it should work fine: 

<script>
    $(document).ready(function () {
        var wnd = $("#Details").data("kendoWindow");
        $("#Details").data("kendoWindow").element.on("click", "#btnClose", function () {
            wnd.close();
        });
    });
</script>

Regards,
Boyan Dimitrov
Telerik by Progress

[Genadij]

Dear Boyan Dimitrov,

The code you provided doesn't help to catch Close button event and close the window.

Kind regards

 

[Boyan Dimitrov]

Hello,

I added the close button to the window template and the logic for binding to the click handler in our Grid / Custom command demo and it works fine. 

Please refer to the entire demo code and my modifications below: 

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(e => e.FirstName);
        columns.Bound(e => e.LastName);
        columns.Bound(e => e.Title);
        columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("CustomCommand_Read", "Grid"))
     )
)

@(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">
        <h2>#= FirstName # #= LastName #</h2>
        <em>#= Title #</em>
        <dl>
            <dt>City: #= City #</dt>
            <dt>Address: #= Address #</dt>
        </dl>
    </div>
     <div>
         <button id="btnClose" class="k-button close-button">Close</button>
     </div>
</script>

<script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());

    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }
</script>

<script>
    $(document).ready(function () {
        var wnd = $("#Details").data("kendoWindow");
        $("#Details").data("kendoWindow").element.on("click", "#btnClose", function () {
            wnd.close();
        });
    });
</script>

Clicking on the close button at the bottom of the window closes the entire window. 

Regards,
Boyan Dimitrov
Telerik by Progress