Custom Button Inside Grid Popup Template

[Keith]

Hi,

I'm using a grid with a custom popup template. I want to add a button to this template.  I then want to react to the click event of this button.

My template is:
<script id="popup_editor" type="text/x-kendo-template">        
        <div class="k-edit-label">
            <label for="SYSTEM_NAME">Name</label>
        </div>    
        <div data-container-for="SYSTEM_NAME" class="k-edit-field">
            <input type="text" class="k-input k-textbox" name="SYSTEM_NAME" required="required" data-bind="value: SYSTEM_NAME">
        </div> 
        <div>
            <button type="button" id="Test" class="k-button" onclick="test_fn()">Test</button>
        </div>
</script>    

And my JS
 $("#Test").click(function (e) {
        alert("clicked");
    });

The problem is that the Click event of the button is never received. If I move the button from the template and directly onto a page it works fine.  Am I missing something?

[Jayesh Goyani]

Hello,

Please try with below code snippet.

$('#Test').live("click", function (e) {
      alert("clicked");
  });

Full Demo code:

<script>
    var wnd, detailsTemplate;
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
                    dataType: "jsonp"
                },
                schema: {
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            Freight: { type: "number" },
                            ShipName: { type: "string" },
                            OrderDate: { type: "date" },
                            ShipCity: { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            height: 430,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [{
                field: "OrderID",
                filterable: false
            },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                width: 120,
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name",
                                width: 260
                            }, {
                                field: "ShipCity",
                                title: "Ship City",
                                width: 150
                            },
                            { command: { text: "View Details", click: showDetails }, title: " ", width: "140px" }
                        ]
        });

        wnd = $("#details")
                        .kendoWindow({
                            title: "Customer Details",
                            modal: true,
                            visible: false,
                            resizable: false,
                            width: 300
                        }).data("kendoWindow");

        detailsTemplate = kendo.template($("#popup_editor").html());

    });



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

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }

    $('#Test').live("click", function (e) {
        alert("clicked");
    });

</script>
<script id="popup_editor" type="text/x-kendo-template">
        <div class="k-edit-label">
            <label for="SYSTEM_NAME">Name</label>
        </div>
        <div data-container-for="SYSTEM_NAME" class="k-edit-field">
            <input type="text" class="k-input k-textbox" name="SYSTEM_NAME" required="required" data-bind="value: SYSTEM_NAME">
        </div>
        <div>
            <button type="button" id="Test" class="k-button">Test</button>
        </div>
</script>

<div id="grid">
</div>
<div id="details">
</div>

Thanks.
Jayesh Goyani

[Keith]

Hi Jayesh,

I'm using Jquery 1.9, .live() has been removed.   I have tried the following:

$('#Test').on("click", function (e) {
        alert("clicked");
    });

The click event is not raised when the button is part of the template. If I put the button the page outside the template the click works fine.

e.g.
<body>
<script id="popup_editor" type="text/x-kendo-template">
        <div>
        </div>
</script>
 <button type="button" id="Test" class="k-button">Test</button>              
<\body>


My code is slightly different to yours in that I am not using an explicit Kendo Window.

The editable property of my grid is set like:
editable: { "mode": "popup", "template": $("#popup_editor").html(), confirmation: "Are You Sure" }

[Jayesh Goyani]

Hello,

Other way to achieve this.

<script>
    var wnd, detailsTemplate;
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
                    dataType: "jsonp"
                },
                schema: {
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            Freight: { type: "number" },
                            ShipName: { type: "string" },
                            OrderDate: { type: "date" },
                            ShipCity: { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            height: 430,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [{
                field: "OrderID",
                filterable: false
            },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                width: 120,
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name",
                                width: 260
                            }, {
                                field: "ShipCity",
                                title: "Ship City",
                                width: 150
                            },
                            { command: { text: "View Details", click: showDetails }, title: " ", width: "140px" }
                        ]
        });

        wnd = $("#details")
                        .kendoWindow({
                            title: "Customer Details",
                            modal: true,
                            visible: false,
                            resizable: false,
                            width: 300
                        }).data("kendoWindow");

        detailsTemplate = kendo.template($("#popup_editor").html());

    });



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

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }

    function TestClick() {
        alert("clicked");
    };

</script>
<script id="popup_editor" type="text/x-kendo-template">
        <div class="k-edit-label">
            <label for="SYSTEM_NAME">Name</label>
        </div>
        <div data-container-for="SYSTEM_NAME" class="k-edit-field">
            <input type="text" class="k-input k-textbox" name="SYSTEM_NAME" required="required" data-bind="value: SYSTEM_NAME">
        </div>
        <div>
            <button type="button" id="Test" class="k-button" onclick="TestClick()">Test</button>
        </div>
</script>

Thanks,
Jayesh Goyani

[Jayesh Goyani]

Hello,

Below code is worked for jquery 1.9.0 version.

$("#Test").on("click", function(){
    alert("Clicked");
});

Thanks,
Jayesh Goyani

[Keith]

Hi Jayesh,

Using .On() doesn't work in my situation.  The onclick does work though.  I was wondering in a situation where I'm using a Grid with MVVM bindings and  a popup edit template to edit is it possible to find the current data in the popup window from the OnClick event of the test button?  

What I want is that when I edit a row in the grid and the edit popup loads that I have a button named Test which is clicked. The button then calls an Ajax web service to validate the data that has been input. This must happen before the OK or Cancel button is pressed.

thanks,
Keith

[Keith]

Is there anyway to determine the currently being edited row with it's updated values from the Grid with MVVM.  I mean if I select a row to edit which opens a popup and change some values. Is it possible to determine the current changed values of the row from inside a buttons click event?

I know I can probably parse the DOM to retrieve this information, but that is really against the spirit of MVVM,

[Jayesh Goyani]

Hello,

Please try with below code snippet.

<script>
    var wnd, detailsTemplate;
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
                    dataType: "jsonp"
                },
                schema: {
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            Freight: { type: "number" },
                            ShipName: { type: "string" },
                            OrderDate: { type: "date" },
                            ShipCity: { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            height: 430,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [{
                field: "OrderID",
                filterable: false
            },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                width: 120,
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name",
                                width: 260
                            }, {
                                field: "ShipCity",
                                title: "Ship City",
                                width: 150
                            },
                            { command: { text: "View Details", click: showDetails }, title: " ", width: "140px" }
                        ]
        });

        wnd = $("#details")
                        .kendoWindow({
                            title: "Customer Details",
                            modal: true,
                            visible: false,
                            resizable: false,
                            width: 300
                        }).data("kendoWindow");

        detailsTemplate = kendo.template($("#popup_editor").html());

    });



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

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }


    function TestClick(obj) {

        var grid = $("#grid").data("kendoGrid");

        for (var i = 0; i < grid.dataSource.data().length; i++) {
            if (parseInt(grid.dataSource.data()[i].OrderID) == parseInt($(obj).val())) {
                grid.dataSource.data()[i].ShipName = $("#txtTest").val();
            }
        }
        grid.refresh();
        wnd.close();
    }


</script>
<script id="popup_editor" type="text/x-kendo-template">
        <div class="k-edit-label">
            <label for="SYSTEM_NAME">ShipName</label>
        </div>
        <div data-container-for="SYSTEM_NAME" class="k-edit-field">
            <input id="txtTest" type="text" class="k-input k-textbox" name="SYSTEM_NAME" required="required" data-bind="value: SYSTEM_NAME">
        </div>
        <div>
            <button type="button" id="Test" class="k-button" value="${OrderID}" onclick="TestClick(this)">Test</button>
        </div>
</script>

Jayesh Goyani

[Keith]

Perfect thanks.