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

Button Click Event inside kendo-template never hit

3 Answers 342 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Genadij
Top achievements
Rank 1
Genadij asked on 02 Apr 2017, 01:44 PM

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.

3 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 04 Apr 2017, 03:34 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Genadij
Top achievements
Rank 1
answered on 10 Apr 2017, 08:03 AM

Dear Boyan Dimitrov,

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

Kind regards

 

0
Boyan Dimitrov
Telerik team
answered on 12 Apr 2017, 07:34 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TreeList
Asked by
Genadij
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Genadij
Top achievements
Rank 1
Share this question
or