CODEWITHSUNDEEP
jquerykendo-uikendo-gridkendo-template
chamara
chamara

Reputation: 12709

Jquery not working with Kendo Grid template

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>

Upvotes: 0

Views: 1467

Answers (3)

Devendra Soni
Devendra Soni

Reputation: 1934

try this..

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

thanks

Upvotes: 1

Vijay
Vijay

Reputation: 3023

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"); 
});

Upvotes: 0

OnaBai
OnaBai

Reputation: 40917

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

Upvotes: 0

Related Questions