Skip to main content Skip to footer

Wijmo Grid : Localizing Filter Operators

Wijmo includes the globalize library, but not every individual language. When setting the culture option you must include the language file in your script references. The CDN hosts all of the individual files or you can download them from Github The localization of WijGrid is fairly simple. Include the language file in the script reference and set the Culture option of WijGrid.However, when this is done the Filter operators aren't localized. This is because WijGrid provides users an option to set there own custom text for these. This blog explains the approach to set the custom text for the filter operators.

Defining Culture Option

As described earlier, include the required js file in the HTML Page. We’ll use ‘fr-FR‘ javascript library for our example.

<!--Culture-->  
<script src="http://cdn.wijmo.com/external/cultures/globalize.culture.fr-FR.js" type="text/javascript"></script>

Next step is to set the Culture option. This can be done as follows :

$("#demo").wijgrid( {culture: "fr-FR"} );

Custom Filter Operators

Now, the filter operator text can be set in two ways:

  1. You can specify the displayName property for filter operators in the filterOperatorsListShowing event handler:

    args.operators[ i ].displayName = "LocalizedName";
    
  2. You can also call the _localizeFilterOperators internal function passing an array of the following type :

    $("#demo").data("wijgrid")._localizeFilterOperators([  
    { name: "nofilter", displayName: "No Filter" },  
    { name: "beginswith", displayName: "Begins With" },  
    { name: "contains", displayName: "Contains" },  
    { name: "endswith", displayName: "Ends With" },  
    { name: "equals", displayName: "Equals" },  
    { name: "greater", displayName: "Greater" },  
    { name: "greaterorequal", displayName: "Greater Or Equal" },  
    { name: "isempty", displayName: "Is Empty" },  
    { name: "isnull", displayName: "Is Null" },  
    { name: "less", displayName: "Less" },  
    { name: "lessorequal", displayName: "Less Or Equal" },  
    { name: "notcontain", displayName: "Not Contains" },  
    { name: "notequal", displayName: "Not Equal" },  
    { name: "notisempty", displayName: "Not Is Empty" },  
    { name: "notisnull", displayName: "Not Is Null" }  
    ]);
    

View Sample

MESCIUS inc.

comments powered by Disqus