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 New April BMW Yes yes January Tata No yes December Toyato yes No March Audi Yes yes May Kia No yes

Shubham Aware · 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.

Shubham Aware · 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)
 }
 )
 )
 )
 }
)