[SOLVED] Knockout Click is not working when we are using Jquerybootgrid

Knockout Click is not working when we are using Jquerybootgrid

I am new to KnockoutJS. I want to fire a event on click of a button(or Anchors). I have appended the data to table using Jquery Bootgrid but I couldn't get the alert.

var vm;

function VM() {
  var self = this;
  self.ShowMessage = function() {
    alert("Hi");

  }
}
$(document).ready(function() {
  var data = [];
  data.push({
    Name: "Sample"
  })
  data.push({
    Name: "Sample2"
  })
  data.push({
    Name: "Sample3"
  })



  $("#UserList").bootgrid({
    caseSensitive: false,

    formatters: {
      "Actions": function(column, curr) {
        return "<a href='#'  data-bind='click:VM.ShowMessage' class='on-default edit-row'>Hello</a>";
      }

    }
  }).bootgrid("append", data);



  vm = new VM();
  ko.applyBindings(vm, document.getElementById("MyDiv")[0]);
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row" id="MyDiv">

    <table style="overflow-y:hidden; max-height: 460px;" id="UserList" class="table table-condensed" cellspacing="0">
      <thead>
        <tr>

          <th data-column-id="Name">Name</th>
          <th data-formatter="Actions" data-visible-in-selection="false">Actions</th>

        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

Kindly help me out.

Associated jsFiddle here

Solution

you can use bootgrid events and then applyBindings when data is ready.

loaded event Fires after data is loaded as per doc.

Code:

$("#UserList").bootgrid({ /*your settings*/ }).bootgrid("append", data)
  .on("loaded.rs.jquery.bootgrid", function(e) {
      if ($(this).bootgrid("getTotalRowCount")) // >0 auto evaluates to true
        ko.applyBindings(new VM(), document.getElementById("MyDiv")[0]);
    }
 });

Always append the plugin namespace .rs.jquery.bootgrid to the event name in order to subscribe events.

working sample up for grabs