How to ignore Bootgrid click event on certain element clicked

Question

I have implemented a JQuery bootgrid. My problem is that I want to ignore the row click event for when a select input in my bootgrid is clicked.

This is what I have so far:

.on("click.rs.jquery.bootgrid", function (e, columns, row, target) {;
    if(/* Clicked element is not a select input */) {
        location.href = "/row?id=" + row.Id;
    }
});

Any idea how to accomplish this? I've been struggling around with this for ages now.

Edit: Why Alisson's answer doesn't work.

When I do this:

.on("click.rs.jquery.bootgrid", function (e, column, row, target) {
    console.log(row.IncidentId);
});

I can get the IncidentId, but when I do this:

.on("loaded.rs.jquery.bootgrid", function () {
    grid.find(".some-selector").on("click", function (e) {
        // do what you need here...
        var IncidentId = $(this).closest('tr').data('IncidentId');
        location.href = "/row?id=" + IncidentId;
    });
});

It doesn't work because I can't access the IncidentId that way.

This is my <thead>:

<thead>
    <tr>
        @*<th data-column-id="IncidentId" data-visible="false">Id</th>*@
        <th data-column-id="CaseNumber" data-order="asc">Case Number</th>
        <th data-column-id="Title">Case Title</th>
        <th data-column-id="EntrepreneurContact">Entrepreneur Contact</th>
        <th data-column-id="Mentor">Mentor</th>
        <th data-column-id="StatusReason">Status Reason</th>
        <th data-column-id="CreatedOn">Created On</th>
    </tr>
 </thead>

I want this:

Not this:

Barry, I just edited my answer which allows you to use the `click` event in the grid, without having to keep the `IncidendId` column. I also created a working fiddle so you can play around. Let me know if that helps you. — Alisson Reinaldo Silva, May 25 '17 at 20:25

Alisson Reinaldo Silva · Accepted Answer · 2017-05-25T20:18:38.320

3

Edit: a better solution

You can use the click event as you would, but combining with the loaded event to stop the propagation of your select input events like so:

var bootgrid = $("#grid1").bootgrid(config);

bootgrid.on("click.rs.jquery.bootgrid", function (e, columns, row, target) {
    console.log('Incident Id: ' + row.IncidentId);
});

bootgrid.on("loaded.rs.jquery.bootgrid", function (e, c, rows) {
    // avoid any element with "stop-click-event" class from triggering the event in the grid...
    $(".stop-click-event").click(function(e) {
        e.preventDefault();
        e.stopPropagation();
    });
});

You need to bind to click inside the loaded event of the grid, because this is where you are sure the elements like your select input already exist in the DOM, and since after each reload of the grid (at least for ajax calls) the bootgrid delete all your elements and recreate with new data, loaded will be triggered again, so these new elements will be bound again.

Here is a working JSFiddle

Old solution

Instead of using this click.rs.jquery.bootgrid event, bind to loaded, and once loaded, bind to the correct elements you need:

var grid = $("#my-grid").bootgrid(config)
.on("loaded.rs.jquery.bootgrid", function () {

    // find elements inside the grid, using some jQuery selector...
    grid.find(".some-selector").on("click", function (e) {
        // do what you need here...
        var rowId = $(this).closest('tr').data('row-id');
        location.href = "/row?id=" + rowId;
    });

});

If you still need to add a listener to an entire row, for example, and want to avoid a click in a button or an input, you can do something like this (still inside loaded event):

// bind to all rows inside the grid...
grid.find("tr").mouseup(function (e) {
    // do something
    var rowId = $(this).data('row-id');
    location.href = "/row?id=" + rowId;
});

// avoid when clicking any "a", "input" or "button" tags...
grid.find("tr td a, tr td input, tr td button").mouseup(function (e) {
    e.stopPropagation();
});

edited May 25 '17 at 20:18

answered May 22 '17 at 17:47

Alisson Reinaldo Silva

10,009
5
65
83

I was originally doing this but then I had no way to get the value of a specific row column value. So this approach didn't work. – Barry Michael Doyle May 22 '17 at 19:26
I've edited my question to give an example of what I want to do. – Barry Michael Doyle May 22 '17 at 19:29
@BarryMichaelDoyle I understand. After generating the rows, your `tr` elements should have a `data-row-id` attribute with their respective `ids`. So you can easily retrieve the `row-id` with my edited code. – Alisson Reinaldo Silva May 22 '17 at 19:42
That would be great, if I didn't comment that row out. It's still a problem. – Barry Michael Doyle May 22 '17 at 20:43
@BarryMichaelDoyle what do you mean by **commenting that row out**? Your `tr` doesn't have a `data-row-id` attribute? Bootgrid should create it for you, as soon as you define a `` inside your `` with a `data-identifier` like this: `ID`. Take note the `data-visible="false"` is only necessary to make that column hidden. – Alisson Reinaldo Silva May 22 '17 at 20:49
You can leave `` out and the `row.Id` can still be accessed. – Barry Michael Doyle May 22 '17 at 20:52
@BarryMichaelDoyle can't you let that column still there, and just add a `data-visible="false"` to make it hidden? – Alisson Reinaldo Silva May 22 '17 at 20:53
@BarryMichaelDoyle I mean, why are you commenting it at all? Usually there is no need to comment an `id` column. If you don't want it visible in the DOM, just add that `data-visible="false"` like I said. It's simpler imo. – Alisson Reinaldo Silva May 22 '17 at 20:55
No, because then the user can still choose to show it from their bootgrid display option and I don't want that. – Barry Michael Doyle May 22 '17 at 20:55
I've added an edit to my question to help illustrate my problem. – Barry Michael Doyle May 23 '17 at 19:20
I've actually just tested your solution and it's not even working. – Barry Michael Doyle May 23 '17 at 19:40
@BarryMichaelDoyle I've read your edited question. In order for it to work, you need to *uncomment* the `Id`. – Alisson Reinaldo Silva May 23 '17 at 20:31
In fact, it doesn't work on any of the columns, even the visible ones. – Barry Michael Doyle May 24 '17 at 04:24
@BarryMichaelDoyle oh, I'm sorry. You need to set `data-identifier="true"` attribute in your `` with your `IncidentId` column. I said in one of my previous comments, but forgot to add in my last comment. So: `Id`. Adding data-identifier to a column will make **bootgrid** use its value to populate the `data-row-id` attribute in your `` inside ``. So the code should work. – Alisson Reinaldo Silva May 24 '17 at 11:17
@BarryMichaelDoyle please, provide a sample fiddle. I use bootgrid in many different apps, and it works. This is the only remaining way I can help you, and I'd like to make it work for you. – Alisson Reinaldo Silva May 24 '17 at 12:02
1

*After Edit:* Thanks, this does exactly what I wanted without any work arounds. Perfect solution! – Barry Michael Doyle May 26 '17 at 13:14
1

@BarryMichaelDoyle I'm sorry for being late, I couldn't figure out before. I'm glad it was what you were looking for :) – Alisson Reinaldo Silva May 26 '17 at 13:16
1

Appreciate the efforts! – Barry Michael Doyle May 26 '17 at 13:16

How to ignore Bootgrid click event on certain element clicked

1 Answers1

Edit: a better solution

Old solution