grid pager pageSizes works on translated option 'All' but should on simply 'All' - Bug?

[Tomasz]

Hi.

When i create grid like this:

let localeGrid = new Grid({
    locale: 'pl',
.....
pageSettings: {
  pageCount: 5,
    pageSizes: [5, 10, 50, 'All'],
    pageSize: 10,
},
....

It works but when we choose "All" option in page selector data will not refresh, wee have spinner on grid and nothing happens.

In my language, "All" spells "Wszystko"

When i change line :

pageSizes: [5, 10, 50, 'All'],

to

pageSizes: [5, 10, 50, 'Wszystko'],

it works correctly but i think its a bug. 

Pager should work on "All" option and only show translated name.

Wee could make something like :

let allName = GetFromTranslator('All') ;

and then

pageSizes: [5, 10, 50, allName],

But i think is unnecessary complication.

[Rajapandi Ravi]

Hi Tomasz, 

Thanks for your patience. 

From validating your query, we could see that you have used customized pager dropdown. When you customize the default values of pager drop-down you have to handle the customized locale in the value of the pager dropdown. By default in our Grid , we are handled the locale for only the default values of the pager dropdown while using the pageSizes properties as true. The locale was not applied to the customized string value of the pager dropdown. To achieve your requirement you have to define the translation string as you want in the pager dropdown. Please refer the below code example and sample for more information. 

L10n.load({ 

    'pl': { 

        'pager': { 

            .  .  .  .  .  .  .  .  . 

            .  .  .  .  .  .  .  .  . 

            'All': 'Wszystko' 

        } 

    } 

}); 

     

    let grid: Grid = new Grid( 

        { 

            dataSource: orderData, 

            allowPaging: true, 

            height: 365, 

            locale: 'pl', 

            columns: [ 

                .  .  .  .  .  .  .  . 

                .  .  .  .  .  .  .  .  

            ], 

            pageSettings: { pageCount: 2, pageSizes: ["5", "12", "10", "Wszystko"] } 

        }); 

    grid.appendTo('#Grid'); 

Sample: https://stackblitz.com/edit/hwq7gt-vs5sx9?file=index.ts 

Regards, 

Rajapandi R 

[Tomasz]

Hi.

I know how it works. You do not understand me.

I think it should work with the word "All" in any language. No matter how the language is used, it should always be named "All". not "Wszystkie" in Polish, not "Alle" in Deutsche, not "他們 全部" in Chinese, Always in all languages ​​we should use these three letters: "All". this way is easier.

At the moment, unfortunately we have to use translation. This is an unnecessary complication.

[Rajapandi Ravi]

Hi Tomasz, 

Thanks for the update 

Query#: No matter how the language is used, it should always be named "All". 

We have analyzed your query and we could see that you like to show the name always All. If you like to display the "All" in pager dropdown all time you simply need to define the "All" in pager dropdown to achieve your requirement.  Please refer the below code example, sample and screenshot for more information. 

 

let grid: Grid = new Grid({ 

  dataSource: orderData, 

  allowPaging: true, 

  height: 365, 

  locale: "pl", 

  columns: [ 

    .  .  .  .  .   

    .  .  .  .  .   

  ], 

  pageSettings: { pageCount: 2, pageSizes: ["5", "12", "10", "All"] } 

}); 

Sample: https://stackblitz.com/edit/hwq7gt-th5di1?file=index.ts 

Screenshot:  

 

Regards,
Rajapandi R

[Tomasz]

OMG, 

How much you don't understand what I mean.

Have the text appropriate for your language displayed on the screen.

But in the code using "All" is the simplest possible solution.

[Rajapandi Ravi]

Hi Tomasz, 

We have analyzed your query and we could see that you like to maintain the name “All” always and you like to display the corresponding locale for “All” in Grid. To achieve your requirement we suggest you to use the pager template feature of Grid. You can use custom elements inside the pager instead of default elements. The custom elements can be defined by using the template property. Inside this template, you can access the CurrentPage, pageSize, pageCount, totalPage and totalRecordCount values. 

In the below sample we have render the dropdown component by using pagerTemplate. For your convenience we have attached the sample for reference. Please refer the below code example and sample for more information. 

 

 

let updateTemplate: Function = () => { 

  let drop: DropDownList; 

  drop = new DropDownList({ 

    dataSource: data, 

    // maps the appropriate column to fields property 

    fields: { text: "text", value: "value" }, 

    popupWidth: "250px", 

    change: args => { 

      var grid = (document.getElementsByClassName("e-grid")[0] as any) 

        .ej2_instances[0]; 

      if (args.itemData.value == "All") { 

        grid.pageSettings.pageSize = grid.dataSource.length; 

      } else { 

        grid.pageSettings.pageSize = args.itemData.value; 

      } 

    } 

  }); 

  drop.appendTo("#currentPage"); 

}; 

let flag: boolean = true; 

let grid: Grid = new Grid({ 

  dataSource: orderData, 

  allowPaging: true, 

  height: 365, 

  locale: "pl", 

  actionComplete: function(args) { 

    if (args.requestType === "paging") { 

      updateTemplate(); 

    } 

  }, 

  pageSettings: { template: "#template", pageSize: 7 }, 

  dataBound: function() { 

    if (flag) { 

      flag = false; 

      updateTemplate(); 

    } 

  }, 

  columns: [ 

    .  .  .  .  . 

    .  .  .  .  . 

  ] 

}); 

grid.appendTo("#Grid"); 

 

Sample: https://stackblitz.com/edit/hwq7gt-tgxvj6?file=index.ts 

Documenttion: https://ej2.syncfusion.com/documentation/grid/paging/#template 

Regards,
Rajapandi R

[Tomasz]

OMG, you still dont see my point.

I say: simplification, less code and more optimalisation.

You say: code, code ,code, if structure, translation and again if and template and more code.

How it works actualy:

In JS file wee use translated 'All' string like "Wszystkie'  in pageSettings:pageSizes

next step : Grid mechanism from '@syncfusion/ej2-grids' translating that string 'Wszytkie' to "All" and make query.

I say: drop the translation when building query and in js source use only 'All' and then on frontside use translated 'all' to show 'Wszystkie'.

ASAP: As Simple As Possible :)

Nevermind, you still dont undersand. This case is for close. Please, do not respond on it.

[Rajapandi Ravi]

Hi Tomasz, 

We have validated your reported query at our end. So we have considered “Grid pager pageSizes works on translated option 'All' but should on simply 'All'” as a defect and logged a report for the same. We will include the defect fix in our upcoming Nov 18^th, 2020 patch release. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 

Feedback link : https://www.syncfusion.com/feedback/19309/grid-pager-pagesizes-works-on-translated-option-all-but-should-on-simply-all 

Regards,  

Rajapandi R 

[Tomasz]

WOW, I am surprised. Thanx :)

[Rajapandi Ravi]

Hi Tomasz, 

Thankyou. Currently we are working on it and we will update you details as we promised. 

Regards, 

Rajapandi R