Best way to filter an Editable Grid

Hi All, 

What is the recommended way to display A LOT of data in an editable grid? Right now my grid shows over 900 rows of editable data with 6 columns, so it is extremely slow to load and edit. What are my options to make this better? The grid is only for Admins to manage external user data that is called for drop downs in other records. I wanted to avoid totally reworking this into it's own record where each external user in the list is it's own record that you have to click into to edit or create new ones -- this seemed like a more complicated process to me. 

It seems like there is no reasonable way to filter an editable grid like you can with a read-only grid, or even apply paging. Please help! 

Thank you

  Discussion posts and replies are publicly visible

Parents
  • Sarah,

    It is certainly more difficult to page an editable grid, but it is still possible without too much work. An example of a paging editable grid might be as such:

    load(
      local!data: rule!getData(),
      local!pagingInfo: a!pagingInfo(
        startIndex: 1,
        batchSize: 25,
        sortInfo: <your default sort>
      ),
      local!dataSubset: a!todatasubset(local!data, local!pagingInfo),
      {
         a!richTextDisplayField(
            value: {
              a!richTextItem(
                text: "Next Page ->",
                link: a!dynamicLink(
                  saveInto: {
                    a!save(
                      local!data,
                      updatearray(
                        local!data,
                        enumerate(
                          count(local!dataSubset.data)
                        ) + 1,
                        local!dataSubset.data
                      )
                    ),
                    a!save(
                      local!pagingInfo,
                      a!pagingInfo(
                        startIndex: local!pagingInfo.startIndex + local!pagingInfo.batchSize,
                        batchSize: local!pagingInfo.batchSize,
                        sort: local!pagingInfo.sort
                      )
                    ),
                    a!save(
                      local!dataSubset,
                      todatasubset(local!data, local!pagingInfo)
                    )
                  }
                )
              )
           }
         ),
       rule!yourGrid(
         data: local!dataSubset.data
       )
      }
    )

    There would definitely be a lot more to it that I've shown above (back button, adding filtering, sorting, etc.), but that should hopefully give you enough to go off of if you choose to go this route. It would definitely go a long way towards improving the page's rendering time and performance.

    Thanks,

    Nino

  • Thanks Nino -- I'll take a look at this. To add filtering and sorting, would I still need to use this format or can that be applied directly to the editable grid somehow?
Reply Children
  • Sarah,

     

    The solution I mentioned above works well for simply paging and sorting the data, but filtering is a little more difficult. Below, I've written out something different that may work a little better for your use case. It works by first sorting the data, then finding the indices of all the data that match the given filters. Then it pages those indices and only iterates over those to get the relevant data.

    I hope this helps!

    load(
      local!data: rule!getData(),
      local!pagingInfo: a!pagingInfo(
        startIndex: 1,
        batchSize: -1,
        sort: <default sort>
      ),
      local!sortedData: todatasubset(
        local!data,
        local!pagingInfo
      ).data,
      /*Defaulting the filter to only show active entries*/
      local!statusFilter: 1,
      local!filteredIndices: wherecontains(
        local!statusFilter,
        local!sortedData.statusId
      ),
      /*
        Place paging info, sorting, and filtering controls here.
        An example of a filtering control could be:
      */
        a!dropdownField(
          label: "Status Filter",
          choiceValues: {1, 2},
          choiceLabels: {"Active", "Inactive"},
          /*Updating the filteredIndices to show us the places in the data array that match the filters*/
          saveInto: a!save(
            local!filteredIndices,
            wherecontains(
              local!statusFilter,
              local!sortedData.statusId
            )
          )
        ),
      a!gridLayout(
        label: "Label",
        gridHeaders: <your header cells>,
        rows: a!forEach(
          items: index(
            local!filteredIndices,
            /*This enumerate will page the filtered Indices*/
            enumerate(local!pagingInfo.batchSize) + local!pagingInfo.startIndex,
            {}
          ),
          expression: a!gridRowLayout(
            contents: {
              /*Some contents to edit here using the current index, for example: */
              a!textField(
                label: "Email Address",
                value: local!data[fv!item].emailAddress,
                saveInto: local!data[fv!item].emailAddress
              )
            }
          )
        )
      )
    )