Knockout Click is not working when we are using Jquerybootgrid

Question

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

post your req'd code in question rather keeping everything in fiddle — super cool, Mar 15 '18 at 12:44
2 ways - as dynamic html getting added to Dom you gotta re-bind them (cleanNode/applybindings) again or setTimeout so your grid html is ready . https://jsfiddle.net/f43scuqe/29/ . i prefer to applyBindings only if data is ready maybe in ajax success . — super cool, Mar 15 '18 at 13:17
When using jQuery with Knockout, you usually should consider a [custom binding handler](http://knockoutjs.com/documentation/custom-bindings.html) — Roy J, Mar 15 '18 at 15:50
@supercool thanks. but i shouldn't use set timeout function. i have tried apply binding after the ajax success , it is not at all working. — Avi, Mar 16 '18 at 10:29

score 0 · Accepted Answer · answered Mar 16 '18 at 11:28

0

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

answered Mar 16 '18 at 11:28

super cool

6,003
2
30
63

I need to apply binding each time if the Bootgrid has records more than 1.It can also throw an error (you can not apply binding multiple times ). – Avi Mar 16 '18 at 12:32
Each time ? loaded event fires when competed data is loaded only once . – super cool Mar 16 '18 at 12:38
Please check this link. How to archive Click event separately for sepeate boot grid. jsfiddle.net/f43scuqe/62 – Avi Mar 20 '18 at 13:12
Check this Link ,@superCool.I am facing issue if i am using multiple bootgrid. http://jsfiddle.net/f43scuqe/62/ – Avi Mar 21 '18 at 04:43
@Avi well then you need to make use of applyBinding's second parameter which take element id . working sample http://jsfiddle.net/supercool/f43scuqe/79/ . – super cool Mar 21 '18 at 12:35

Knockout Click is not working when we are using Jquerybootgrid

1 Answers1