Jquery not working with Kendo Grid template

0
votes

I'm trying to use Jquery with the controls inside Kendo Grid Template but jquery doesn't work and not not getting any errors also.

$("#grid").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        url: url,
                        dataType: "json",
                        type: "GET",

                    }
                },
                pageSize: 50
            },
            //height: 550,
            groupable: true,
            filterable: true,
            sortable: true,
            toolbar: kendo.template($("#template").html()),
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ApplicantRefNo",
                title: "Reference No.",
                //width: 200
            }, {
                field: "FirstName",
                title: "First Name"
            }, {
                field: "Mobile",
                title: "Mobile"
            }, {
                field: "Address",
                title: "Address"
            },
            {
                field: "Marks",
                title: "Test Score"
            }]
        });
    }

<script type="text/x-kendo-template" id="template">
                <div class="toolbar">

                    <a id="btnSaveAll">Save All</a>

                </div>

</script>

<script>

    $(document).ready(function () {

      $("#btnSaveAll").click(function () { 
                       alert("ff"); 
           }); 
        });
</script>
3
jquerykendo-uikendo-gridkendo-template

3 Answers

1
votes

try this..

$(document).on("click","#btnSaveAll", function(e){
  alert("ff"); 
});

thanks

0
votes

I would say that the problem is that you define the click handler event before the Grid is actually created. Is it possible?

Check it here: http://jsfiddle.net/OnaBai/8U6rg/5/

Please try:

$(document).ready(function () {
  alert("BtnSave : " + $("#btnSaveAll").length);
  $("#btnSaveAll").click(function () { 
    alert("ff"); 
  }); 
});

And check that the alert shows the message BtnSave : 1

0
votes

You can use Jquery 'on' method to bind event on DOM elements that loads later than they are bind.

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