Update multiple records with a checkbox

checkboxes-knack

How can I hide checkboxes in certain rows?

You can add a conditional to check if the row doesn’t have the classes “kn-table-group” and “kn-table-totals” before adding the checkboxes…

Good idea, Arjun - thanks!

It’s a bit above my skills to implement, but I assume this would be placed in this section?

// add a checkbox to each row in the table body
$(’#’ + view.key + ‘.kn-table tbody tr’).each(function() {
$(this).prepend(’’);
});
}

1 Like

Could you post here or DM me the code you’re using to add the checkboxes? I can suggest edits based on that…

You just need to change the add checkbox function. Use the one below:

var addCheckboxes = function (view) {
    // add the checkbox to to the header to select/unselect all
    if ($('#' + view.key + '.kn-table thead tr').hasClass("kn-table-group") === false && $('#' + view.key + '.kn-table thead tr').hasClass("kn-table-group").hasClass("kn-table-totals") === false) {
        $('#' + view.key + '.kn-table thead tr').prepend('');
    }
    $('#' + view.key + '.kn-table thead input').change(function () {
        $('.' + view.key + '.kn-table tbody tr input').each(function () {
            $(this).attr('checked', $('#' + view.key + '.kn-table thead input').attr('checked') != undefined);
        });
    });

    // add a checkbox to each row in the table body
    $('table').not('.kn-table-totals').each(function () {});
    $('#' + view.key + '.kn-table tbody tr').each(function () {
        $(this).prepend('');
    });
}
1 Like

Thank you so much for your effort, @Arjun! :slight_smile:

But I seem to miss something. The table wont load as the loader just spins…?

Hey @JorgenF sorry for the late reply… I seem to have added spaces by mistake in the class identifiers by mistake. I’ve edited and fixed it now… Can you try again?

This is famous code (thanks to @Nic). I see it everywhere :slightly_smiling_face:

To make it even more robust:

  • Tables in “Search” views should be supported (currently they aren’t)
  • Certain rows should be skipped. For example, we probably don’t want checkboxes on a “group” row or “totals” rows.

Given the above, the updated function looks like this:

/* 
Example Usage

Add checkboxes...
To a table: addCheckboxes(view)
To a table inside a Search View: addCheckboxes(view, 'search')
To all rows in a Search View: addCheckboxes(view, 'search', true)
To all rows in a Table View: addCheckboxes(view, 'table', true)
*/

function addCheckboxes(view, viewType='table', allRows=false) {  

  // Tables and search tables have slightly different css
  let css
  if (viewType == 'search') {
    css = '.kn-search'
  } else if (viewType == 'table') {
    css = '.kn-table'
  }

  // Decide if we are including all rows (unlikely) or only record rows
  const trCSS = allRows ? 'tr' : 'tr[id]'

  // Add the checkbox to the header to select/unselect all
  $('#' + view.key + css + ' thead tr').prepend('<th><input type="checkbox"></th>')

  $('#' + view.key + css + ' thead input').change(function () {
    $('.' + view.key + css + ' tbody tr input').each(function () {
      $(this).attr('checked', $('#' + view.key + css + ' thead input').attr('checked') != undefined)
    })
  })

  // Add a checkbox to each row in the table body
  $('#' + view.key + css + ' tbody ' + trCSS).each(function () {
    $(this).prepend('<td><input type="checkbox"></td>')
  })
}

Of course, the rest of the code is the same (i.e. call the function inside the view-render event and update your records).

Loving the community involvement on this snippet. Thanks everyone.

Ian
Knack Pros

This snippet is very helpful, my one issue I am having is increasing the colspan or adding another cell to the total rows since the checkbox column shifts them so they don’t line up.

The total rows behave unpredictably when trying to select them via JS

This snippet works for getting the columns and increasing the colspan of the group headers (added to the same AddCheckboxes function)

getcols = $('#' + view.key + css).find(" tbody " + trCSS + ":first td").length;
  $('#' + view.key + css + ' tr.kn-table-group > td').attr('colspan', getcols);

but this will not increase the colspan of the first column in the kn-table-totals rows

$('#' + view.key + css + ' tr.kn-table-totals > td').attr('colspan', '2');

Hi guys,

I have created the Knack Toolkit Library that includes this feature and it works really well.
I strongly suggest you take a look at it.

Here’s the direct link to the page’s documentation, where I explain the principles of Bulk Edit and Bulk Delete.
Bulk Operations

The full documentation can be found here with the code and the setup instructions.

If you need a demo or have question, pleas feel free to send me a message here or in private.

Cheers,
Normand D.

2 Likes

Hi Norman,

I’m sure that I’m not doing something correctly but I have installed the code in several different apps with somewhat different results.

I also removed all other JAVA code from each app to debug.

  • All apps bulk delete feature works
  • No slugs such as _ts work on any app.
  • The app name and version of KTL only shows on one app.
  • Auto Refresh box with option to pause shows on one app but not the others and does not actually refresh

Is there something I’m missing here? Does the app legacy settings need to be enabled?

Any help would be much appreciated.

Regards

1 Like

Hi Jay,

All what you’re describing is very intriguing. I’d really like to get access to at least two apps that behave differently to compare them.

Can you create an account for me in each of them, please? Use this email nd@ctrnd.com
Send me the PW in a private message.

No need to see any relevant data, just dummy pages and fake data is ok for testing. I usually create them in a menu called Debug and Test for developers or temporary users only.

No, the legacy style is not important. Bulk Ops should work in a cases.

Cheers,
Norm

Thank you!

I sent you an email

Hi Jay,

I’ve been investigating those bugs you found.

All apps bulk delete feature work
Good to know - thanks.

No slugs such as _ts work on any app.
I fixed the _ts keyword. Indeed there was a bug that prevented showing the TS when there was no title.

The app name and version of KTL only shows on one app.
This one you shared me shows it as expected. Can you share me another one that doesn’t?

Auto Refresh box with option to pause shows on one app but not the others and does not actually refresh

This checkbox is only shown to users having the Developer role. It is intended to pause the auto refresh keyword (_ar), while you inspect the data - to give you a break! It doesn’t actually refresh the page or anything. Just pause _ar.

BTW, if you want to refresh a specific view, you can do a click, followed by a long press (0.5 sec) on that view, just about anywhere on it.

This shared app is now on a special “dev” version of the KTL (see in the Javascript pane). It’s like a beta for you to test the fixes I’m doing.
Keep testing and let me know what you find. I’ll fix it.

Norm

Hi Norm,

Much appreciated for you looking into this.

Is there a Bulk “Yes / No” feature?

I’m constantly facing requirements to select multiple rows in a table that have a Yes / No column and would like the ability to change all selected from No to Yes or even if the field is blank to Bulk either Yes / NO

Is this possible?

Thank you again!

Jay

Yes, you can do Bulk Edits on Yes/No fields.
You can also use the cool _qt k(Quick Toggle) keyword in your grid.

Add this to your description (or title)

_qt=palegreen, transparent

To get green background color on Yes and no color on No

or

_qt=palegreen, #f55

To get green background color on Yes and pale red color on No

You can click all cells in a quick sequence, without having to wait for each transition to complete. They are queued in memory and executed automatically.

Norm

1 Like