How to use devextreme - 10 common examples

this.apiConfig = apiConfig

        this.api.get('/jobs', options)
            .toPromise()
            .then(json => {
                this.jobDatasource = new DataSource({
                    store: json['hydra:member']
                })
            })
            .catch(error => {
                console.log(error)
                throw 'Data Loading Error'
            })

        this.authorsDatasource.store = new CustomStore({
            load: (loadOptions: any) => {
                let itemPerPage = this.apiConfig.itemsPerPage

                let options = {
                    params: [],
                }

                // manage number of items wished by the datagrid and that the API must return (take care to configure the config/packages/api_platform.yaml:client_items_per_page key)
                if (loadOptions.take) {
                    options.params[this.apiConfig.itemsPerPageParameterName] = loadOptions.take
                    itemPerPage = loadOptions.take
                }

                // manage the pagination: ApiPlatform works with hydra system and so a page number whereas DevXpress datagrid uses a skip/take parameter, so it requires a small Math calc
                if (loadOptions.skip) {
                    options.params['page'] = loadOptions.skip > 0 ? Math.ceil(loadOptions.skip / itemPerPage) + 1 : 1

editors.collection = editorsForm.formData.collection
        editors.isbn = editorsForm.formData.isbn
        editors.publicationDate = editorsForm.formData.publicationDate

        this.editors.push(editors)

        // reset the forms
        this.dxLookUp.value = undefined
        editorsForm.instance.resetValues()
        editorForm.instance.resetValues()

        // save in cache when user refresh or come back later
        localStorage.setItem(CacheKey.EDITORS, JSON.stringify(this.editors))

        // notify the user
        notify({
            message: `The edition has been saved locally`,
            position: {
                my: "center top",
                at: "center top"
            }
        }, "success", 3000);
    }

goNext(ev: Event) {
        ev.preventDefault()

        notify({
            message: this.nextPageNotifyMsg,
            position: {
                my: "center top",
                at: "center top"
            }
        }, "success", 3000);

        // propagate to other component
        this.bookService.updateBook(this.book)

        // go next
        this.routing.goNext(ev)
    }
}

this.broadcastChannel.message.subscribe(message => {
          switch(message.cmd) {
              case 'book':
                  const book = this.books.find(book => book.id === message.book.id)
                  if (!book) {
                      notify(`no book found in store with id ${message.book.id}`, "warn", 5000)
                      return
                  }

                  for (let prop in message.book) {
                      book[prop] = message.book[prop]
                  }

                  // Take care, until you click on the parent window, data won't be refreshed in datagrid. don't know if it's because of browser behavior or DevXpress.datagrid
                  notify(`new Book received with id ${book.id}, focus the window to see the changes in datagrid. 
                    Data is not saved until you edit it`, "info", 5000)
                  this.dataGrid.instance.clearSelection()

                  break
              case 'hello':
              case 'ping':
              default:

}

                  for (const prop in message.book) {
                      book[prop] = message.book[prop]
                  }

                  // Take care, until you click on the parent window, data won't be refreshed in datagrid. don't know if it's because of browser behavior or DevXpress.datagrid
                  notify(`new Book received with id ${book.id}, focus the window to see the changes in datagrid.
                    Data is not saved until you edit it`, 'info', 5000);
                  this.dataGrid.instance.clearSelection()

                  break
              case 'hello':
              case 'ping':
              default:
                  notify(`data received from second screen (cmd=${message.cmd})`, "info", 5000)
                  break
          }
      })

.subscribe((book: Book) => {
                notify({
                    message: 'New book created with ID: ' + book.id,
                    position: {
                        my: "center top",
                        at: "center top"
                    }
                }, "success", 3000)


                const cacheKeys = Object.values(CacheKey)
                // reset localStorage and service
                // @todo should be in a Guar route when exit wizard/*
                for (let cacheKey of cacheKeys) {
                    localStorage.removeItem(cacheKey)
                }
                this.bookService.reset()
                this.routing.goEnd(ev)

addEditor(ev, editorsForm: DxFormComponent, editorForm: DxFormComponent) {
        ev.preventDefault()

        // we should never enter this coz the button is disabled until everything is ok
        // but some user may force the form submit (yes they can) so we have to prevent that kind of hack
        if (!editorsForm.instance.validate().isValid || !editorForm.instance.validate().isValid) {
            notify({
                message: `Your form still has errors, fix them before trying to add the edition`,
                position: {
                    my: "center top",
                    at: "center top"
                }
            }, "warning", 3000);

            return false
        }

        const editor = new Editor()
        if (this.dxLookUp.value) {
            // @todo improve this with maybe decomposition or anything else
            editor.id = this.dxLookUp.value.id
            editor.name = this.dxLookUp.value.name
        } else {

const authors = new Authors()
        authors.author = author
        authors.role = job

        this.authors.push(authors)

        // reset the forms
        this.dxAutocomplete.instance.reset()
        this.dxSelectBox.instance.reset()
        authorsForm.instance.resetValues()

        // save in cache when user refresh or come back later
        localStorage.setItem(CacheKey.AUTHORS, JSON.stringify(this.authors))

        // notify the user
        notify({
            message: `The author has been saved locally`,
            position: {
                my: "center top",
                at: "center top"
            }
        }, "success", 3000);
    }

// Take care, until you click on the parent window, data won't be refreshed in datagrid. don't know if it's because of browser behavior or DevXpress.datagrid
                  notify(`new Book received with id ${book.id}, focus the window to see the changes in datagrid.
                    Data is not saved until you edit it`, 'info', 5000);
                  this.dataGrid.instance.clearSelection()

                  break
              case 'hello':
              case 'ping':
              default:
                  notify(`data received from second screen (cmd=${message.cmd})`, "info", 5000)
                  break
          }
      })

      // @todo: the store should be moved into services folder and injected here instead of the ApiService
      this.dataSource.store = new CustomStore({
          // I use byKey method to modify the store from BroadcastChannel API
          // when i receive a new Book, then i alter the this.books (which is not the store used by the datagrid)
          // because the datagrid can spy its data using byKey, then it will be alerted of the modification
          // But don't forget to focus the window or even if the this.books is altered, the datagrid won't refresh the
          // displayed data
          byKey: (key: any | string | number) => {
              const book = this.books.find(oneBook => key === oneBook.id)

              return book
          },
          load: (loadOptions: any) => {
              let itemPerPage = this.apiConfig.itemsPerPage

              let options = {
                  params: []
              }

descending: false,
    page: 1,
    rowsPerPage: apiConfig.itemsPerPage, // current rows per page being displayed
    rowsNumber: 0 // mandatory for server-side pagination
}

// dataStore for GraphQL Queries: vue-apollo will inject data in vue components based on the name of the query

const getBooks = {
    pageInfo: {},
}

const uri = `//${host}${apiPlatformPrefix}/books`

export const dataSource = {
    store: new CustomStore({
        load: function(loadOptions) {
            let params = '?';

            // @todo not sure it's a good algo: skip maybe the number of rows wheras apiPlatform expect a pageNumber
            // const nextPage = loadOptions.skip > 0 ? (loadOptions.skip/loadOptions.take)+1 : 1
            params += `${apiConfig.pageParameterName}=${loadOptions.skip || 1}`;

            if (loadOptions.take || loadOptions.itemsPerPage) {
                params += `&${apiConfig.itemsPerPageParameterName}=${loadOptions.take || loadOptions.itemsPerPage}`;
            }

            if(loadOptions.sort) {
                params += `&${apiConfig.orderParameterName}=${loadOptions.sort[0].selector}`;
                if(loadOptions.sort[0].desc) {
                    params += ' desc';
                }