Our blazing fast Grid component built with pure JavaScript


Post by mattt »

I'm trying to use the PagingToolbar which has a dependency on AjaxStore. Is there a way to easily override the behaviour of AjaxStore to support loading data and paginating with a provided GraphQL client?

Currently I've been fetching data using GrapgQL and providing it to the data prop directly on the bryntum-grid component. While the data is loading how do I display loadingMsg?


Post by marcio »

Hey mattt,

Perhaps you can use the https://bryntum.com/products/grid/docs/api/Core/data/AjaxStore#event-beforeRequest event and display the loadingMsg? From the AjaxStore you could also check when it's on loading state https://bryntum.com/products/grid/docs/api/Core/data/AjaxStore#property-isLoading

If you could provide a sample project with your current configuration would be easier for us to assist you on this.

You can check the guidelines here https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

Best regards,
Márcio


Post by mattt »

I'm fetching the data with a GraphQL client so I need to a way of setting the isLoading property directly. I was able to get the table to display the loading mask and load data by subclassing Store. The issue I have now is the loading mask stays in place when isLoading is set to false after the fetchData method has completed.

Could you explain how AjaxStore updates the table loading state in Grid?

<template>
  <div class="table-container">
    <bryntum-grid
      ref="grid"
      v-bind="gridConfig"
      :store="gridStore"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref, Ref } from 'vue'
import { BryntumGrid } from '@bryntum/grid-vue'
import { Store } from '@bryntum/grid'
import client from 'admin/lib/client'
import { useRemoteData } from 'shared/lib/remote-data'

class CustomStore extends Store {
  isLoading: boolean

  constructor ({ data, isLoading }) {
    super({ data })
    this.isLoading = isLoading
  }
}

export default defineComponent({
  name: 'Table',
  components: {
    BryntumGrid
  },
  setup () {
    const grid = ref(null)
    const gridStore = new CustomStore(reactive({ data: [], isLoading: false }))
    const tableColumns = [
      { field: 'name', text: 'Name', width: '15%' },
      { field: 'accountType', text: 'Firm Type', width: '10%' },
      { field: 'subscriptions.nodes.length', text: 'Subscriptions', width: '10%' },
      { field: 'seats', text: 'Seats', width: '10%' },
      { field: 'startDate', text: 'Start Date', width: '10%' },
      { field: 'endDate', text: 'Renewal Date', width: '10%' },
      { field: 'ownerEmail', text: 'Account Owner', width: '15%' },
      { field: 'salesExecutive', text: 'Sales Executive', width: '10%' },
      { field: 'customerStatus', text: 'Status', width: '10%' }
    ]
    const config = () => {
      return {
        columns: tableColumns,
        features: { filter: true, cellEdit: false, cellMenu: false, headerMenu: false },
        loadingMsg: 'Loading.....',
        animateRemovingRows: false
      }
    }
    const gridConfig = reactive(config())
    const limit = ref(50)
    const previousCursor: Ref<string | null | undefined> = ref(null)
    const nextCursor: Ref<string | null | undefined> = ref(null)
    const client_ = ref(useRemoteData(client))

    const loading = computed(() => {
      return (client_.value.state.type === 'Loading' || client_.value.state.type === 'NotAsked')
    })

    const hasPreviousPage = computed(() => {
      if (client_.value.state.type === 'Success') {
        return client_.value.state.data?.pageInfo.hasPreviousPage
      }
      return false
    })

    const hasNextPage = computed(() => {
      if (client_.value.state.type === 'Success') {
        return client_.value.state.data?.pageInfo.hasNextPage
      }
      return false
    })

    const fetchData = async (pagination: Record<string, string | null | undefined | number> = { first: limit.value }) => {
      gridStore.isLoading = true
      previousCursor.value = nextCursor.value
      const variables: QueryArgs = { ...pagination }

      await client_.value.fetch(variables)
      if (client_.value.state.type === 'Success') {
        nextCursor.value = client_.value.state.data?.pageInfo.endCursor
        gridStore.data = client_.value.state.data?.nodes
        gridStore.isLoading = false
      }
    }

    onMounted(async () => {
      await fetchData()
    })

    return {
      grid,
      gridConfig,
      gridStore
    }
  }
})
</script>

Post by alex.l »

Why don't you use https://bryntum.com/products/grid/docs/api/Grid/view/Grid#function-mask and https://bryntum.com/products/grid/docs/api/Grid/view/Grid#function-unmask for grid directly? It seems to be much easier than override store. As I understood, your store is not in loading state in fact, but you switch flags manually only to show load mask?

All the best,
Alex


Post Reply