Add custom control to DataTable toolbar?

Forms
1

Hello,

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.

2

Hello @chs-web,

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

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

grid.setOptions({
    toolbar: [
        'create',
        {
            name: 'custom-button',
            text: 'Button Name'
        }
    ]
});

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

Oh excellent, thank you so much!

1 Like
4

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
        });
    },500);

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.

2 Likes