Custom Grid Strings

With wijgrid, you can localize or customize strings in two areas: filter types and pager button tooltips.

Filter Types

You can localize the filter names that appear in the filter dropdown in two ways. One is by using the filterOperatorsListShowing event handler, and the other is by setting localized names for operators in the embeddedFilters option. Here is a list of the default filter names that you can localize:

NoFilter
Contains
NotContain
BeginsWith
EndsWith

Equals
NotEqual
Greater
Less
GreaterOrEqual

LessOrEqual
IsEmpty
NotIsEmpty
IsNull
NotIsNull

To localize the filters using the filterOperatorsListShowing event handler, add script like the following to the <head> section of your page.

Custom String Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#demo").wijgrid({ data: [["0", "a"], ["1", "b"]], showFilter: true, filterOperatorsListShowing: function (e, args) { $.each(args.operators, function (_, op) { switch (op.name) { case "NoFilter": op.displayName = "Custom name 1"; break; case "Contains": op.displayName = "Custom name 2"; break; // ... // // and so on } }); } }); }); </script>

Custom String Script

Copy Code

<script type="text/javascript">
   $(document).ready(function () {
      $("#demo").wijgrid({
         data: [["0", "a"], ["1", "b"]],
         showFilter: true,
         filterOperatorsListShowing: function (e, args) {
            $.each(args.operators, function (_, op) {
               switch (op.name) {
                  case "NoFilter":
                     op.displayName = "Custom name 1";
                     break;

                  case "Contains":
                     op.displayName = "Custom name 2";
                     break;
     
                  // ...
                  //
                  // and so on
               }
            });
         }
      });
   });
</script>

To set localized names for operators using the embeddedFilters option, use script like the following.

`Example Title`	Copy Code
<script type="text/javascript"> $(document).ready(function () { localizeFilters({ NoFilter: "Custom name 1", Contains: "Custom name 2" // ... // // and so on }); $("#demo").wijgrid({ data: [["0", "a"], ["1", "b"]], showFilter: true, }); }); function localizeFilters(obj) { if (obj) { jQuery.each(obj, function(key, value) { key = key.toLowerCase(); var op = $.wijmo.wijgrid.embeddedFilters[key]; if (op) { op.displayName = value; } }); } } </script>

Example Title

Copy Code

<script type="text/javascript"> 
   $(document).ready(function () { 
      localizeFilters({ 
        NoFilter: "Custom name 1", 
        Contains: "Custom name 2" 
        // ... 
        // 
        // and so on 
      }); 
      $("#demo").wijgrid({ 
         data: [["0", "a"], ["1", "b"]], 
         showFilter: true, 
      }); 
   }); 
   function localizeFilters(obj) { 
      if (obj) { 
         jQuery.each(obj, function(key, value) { 
            key = key.toLowerCase(); 
            var op = $.wijmo.wijgrid.embeddedFilters[key]; 
            if (op) { 
               op.displayName = value; 
            } 
         }); 
        } 
   } 
</script>

Pager Button Tooltips

There are four buttons that appear in the grid widget if the mode is set to nextPrevious, nextPreviousFirstLast, or numericFirstLast, and if the number of pages of data exceeds the size of the grid by enough to require them.

firstPageText Default value is "First."
lastPageText Default value is "Last."
nextPageText Default value is "Next."
previousPageText Default value is "Previous."

Please note that this localization is not necessary if you set the mode to numeric, as these buttons do not appear in that mode.

To localize the tooltip text for the pager buttons, add script like the following to the <head> section of your page.

Custom String Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#demo").wijgrid({ allowPaging: true, pageSize: 4, data: data, pagerSettings: { mode: "nextPreviousFirstLast", firstPageText: "Premier", lastPageText: "Dernier", nextPageText: "Suivant", previousPageText: "Précédent" } }); }); </script>

Custom String Script

Copy Code

<script type="text/javascript">
  $(document).ready(function () {
  $("#demo").wijgrid({
     allowPaging: true,
     pageSize: 4,
     data: data,
     pagerSettings: {
       mode: "nextPreviousFirstLast",
       firstPageText: "Premier",
       lastPageText: "Dernier",
       nextPageText: "Suivant",
       previousPageText: "Précédent"
     }
  });
});
</script>

Widgets

Grid