For savedStatesCreate How can I modify the Button Text

For savedStatesCreate How can I modify the Button Text

Hon3yNutzHon3yNutz Posts: 13Questions: 3Answers: 0

I currently am using the savedStatesCreate extension to group the save and restore state functionality in one button -- but i have been unsuccessful at renaming the button. For the purposed of my team, we want to use save/load filter instead of save states ... is there any way to do this?

Also from a recommendation side of things, within this button, id recommend changing the css for div.dt-button-collection div.dt-btn-split-wrapper button.dt-button to include width: fit content and remove the pixel width on div.dt-button-collection (i set it to width: auto) This way the saved states expand to show the full name. Its not perfect but it works.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 14,526Questions: 1Answers: 2,482

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • Hon3yNutzHon3yNutz Posts: 13Questions: 3Answers: 0

    Thanks Colin -- sorry given i had nothing to show i didnt know how to even provide a test... here is my code block atm below. My main issue is how i rename the Save States button that shows by default. Below you will see I am trying to rename it through

    'text:{
                        0: 'Save/Open Custom Filter',
                        _: '(%d) Custom Filter Selected' 
    

    Here is the full code set (sans ajax and all the columns):

    var table = $('#datatable').DataTable( { 
            dom: 'Blrtip',
            data: AJAX_data,
            autoWidth: false,
            stateSave: true,
            stateDuration: 0,
            stateLoadParams: function (settings, data){
                data.search.search = ""; 
            },
            language: { 
                "zeroRecords": "No Data Found", //default no record text
                searchBuilder: {
                    button: { 
                        0: '<i class="fas fa-search"></i> Build a Filter',
                        _: '(%d) Filter(s) Used' 
                    }
                },
                stateRestore: {
                    renameTitle: 'Rename'
                }
            },
            order: [ [1, 'asc'] ], // start to sort data by name 
            pageLength: 25,
            buttons:[
                {
                    extend: 'searchBuilder',
                    config: {
                        depthLimit: 1,          
                        clearall: null,
                        columns: [1,3,4,5,6,7,9,10,11,14,20,21,22],
                        conditions: {
                            array: {
                                contains:{ conditionName: "List Options"}
                            }
                        }
                    }
                },
                {
                    text: 'Reset',
                    attr: { id: 'resetbutton'}  // adds id to resetbutton
                },
                {   
                    extend: 'savedStatesCreate',
                    config: {
                                           creationModal: true
                    }
                     text:{
                        0: 'Save/Open Custom Filter',
                        _: '(%d) Custom Filter Selected'
                    } 
                }
            ],
            columns: [  
                { "data": ... }
                    ]
    });
    
  • kthorngrenkthorngren Posts: 17,238Questions: 25Answers: 4,091

    See if this savedStates Custom Button Text example helps. Its different than what you have.

    Kevin

  • Hon3yNutzHon3yNutz Posts: 13Questions: 3Answers: 0

    Unfortunately not. The issue is that I am using savesStatesCreate -- if i add another button "savedStates" it just adds that button. I need to modify the text within the extension...this is where im getting lost. I have tried text, and within the language modifier tried to adjust stateRestore there (no dice on either)

  • kthorngrenkthorngren Posts: 17,238Questions: 25Answers: 4,091
    Answer ✓

    I took the example I linked and used it with just savedStatesCreate.
    http://live.datatables.net/tuhunihu/1/edit

    Note the example states this:

    It is also possible to include the number of states in the text for the savedStatesCreate button.

    Kevin

  • Hon3yNutzHon3yNutz Posts: 13Questions: 3Answers: 0

    @kthorngren -- 100% that worked. However -- if you reference my code, you will see under language i say

    language: {
            "zeroRecords": "No Data Found", //default no record text
            searchBuilder: {
                button: {
                            0: '<i class="fas fa-search"></i> Build a Filter',
                            _: '(%d) Filter(s) Used'
                        }
            },
            stateRestore: {
                renameTitle: 'Rename'
            }
        },
    

    by changing it to:

    language: { 
            zeroRecords: "No Data Found", //default no record text
            buttons: {
                searchBuilder: {
                    0: '<i class="fas fa-search"></i> Build a Filter',
                    _: '(%d) Filter(s) Used'
                },
                savedStates: {
                    0: 'Save/Open Custom Filter',
                    _: '(%d) Custom Filter Selected'
                }
            }
        },
    

    Corrected the text under saved states -- but then broke searchBuilder :neutral: As you can see i moved the nested buttons from searchbuilder and made it the top of the hierachy

  • Hon3yNutzHon3yNutz Posts: 13Questions: 3Answers: 0

    To be clear -- to correct the issue I used

            language: { 
                zeroRecords: "No Data Found", //default no record text
                searchBuilder: {
                    button: {
                        0: '<i class="fas fa-search"></i> Build a Filter',
                        _: '(%d) Filter(s) Used'
                    }
                },
                buttons: {
                    savedStates: {
                        0: 'Save/Open Custom Filter',
                        _: '(%d) Custom Filter Selected'
                    }
                }
            },
    

    Which solves everything, but i guess the prior post im asking -- why the difference in how its written

  • colincolin Posts: 14,526Questions: 1Answers: 2,482

    It's just the way the code is structured. The language options are per component, and when SearchBuilder is being used under a button, the Buttons are the extension. It's not ideal, agreed, but just how it is,

    Colin

  • Hon3yNutzHon3yNutz Posts: 13Questions: 3Answers: 0

    Thanks and understood! One final final note...for future people looking for help -- the custom name _: (%d) Custom Filter Selected is not necessarily accurate -- that value will only tell you how many filters have been saved. I have since replaced the zero state with the null state (and deleted the old null state) since knowing there are 10 filters available was less useful to our users.

  • Hon3yNutzHon3yNutz Posts: 13Questions: 3Answers: 0

    One last question... While I can physically change the name of the button as listed above -- is there a way to change the name of the button to list the actual name of the state activated?

    The goal here would be to have a null condition ( _: ) where when there is a state selected the button name would reflect the activated button -- or alternatively have something somewhere that gives the user more information about the active state

  • colincolin Posts: 14,526Questions: 1Answers: 2,482

    You could use searchBuilder.filterChanged to do that. Your function there is triggered every time a search is added/removed/changed, and you can use that trigger to change the text of the button. The example on that reference page is doing just that,

    Colin

  • Hon3yNutzHon3yNutz Posts: 13Questions: 3Answers: 0

    Ok so after a lot of playing around I figured it out -- I will say this seems like something that i have overengineered -- but it works by taking advantage of the following example: https://datatables.net/extensions/staterestore/examples/customisation/activeLabel.html

    language: { 
                zeroRecords: "No Data Found", //default no record text
                searchBuilder: {
                    button: {
                        0: '<i class="fas fa-search"></i> Build a Filter',
                        1: '(1) Filter Used',
                        _: '(%d) Filters Used'
                    }
                },
                buttons: {
                    savedStates: {
                        _: '<span class="activeStates"></span>'
                    },
                    createState: 'Save Current Filter',
                }
            }
    
    table.on('draw stateRestore-change', function(){
            var active = table.stateRestore.activeStates();
            var activeString = 'Save/Load Filter';
            if (active.length > 0) {
                activeString = "Filter Loaded: " + active[0].name; 
            }/* else{activeString += "No Current Filters";} */
            $('span.activeStates').text(activeString)
        })
        table.draw();
    
  • colincolin Posts: 14,526Questions: 1Answers: 2,482

    Nice, thanks for reporting back,

    Colin

Sign In or Register to comment.