Sort read only fields of an editable grid

Question

Hi, 
 I have an editable grid with 5 read only fields and one editable fields . I need to sort the readonly fields . I use 
 a!gridLayout( 
 ) 
 Can i add the pagingInfo inside the "with" ? 
 is it possible to have a sortable editable grid ?

Jacob Grafenstein · Answer

Hi Ramanan, 
 
Unfortunately, editable grids cannot be used to actively sort by clicking on the header cells as can be done with paging grids. I would suggest looking at other options when designing your user experience. For example, you could make the grid a paging grid, but allow the user to select a row. When they select a row, a field appears above or below the grid that allows the user to edit the information in that row. 
 
If you are trying to sort the information before it gets populated in the editable grid, you can do so in the following ways: 
 
The best way for you to achieve this is to sort the information as you pull it from the database. As you make your query, pass the paging info into the query entity with your sort information specfied using a!sortInfo(). Then, you can control how the information is sorted as it gets pulled from the DB. When you create the editable grid, pass the sorted data to your gridRowLayout and the rows should be in sorted order. You can read more about this in the documentation: docs.appian.com/.../fnc_system_a_sortinfo.html 
 
If you aren't pulling from the database, you can also use todatasubset() to sort the data before populating it in the editable grid. See the documentation for further information: docs.appian.com/.../fnc_scripting_todatasubset.html 
 
Hope that helps! 
Jake

Vincent Mark · Answer

Its possible, just not pretty 
 
 load(
 local!data: {
 {
 id: 1,
 firstName: "Steve",
 lastName: "Jobs"
 },
 {
 id: 2,
 firstName: "Lebron",
 lastName: "James"
 },
 {
 id: 3,
 firstName: "Mark",
 lastName: "Zuckerberg"
 }
 },
 local!pagingInfo: a!pagingInfo(
 startIndex: 1,
 batchSize: - 1,
 sort: a!sortInfo(
 field: "id",
 ascending: true
 )
 ),
 with(
 local!sortedData: todatasubset(
 arrayToPage: local!data,
 pagingConfiguration: local!pagingInfo
 ),
 {
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!dropdownField(
 label: "field",
 choiceLabels: {
 "ID",
 "FIRST NAME",
 "LAST NAME"
 },
 choiceValues: {
 "id",
 "firstName",
 "lastName"
 },
 value: local!pagingInfo.sort.field,
 saveInto: local!pagingInfo.sort.field
 )
 }
 ),
 a!columnLayout(
 contents: {
 a!dropdownField(
 label: "ascending",
 choiceLabels: {
 "TRUE",
 "FALSE"
 },
 choiceValues: {
 true,
 false
 },
 value: local!pagingInfo.sort.ascending,
 saveInto: local!pagingInfo.sort.ascending
 )
 }
 )
 }
 ),
 a!gridLayout(
 headerCells: {
 a!gridLayoutHeaderCell(
 label: "ID"
 ),
 a!gridLayoutHeaderCell(
 label: "Name"
 ),
 a!gridLayoutHeaderCell()
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(
 width: "ICON"
 ),
 a!gridLayoutColumnConfig(),
 a!gridLayoutColumnConfig(
 width: "ICON"
 )
 },
 rows: a!forEach(
 items: local!sortedData,
 expression: a!gridRowLayout(
 id: fv!index,
 contents: {
 a!integerField(
 value: fv!item.id,
 readOnly: true
 ),
 a!textField(
 value: concat(
 fv!item.firstName & " " & fv!item.lastName
 ),
 saveInto: {
 a!save(
 fv!item.firstName,
 index(
 split(
 save!value,
 " "
 ),
 1,
 ""
 )
 ),
 a!save(
 fv!item.lastName,
 index(
 split(
 save!value,
 " "
 ),
 2,
 ""
 )
 )
 }
 ),
 a!imageField(
 images: a!documentImage(
 document: a!iconIndicator(
 icon: "REMOVE"
 ),
 link: a!dynamicLink(
 value: wherecontains(
 fv!item,
 local!data
 ),
 saveInto: a!save(
 local!data,
 remove(
 local!data,
 save!value
 )
 )
 )
 ),
 size: "ICON",
 align: "CENTER"
 )
 }
 )
 ),
 addRowLink: a!dynamicLink(
 label: "Add",
 value: {
 id: count(
 local!data
 ) + 1
 },
 saveInto: a!save(
 local!data,
 append(
 local!data,
 save!value
 )
 )
 )
 )
 }
 )
)

aloks0189 · Answer

@Ramanan As per my understanding, in this case you should avoid Custom Sorting for your Editable Grid. 
 
 Reason: 
 As per your statement, your editable grid contains 5 read-only field along with 1 editable field means when you perform sorting, you will loose your input data of the editable field or you can expect some data mismatch (in case, if you are trying to retain the input value using some manipulation logic) 
 
 When to go for Editable Grid with Sorting 
 When you have a requirement of representing the data in a Grid(read-only) and also want to make the use of rich text display field(this cannot be used while working with paging grid), in such case you need to go for editable grid (read-only). In this case you want to sort the row by using either an icon or a drop-down/drop-downs. 
 
 Hope this will help.