SearchBuilder custom overrides not working in Layout

Stacey1134

So curious if I am missing something with the new layout structure here, for example the following code will not override the SearchBuilder default name and button conventions:

        layout: {
            topStart: {
                buttons: [
                    { extend: "edit", className: 'btn-sm lnk-button' ,text: '<i class="fa-solid fa-print"></i>&nbsp;Print Letter',
                        editor: editor, formTitle: 'Generate Response PDF File',
                        formButtons: [
                            {
                                text: 'Cancel',
                                action: function () { this.close(); },
                                className: 'btn-sm lnk-modal-button'
                            }, {
                                text: 'Print',
                                action: function () { this.submit(); },
                                className: 'btn-sm lnk-modal-button'
                            }
                        ]   
                    },  
                    {
                        extend: 'searchBuilder',
                        text: '<i class="fa-duotone fa-magnifying-glass"></i>&nbsp;Refine Search',
                        className: 'btn-sm lnk-button',
                        config: {
                            columns: [2, 5, 7, 8, 9, 10, 11]
                        }
                    },
                    { extend: "edit",   editor: editorDone, text: '<i class="fa-solid fa-circle-check"></i> Completed', 
                        formTitle: 'Confirm Printing is Complete',
                        titleAttr: 'Remove from Queue',
                        className: 'btn-sm lnk-button',
                        formButtons: [
                            {
                                text: 'Cancel',
                                action: function () { this.close(); },
                                className: 'btn-sm lnk-modal-button'
                            }, {
                                text: 'Complete',
                                action: function () { this.submit(); },
                                className: 'btn-sm lnk-modal-button'
                            }
                        ]   
                    }                    

                ],
                pageLength: {
                menu: [ [5, 10, 20, -1], [5, 10, 20, 'All'] ]
                }              
            }
        },

I even tried the button.button.name convention. I eventually was able to override it with old language code shown below, but curious what I am missing?

        language: {
            searchBuilder: {
                button: '<i class="fa-solid fa-magnifying-glass"></i>Search' ,
                title: 'Choose Filter Options'
            }
        },
        buttons:[
            '<i class="fa-solid fa-magnifying-glass"></i>Search' 
        ], 

allan

You have your SearchBuilder being displayed but a button there - i.e. searchBuilder, rather than using searchBuilder in the layout directly.

With searchBuilder you can pass SearchBuilder configuration buttons using the config parameter for the button's configuration object.

I don't see where you are attempting to set configuration options for SearchBuilder in the above code though?

Allan

Stacey1134

the text: above is overridden in the button layout.
Additionally, I tried using searchBuilder outside of the button, and came into two problems. 1, no longer in the button (of course), and 2. re-declare errors with DataTable. I am sure I am doing something wrong, but I couldn't find a working example do deconstruct.

this really didn't work either:

        layout: {
            top: 'searchBuilder',
                button: '<i class="fa-solid fa-magnifying-glass"></i>&nbsp;Search' ,
                title: 'Choose Filter Options',
                className: 'btn-sm lnk-button',
                config: {
                    columns: [2, 5, 7, 8, 9, 10, 11]
                } ,           
            topStart: {
                
                buttons: [

allan

I think the text one is an error I'm afraid. Thanks for letting me know about that. This test case shows it. I'll need to look into it - for the moment, using language.searchBuilder.button is the workaround.

Allan