Skip to main content

request-data

Description​

Fires while scrolling or at the initialization stage if dynamic data loading is enabled

Usage​

"request-data": ({
    row: {
        start: number;
        end: number;
    }
}) => boolean|void;

Parameters​

The callback of the action is the function with the following parameter:

  • row - (required) current row position, which includes
    • start - (required) start row index
    • end - (required) end row index

Example​

In the example below we use the dynamic property to enable dynamic data loading and specify the number of all rows in a dataset. The request-data action is triggered while scrolling and we add the event handler that receives the row.start and row.end values and prepares data according to these indices.

<script setup>
    import { Grid } from "@svar-ui/vue-grid";
    import { getData } from "./common/data";
    import { ref } from "vue";

    const { allData, columns } = getData();

    const rowCount = ref(100);

    const data = ref([]);

    function dataProvider(ev) {
        const { row } = ev;
        if (row) 
            data.value = allData.slice(row.start, row.end);
    }

</script>
<template>
  <Grid 
   :data="data"
   :columns="columns"
   :dynamic="{ rowCount }"
   :onrequestdata="dataProvider" />
</template>

Related articles: