Editable grid Sorting issue, need to sort the month field in calendar month

Question

I have below grid of data but i want to sort the below data by Month. User have dropdown option to select sort field as month and sort by like ascending or descending.
The challenges am facing here is , since we kept month as text field its sorting in an Alphabetical order. can anyone help how do i do the sorting to get the month in a calendar order (Jan to Dec).

Month        Vehical Brand    Repair  NewApril           BMW                 Yes      yesJanuary     Tata                    No       yesDecember Toyato                yes      No March        Audi                   Yes      yesMay           Kia                     No       yes

shubhama926776 · Accepted Answer

I also tried to replicate your requirement without adding new hidden column.
Let me know if that works for you.

a!localVariables(
  /* Sample Data */
  local!data: {
    a!map(
      Month: "April",
      VehicleBrand: "BMW",
      Repair: "Yes",
      New: "Yes"
    ),
    a!map(
      Month: "January",
      VehicleBrand: "Tata",
      Repair: "No",
      New: "Yes"
    ),
    a!map(
      Month: "December",
      VehicleBrand: "Toyota",
      Repair: "Yes",
      New: "No"
    ),
    a!map(
      Month: "March",
      VehicleBrand: "Audi",
      Repair: "Yes",
      New: "Yes"
    ),
    a!map(
      Month: "May",
      VehicleBrand: "Kia",
      Repair: "No",
      New: "Yes"
    )
  },
  /* Sort Controls */
  local!sortField: "Month",
  local!sortOrder: "Ascending",
  local!dataWithMonthOrder: a!forEach(
    items: local!data,
    expression: a!update(
      data: fv!item,
      index: "monthOrder",
      value: choose(
        wherecontains(
          fv!item.Month,
          {
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
          }
        )[1],
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12
      )
    )
  ),
  /* Sort the data */
  local!sortedData: if(
    local!sortField = "Month",
    /* Sort by monthOrder when Month is selected */
    todatasubset(
      local!dataWithMonthOrder,
      a!pagingInfo(
        startIndex: 1,
        batchSize: - 1,
        sort: a!sortInfo(
          field: "monthOrder",
          ascending: if(local!sortOrder = "Ascending", true, false)
        )
      )
    ).data,
    /* Sort by other fields normally */
    todatasubset(
      local!dataWithMonthOrder,
      a!pagingInfo(
        startIndex: 1,
        batchSize: - 1,
        sort: a!sortInfo(
          field: local!sortField,
          ascending: if(local!sortOrder = "Ascending", true, false)
        )
      )
    ).data
  ),
  {
    /* Sort Controls */
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!dropdownField(
              label: "Sort By",
              placeholder: "Select Field",
              choiceLabels: { "Month", "Vehicle Brand", "Repair", "New" },
              choiceValues: { "Month", "VehicleBrand", "Repair", "New" },
              value: local!sortField,
              saveInto: local!sortField
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!dropdownField(
              label: "Sort Order",
              placeholder: "Select Order",
              choiceLabels: { "Ascending", "Descending" },
              choiceValues: { "Ascending", "Descending" },
              value: local!sortOrder,
              saveInto: local!sortOrder
            )
          }
        )
      }
    ),
    /* Display Grid */
    a!gridLayout(
      label: "Vehicle Data",
      headerCells: {
        a!gridLayoutHeaderCell(label: "Month"),
        a!gridLayoutHeaderCell(label: "Vehicle Brand"),
        a!gridLayoutHeaderCell(label: "Repair"),
        a!gridLayoutHeaderCell(label: "New")
      },
      rows: a!forEach(
        items: local!sortedData,
        expression: a!gridRowLayout(
          contents: {
            a!textField(value: fv!item.Month, readOnly: true),
            a!textField(
              value: fv!item.VehicleBrand,
              readOnly: true
            ),
            a!textField(value: fv!item.Repair, readOnly: true),
            a!textField(value: fv!item.New, readOnly: true)
          }
        )
      )
    )
  }
)

shubhama926776 · Answer

I would recommend, Add a month number(monthNum) field (1-12) to your data and use it for sorting while displaying the month name.Sort by monthNum but display month.

Sign up

Login with SSO

Login to the community

Login with SSO