CODEWITHSUNDEEP
jquerykendo-uikendo-grid
Chris
Chris

Reputation: 3129

Cell click event only happens once in kendo ui grid

I have a click event being bound to a cell, but the click event only fires once from the very first row, when I step through the dataBound event it attaches itself, but only fires the one time

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>

<body>

  <div id="example">
    <div id="grid"></div>
    <script>
      $(document).ready(function() {
        $("#grid").kendoGrid({
          dataSource: {
            type: "odata",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            },
            pageSize: 20
          },
          dataBound: function(e) {
            e.sender.tbody.find('td:eq(1)').on('click', function(e) {
              console.log("I was clicked");
            });
          },
          height: 550,
          groupable: true,
          sortable: true,
          pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
          },
          columns: [{
            template: "<div class='customer-photo'" +
              "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
              "<div class='customer-name'>#: ContactName #</div>",
            field: "ContactName",
            title: "Contact Name",
            width: 240
          }, {
            field: "ContactTitle",
            title: "Contact Title"
          }, {
            field: "CompanyName",
            title: "Company Name"
          }, {
            field: "Country",
            width: 150
          }]
        });
      });
    </script>
  </div>

  <style type="text/css">
    .customer-photo {
      display: inline-block;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-size: 32px 35px;
      background-position: center center;
      vertical-align: middle;
      line-height: 32px;
      box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0, 0, 0, .2);
      margin-left: 5px;
    }
    
    .customer-name {
      display: inline-block;
      vertical-align: middle;
      line-height: 32px;
      padding-left: 3px;
    }
  </style>


</body>

Upvotes: 0

Views: 1756

Answers (1)

ezanker
ezanker

Reputation: 24738

Instead of the dataBound event, add a class to the cell via column.attributes and then use event delegation to handle the click event on all cells with that class:

 $(document).ready(function() {
    $("#grid").kendoGrid({
      dataSource: {
        type: "odata",
        transport: {
          read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
        },
        pageSize: 20
      },
      height: 550,
      groupable: true,
      sortable: true,
      pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
      },
      columns: [{
        template: "<div class='customer-photo'" +
          "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
          "<div class='customer-name'>#: ContactName #</div>",
        field: "ContactName",
        title: "Contact Name",
        width: 240
      }, {
        field: "ContactTitle",
        title: "Contact Title",
                    attributes: {
                        "class": "CellClickHandler",
                    }
      }, {
        field: "CompanyName",
        title: "Company Name"
      }, {
        field: "Country",
        width: 150
      }]
    });
  });

$(document).on('click', '.CellClickHandler', function(e){
    console.log("I was clicked");
    var grid = $("#grid").data("kendoGrid");
    var dataItem = grid.dataItem($(this).closest('tr'));
    console.log("Contact Title: ",dataItem.ContactTitle);
});

Upvotes: 1

Related Questions