Set the status text on a Dojo EnhancedGrid FilterBar

Question

The FilterBar on an EnhancedGrid has a label that displays "No Filter Applied", "0 of 100 items shown", etc.

Is there a way that I can programmatically change this text to anything I want?

Thanks,
Tristan

Edit: Ken's approach works well for me, but for those who need it there might be another approach here: Replacing Dojo/Dijit NLS strings

Answer 1

The strings you are looking to customize are part of the dojox/grid/enhanced/nls/Filter localization bundle. A reference to this bundle gets stored on the Filter plugin itself in its constructor (e.g. here in 1.9.1).

The most reusable and least volatile way to customize these messages would likely be to create an extension of the Filter plugin and alter the nls object accordingly. For example: (the following assumes you have required dojo/_base/declare, dojo/_base/lang, dojox/grid/EnhancedGrid, and dojox/grid/enhanced/plugins/Filter to appropriate variables)

var CustomFilter = declare(Filter, {
    name: 'customFilter',
    constructor: function () {
        // Avoid modifying the original nls bundle
        this.nls = lang.clone(this.nls);
        // Alter the "no filter applied" message
        this.nls.filterBarMsgNoFilterTemplate = 'Custom message here';
        // Alter other messages here
    }
});

EnhancedGrid.registerPlugin(CustomFilter);

Then, when you are creating your EnhancedGrid instance, instead of specifying a filter key in your plugins hash, you will specify customFilter instead. Its properties will remain the same, since you are still extending the original plugin.

If you need to figure out the keys in the nls object for the messages you wish to customize, have a look at the source for the bundle that defines them.

Note, of course, that normally different localization bundles are loaded depending on the browser's locale. The above example assumes you're only concerned with supporting one language with your customizations; if you wanted to support multiple, you'd likely want to set up your own set of nls resources to mix in on top of the first. If you need help with that I can expand this answer, but this ought to at least get you started.

Answer 2

To change the text "No Filter applied" programatically you can do it like this. I have tested it in a Grid which I actually work on.

First get the dom Node, where the Text is defined:

var node = JSON.stringify(dom.byId("dojox_grid_enhanced_plugins_filter_FilterBar_0"));

Then search for the class of the span-tag, where the text is defined and change it:

dojo.query( '.dojoxGridFBarStatus' ).forEach(function(node){ 
  node.innerHTML = "Set in the Text you would prefer";
 }

The same you can do with the text for the label "0 of 100 items shown". Except that your change must take place, after the filter is defined.

Here's the code behind the filterbar in the Grid.( Captured by FF Web-DeveloperTool )

<tbody>
<tr>
    <td class=\"dojoxGridFBarBtnTD\">
    <span aria-label=\"Tabelle filtern\" 
            title=\"Filter definieren\" 
            widgetid=\"dijit_form_Button_12\" 
            class=\"dijit dijitReset dijitInline dijitButton dojoxGridFBarBtn\" 
            role=\"presentation\">
                <span class=\"dijitReset dijitInline dijitButtonNode\" 
                data-dojo-attach-event=\"ondijitclick:_onClick\" 
                role=\"presentation\">
                    <span style=\"-moz-user-select: none;\" 
                    id=\"dijit_form_Button_12\" 
                    tabindex=\"0\" 
                    class=\"dijitReset dijitStretch dijitButtonContents\" 
                    data-dojo-attach-point=\"titleNode,focusNode\" 
                    role=\"button\" 
                    aria-labelledby=\"dijit_form_Button_12_label\">
                        <span class=\"dijitReset dijitInline dijitIcon dojoxGridFBarDefFilterBtnIcon\" 
                        data-dojo-attach-point=\"iconNode\">
                        </span>
                            <span class=\"dijitReset dijitToggleButtonIconChar\">?</span>
                            <span class=\"dijitReset dijitInline dijitButtonText\" 
                            id=\"dijit_form_Button_12_label\" 
                            data-dojo-attach-point=\"containerNode\">...</span>
                    </span>
                </span>
            <input value=\"\" 
            class=\"dijitOffScreen\" 
            tabindex=\"-1\"
            role=\"presentation\" 
            data-dojo-attach-point=\"valueNode\" 
            type=\"button\">
    </span>
    </td>
    <td class=\"dojoxGridFBarInfoTD\">
        <span class=\"dojoxGridFBarInner\">
            <span class=\"dojoxGridFBarStatus\" 
            dojoattachpoint=\"statusBarNode\">Kein Filter angewendet</span>
                <span aria-label=\"Filter abwählen\" 
                style=\"display: none;\" 
                widgetid=\"dijit_form_Button_13\" 
                class=\"dijit dijitReset dijitInline dijitButton dojoxGridFBarClearFilterBtn\" 
                role=\"presentation\">
                    <span class=\"dijitReset dijitInline dijitButtonNode\" 
                    data-dojo-attach-event=\"ondijitclick:_onClick\" 
                    role=\"presentation\">
                        <span style=\"-moz-user-select: none;\" 
                            id=\"dijit_form_Button_13\" 
                            tabindex=\"0\" 
                            class=\"dijitReset dijitStretch dijitButtonContents\" 
                            data-dojo-attach-point=\"titleNode,focusNode\" 
                            role=\"button\" 
                            aria-labelledby=\"dijit_form_Button_13_label\">
                                <span class=\"dijitReset dijitInline dijitIcon dojoxGridFBarClearFilterBtnIcon\" 
                                    data-dojo-attach-point=\"iconNode\">
                                </span>
                                <span class=\"dijitReset dijitToggleButtonIconChar\">?</span>
                                    <span class=\"dijitReset dijitInline dijitButtonText\" 
                                        id=\"dijit_form_Button_13_label\" 
                                        data-dojo-attach-point=\"containerNode\">Filter löschen</span>
                                    </span>
                        </span>
                        <input value=\"\" 
                        class=\"dijitOffScreen\" 
                        tabindex=\"-1\" 
                        role=\"presentation\" 
                        data-dojo-attach-point=\"valueNode\" 
                        type=\"button\">
                    </span>
                    <span widgetid=\"dijit_form_Button_14\" 
                    class=\"dijit dijitReset dijitInline dijitButton dojoxGridFBarCloseBtn\" 
                    role=\"presentation\">
                        <span class=\"dijitReset dijitInline dijitButtonNode\" 
                        data-dojo-attach-event=\"ondijitclick:_onClick\" 
                        role=\"presentation\">
                            <span style=\"-moz-user-select: none;\" 
                            title=\"Filterleiste schließen\" 
                            id=\"dijit_form_Button_14\" 
                            tabindex=\"0\" 
                            class=\"dijitReset dijitStretch dijitButtonContents\" 
                            data-dojo-attach-point=\"titleNode,focusNode\" 
                            role=\"button\" 
                            aria-labelledby=\"dijit_form_Button_14_label\">
                                <span class=\"dijitReset dijitInline dijitIcon dojoxGridFBarCloseBtnIcon\" 
                                data-dojo-attach-point=\"iconNode\">
                                </span>
                                    <span class=\"dijitReset dijitToggleButtonIconChar\">?
                                    </span>
                                        <span class=\"dijitReset dijitInline dijitButtonText dijitDisplayNone\" 
                                        id=\"dijit_form_Button_14_label\" 
                                        data-dojo-attach-point=\"containerNode\">Filterleiste schließen
                                        </span>
                            </span>
                        </span>
                        <input value=\"\" 
                        class=\"dijitOffScreen\" 
                        tabindex=\"-1\" 
                        role=\"presentation\" 
                        data-dojo-attach-point=\"valueNode\" 
                        type=\"button\">
                    </span>
                </span>
    </td>
</tr>
</tbody>

Hope that helps you.

Regards, Miriam