Add custom control to DataTable toolbar?


In Public Web Forms, is there a way to add a custom button/control to the DataTable toolbar? So that in addition to "Add new record", we could have a button that calls a custom function? We want to use it to allow users to look up information from another source and then add a pre-filled row programmatically.

We can put a button on our form outside the DataTable control, but it would be more elegant (and more understandable from a UI perspective) if it were integrated into the DataTable toolbar.

Thank you in advance.

Hello @chs-web,

You can add a button to the Data Table toolbar using the code:

var grid = fd.control('DataTable1').widget;

    toolbar: [
            name: 'custom-button',
            text: 'Button Name'

$('.k-grid-custom-button').click(function(e) {
    //your function here
1 Like

Oh excellent, thank you so much!

1 Like

Quick follow-up: This all worked wonderfully, except that (on my PC at least) there was a little delay while the control was being constructed. So, the jQuery call to set the click handler was running before the button was created. I had to add a small delay, as so:

    // Add click-event handler for custom button
    window.setTimeout(function() {
        $('.k-grid-custom-button').attr('href', 'javascript:void(0)');
        $('.k-grid-custom-button').click(function(e) {
            // Do something here

The button also had a default href attribute of '#', which caused an annoying scroll-to-top behavior on each button click, so I changed that as well.

Just adding this to help the next person.

All the best.