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