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

Custom Button Inside Grid Popup Template

8 Answers 480 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 17 Jun 2013, 09:49 AM
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?

8 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 17 Jun 2013, 11:04 AM
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
0
Keith
Top achievements
Rank 1
answered on 17 Jun 2013, 02:52 PM
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" }
0
Jayesh Goyani
Top achievements
Rank 2
answered on 18 Jun 2013, 06:18 AM
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
0
Jayesh Goyani
Top achievements
Rank 2
answered on 18 Jun 2013, 06:23 AM
Hello,

Below code is worked for jquery 1.9.0 version.
$("#Test").on("click", function(){
    alert("Clicked");
});


Thanks,
Jayesh Goyani
0
Keith
Top achievements
Rank 1
answered on 18 Jun 2013, 07:55 AM
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
0
Keith
Top achievements
Rank 1
answered on 19 Jun 2013, 08:14 AM
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,
0
Jayesh Goyani
Top achievements
Rank 2
answered on 19 Jun 2013, 10:55 AM
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
0
Accepted
Keith
Top achievements
Rank 1
answered on 19 Jun 2013, 02:29 PM
Perfect thanks.
Tags
Grid
Asked by
Keith
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Keith
Top achievements
Rank 1
Share this question
or