Grid does not respond well to changing records per page

[Jorge]

I have a grid with frozen columns and I force the horizontal scroll to be hidden.

In this case if I change the number of records per page to 10 the grid loads ok,

 

  but if change to a lower number, the grid doesn't respond well and leaves a blank space.

You can see the error in the following codesandbox: https://codesandbox.io/s/vue-template-forked-yg0cvb

[Vikram Sundararajan]

Hi Jorge,

Greetings from syncfusion support,

We understand that you would like to have a grid that displays a lower number of page items without leaving any blank spaces. In order to achieve this, we recommend using freezeRefresh method to refresh the grid in actionComplete event.

Please refer the below code example for more information.

 [App.vue]

 

actionComplete: (args) => {

      var grid = document.getElementById("grid").ej2_instances[0];

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

        setTimeout(() => {

          grid.freezeRefresh();

        });

      }

    },

 

Sample: https://codesandbox.io/s/vue-template-forked-bruhy3?file=/src/App.vue

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Vikram S

[Jorge]

Hello.

I have tried the proposed solution but it works only in the grids that I have with load from the server. The grids that are not loaded from the server, the data disappear.

When I go back to the 5 records per page, the data disappears.

This is the new codesandbox where the error is being reproduced

https://codesandbox.io/s/vue-template-forked-6087zq

[Vikram Sundararajan]

Hi Jorge,

Based on your requirement If grid data is load from locally the grid data was disappear. After reviewing your code, we have found that you have used the freezeRefresh method to address this issue. However, if you are loading grid data locally, the grid does not show any blank space, so using the freezeRefresh method is not necessary. But blank space show when you hide the scrollBar using hideScroll method. You can hide the scrollBar using CSS way instead of using hideScroll method. In this way grid does not show any blank space and render data properly.

Please refer the below code example for more information.

 [App.vue]

 

  onDataBound: function (args) {

      // this.$refs.grid.ej2Instances.hideScroll();

      var grid = document.getElementById("grid").ej2_instances[0];

      const scrollBar = grid.getContent().querySelector(".e-scrollbar");

      if (scrollBar) {

        const mvblScrollBar = grid.getContent().querySelector(".e-movablescrollbar");

        const mvblChild = grid.getContent().querySelector(".e-movablechild");

        scrollBar.style.display = "flex";

        if (mvblScrollBar.offsetWidth >= mvblChild.offsetWidth) {

          scrollBar.style.display = "none";

        }

      }

    },

> 

 

Sample: https://codesandbox.io/s/vue-template-forked-9y23b4?file=/src/App.vue

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Vikram S

[Jorge]

Thank you very much, everything is working properly now

[Rajapandi Ravi]

Jorge,

We are happy to hear that your issue has been resolved.

Please get back to us if you need further assistance.