how to Customize Filtering with the FlexGridFilter wijmo in Angular

Question

how to make your data grid's filter accessible to users who don't speak English.

Default FlexGridFilter

I want to change data grid's filter to other language

same

Answer 1

First, Create a CustomFlexGridFilter class in its own file in the src/app folder.

You can use the following code:

export class CustomFlexGridFilter {

   init(filter: wjcGridFilter.FlexGridFilter)
   : wjcGridFilter.FlexGridFilter {
     filter.defaultFilterType = wjcGridFilter.FilterType.Condition;
     var Operator = wjcGridFilter.Operator;
     wjcCore.culture.FlexGridFilter.header = 'نمایش موارد قابل جستجو';
     wjcCore.culture.FlexGridFilter.ascending = '\u2191 صعودی';
     wjcCore.culture.FlexGridFilter.descending = '\u2193 نزولی';
     wjcCore.culture.FlexGridFilter.apply = 'اجرا';
     wjcCore.culture.FlexGridFilter.clear = 'حذف فیلتر';
     wjcCore.culture.FlexGridFilter.conditions = 'جستجو بر اساس وضعیت';
     wjcCore.culture.FlexGridFilter.values = 'چستچو بر اساس مقدار';
     wjcCore.culture.FlexGridFilter.search = 'جستجو';
     wjcCore.culture.FlexGridFilter.selectAll = 'جستجو همه';
     wjcCore.culture.FlexGridFilter.null = 'خالی';
     wjcCore.culture.FlexGridFilter.and = 'و';
     wjcCore.culture.FlexGridFilter.or = 'یا';
     wjcCore.culture.FlexGridFilter.cancel = 'لغو';
     wjcCore.culture.FlexGridFilter.ariaLabels.and = 'هر دو شرط لازم است';
     wjcCore.culture.FlexGridFilter.ariaLabels.asc = 'مرتب سازی ستون ها صعودی      میباشد';
     wjcCore.culture.FlexGridFilter.ariaLabels.dialog = 'فیلتر برای ستون ها';
     wjcCore.culture.FlexGridFilter.ariaLabels.dsc = 'مرتب سازی ستون ها نزولی می باشد';
     wjcCore.culture.FlexGridFilter.ariaLabels.edit = 'ویرایش فیلد برای ستون';
     wjcCore.culture.FlexGridFilter.ariaLabels.op1 = 'حالت اول';
     wjcCore.culture.FlexGridFilter.ariaLabels.op2 = 'حالت دوم';
     wjcCore.culture.FlexGridFilter.ariaLabels.or = 'شرایط لازم را برآورده سازید';
     wjcCore.culture.FlexGridFilter.ariaLabels.search = 'فهرست مورد جستجو';
     wjcCore.culture.FlexGridFilter.ariaLabels.val1 = 'مقدار شرط اول';
     wjcCore.culture.FlexGridFilter.ariaLabels.val2 = 'مقدار شرط دوم';

     wjcCore.culture.FlexGridFilter.stringOperators = [
       { name: 'انتخاب کنید ...', op: null },
       { name: 'مساوی', op: Operator.EQ },
       { name: 'نامساوی', op: Operator.NE },
       { name: 'شروع با', op: Operator.BW },
       { name: 'پایان با', op: Operator.EW },
       { name: 'شامل', op: Operator.CT },
       { name: 'شامل نمی باشد', op: Operator.NC },
       { name: 'کمتر از', op: Operator.LT },
       { name: 'بزرگتر از', op: Operator.GT },
     ];

     wjcCore.culture.FlexGridFilter.numberOperators = [
       { name: 'انتخاب کنید ...', Operator: null },
       { name: 'برابر', op: Operator.EQ },
       { name: 'متفاوت', op: Operator.NE },
       { name: 'بزرگتر از', op: Operator.GT },
       { name: 'بزرگتر یا مساوی', op: Operator.GE },
       { name: 'کمتر از', op: Operator.LT },
       { name: 'کمتر یا مساوی با', op: Operator.LE },
     ];

     wjcCore.culture.FlexGridFilter.dateOperators = [
       { name: 'انتخاب کنید ...', op: null },
       { name: 'برابر', op: Operator.EQ },
       { name: 'کمتر از', op: Operator.LT },
       { name: 'بزرگتر از', op: Operator.GT }
     ];

     wjcCore.culture.FlexGridFilter.booleanOperators = [
       { name: 'انتخاب کنید ...', op: null },
       { name: 'هست', op: Operator.EQ },
       { name: 'نیست', op: Operator.NE }
     ];

     return filter;
     }
   }

Using the Angular CLI, generate a new component named users.

app/users/users.component.html

  <wj-flex-grid #flex>
        <wj-flex-grid-column [width]="'*'" [header]="'Name'" [binding]="'FirstName'" [dataType]="'String'">
        </wj-flex-grid-column>
        <wj-flex-grid-column [width]="'*'" [header]="'state'" [binding]="'RecordState'" [dataType]="'Boolean'">
        </wj-flex-grid-column>
        <wj-flex-grid-filter #filter (initialized)="initFilter()">
        </wj-flex-grid-filter>
    </wj-flex-grid>

app/users/users.component.ts

export class UsersComponent{
   constructor(public customFlexGridFilter : CustomFlexGridFilter ) {
    }

   @ViewChild('filter', { static: false }) filter: wjcGridFilter.FlexGridFilter;

   initFilter() {
     this.customFlexGridFilter.init(this.filter);
   }
}