Editable Grid - Paging controlling number of records displayed per page

Question

Hi All, 
 
 Is it possible to limit the number of rows displayed by an editable grid? I currently implemented paging but I doesn't do anything to the actual grid it keeps showing all the records. Basically I would like to do like a read only grid - show only 5 records then next page the 5 next following records like that. Is this possible? 
 
 thanks again

Mike Schmitt · Accepted Answer

1) show your data in a read-only grid 
 2) add an icon-size column which contains an "edit" icon (for instance), which is a link 
 3) clicking on the "edit" icon copies that row's data temporarily into a local variable, and this is displayed in a section below the grid, in editable fields (also the "edit" icons in the original grid are disabled) 
 4) after edits are completed and the user clicks something (in that local section) to save their edits, the data is populated back to the database and the section closes, and links in the original grid become active again

Mike Schmitt · Answer

Maria said: when you say copies the data temporarily where are you doing that exactly? 
 The "where" is the local variable I also mentioned. To expand on that, I mean that you would declare a local variable (nominally at the top of the form with most other local variables you're using) that would initially be blank, but when you click a row's edit icon, you call a dynamic link that saves the data of the current row into that local variable (therefore ending up with it populated with a dictionary of the current row's data). This local variable would be what the "edit section" fields reference (and target for the saving of changes), and then when the user Saves, you would write that local variable's updated value back to the DB by some means. 
 Maria said: Is there any document or code that I can refer to? 
 There might be a recipe for something like this in the Appian Recipes if you dig, but I don't happen to know off the top of my head.

Abhishek Karumuru · Answer

hi Maria could you try this whole code and check? a!localVariables(
 local!items: {
 {item: "Item 1", qty: 1, unitPrice: 10},
 {item: "Item 2", qty: 2, unitPrice: 20},
 {item: "Item 3", qty: 3, unitPrice: 30},
 {item: "Item 4", qty: 4, unitPrice: 40},
 {item: "Item 5", qty: 5, unitPrice: 50},
 {item: "Item 6", qty: 6, unitPrice: 60},
 {item: "Item 7", qty: 7, unitPrice: 70},
 {item: "Item 8", qty: 8, unitPrice: 80},
 {item: "Item 9", qty: 9, unitPrice: 90},
 {item: "Item 10", qty: 10, unitPrice: 100}
 },
 local!pagingInfo: a!refreshVariable(
 value: a!pagingInfo(
 startIndex: 1,
 batchSize: 5,
 sort: a!sortInfo(field: "item", ascending: false())
 )),
 local!dataSubset:todatasubset(local!items,local!pagingInfo),


 { a!gridLayout(
 label: "Products",
 instructions: "Update the item name, quantity, or unit price.",
 headerCells: {
 a!gridLayoutHeaderCell(label: "Item"),
 a!gridLayoutHeaderCell(label: "Qty"),
 a!gridLayoutHeaderCell(label: "Unit Price"),
 a!gridLayoutHeaderCell(label: "Total", align: "RIGHT")
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 5),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2)
 },
 rows: a!forEach(
 items: local!dataSubset,
 expression: a!gridRowLayout(
 contents: {
 a!textField(
 value: fv!item.item,
 saveInto: fv!item.item
 ),
 a!integerField(
 value: fv!item.qty,
 saveInto: fv!item.qty
 ),
 a!floatingPointField(
 value: fv!item.unitPrice,
 saveInto: fv!item.unitPrice
 ),
 a!textField(
 value: dollar(tointeger(fv!item.qty) * todecimal(fv!item.unitPrice)),
 readOnly: true,
 align: "RIGHT"
 )
 }
 ) 
 ),
 height: "SHORT",
 rowHeader: 1
 ),
 a!sectionLayout(
 contents: {
 a!richTextDisplayField(
 align: "RIGHT",
 value: {
 a!richTextIcon(
 icon: "chevron-left",
 link: a!dynamicLink(
 saveInto: a!save(
 local!pagingInfo,
 a!pagingInfo(
 startIndex: local!pagingInfo.startIndex - local!pagingInfo.batchSize,
 batchSize: local!pagingInfo.batchSize,
 sort: local!pagingInfo.sort
 )
 ),
 showWhen: local!pagingInfo.startIndex > 1
 ),
 linkStyle: "STANDALONE"
 ),
 a!richTextItem(
 text: {
 char(32),
 a!richTextItem(
 text: {
 joinarray(
 {
 index(local!pagingInfo, "startIndex", null),
 char(45),
 if(
 (
 index(local!pagingInfo, "startIndex", null) + index(local!pagingInfo, "batchSize", null) - 1
 ) > local!dataSubset.totalCount,
 local!dataSubset.totalCount,
 (
 index(local!pagingInfo, "startIndex", null) + index(local!pagingInfo, "batchSize", null) - 1
 )
 )
 },
 char(32)
 )
 },
 style: "STRONG"
 ),
 char(32),
 joinarray({ "of", local!dataSubset.totalCount }, char(32)),
 char(32)
 }
 ),
 a!richTextIcon(
 icon: "chevron-right",
 link: a!dynamicLink(
 saveInto: a!save(
 local!pagingInfo,
 a!pagingInfo(
 startIndex: local!pagingInfo.startIndex + local!pagingInfo.batchSize,
 batchSize: local!pagingInfo.batchSize,
 sort: local!pagingInfo.sort
 )
 ),
 showWhen: local!pagingInfo.startIndex < local!dataSubset.totalCount - local!pagingInfo.batchSize
 ),
 linkStyle: "STANDALONE"
 )
 }
 )
 }
 )}
)

Mike Schmitt · Answer

It works for me when making the suggested correction. 
 To clarify, you need to pass the local pagingInfo variable into your Paging handler rule - the way you currently have it hardcoded will make it useless. rule!customPaginationRule(
 pagingInfo: local!pagingInfo,
 totalCount: local!dataSubset.totalCount
)

Maria · Answer

Thanks! now with this the rows are displaying correctly. Thank you very much for all the help!

Mike Schmitt · Answer

I recommend against this design approach in almost all cases. The reason is that even if you manually implement paging in your data that you load to show on the current editable grid "page", it gets VERY complicated to manage *updated* data when the paging controls are used. 
 Usually I will strongly recommend that if you need a PAGED grid, then you use a READ ONLY grid and add a control onto each row to open it SEPARATELY for editing (like in a small section below the grid), where the user can complete and SAVE edits prior to moving on to a different entry.

Mike Schmitt · Answer

This only holds true if the entire set of original row values is being loaded into local variable memory on the interface and held there (plus or minus edits from the user) until "save" time. However often when we have data we need to page over, it means our data set is so large that loading it all on the form would either run into performance implications, or be impossible overall. 
 Thus the standard style of loading for a paging grid is to query only paged sets (as determined by the paging controls) - this is what i consider as "true" paging, whereas the working solution above (loading all data but only displaying chunks of it at a time) is more of a "superficial" version of paging. In a "true" paging scenario, the local value would be essentially unloaded and replaced with the next "page" every time the page is switched, meaning that edits would need to somehow be taken care of before that, which is why I say it's tricky. 
 If the superficial approach will work for you (and you've already handled issues like field-by-field validations and requiredness settings, before the user changes the page each time, which is another hurdle), then it might be a feasible solution for you.

Mike Schmitt · Answer

Maria said: But with the last code Abhishek Karumuru provided is working. 
 The version I was able to get working still uses your external paging handler rule, though, if you were wanting to keep that.

Abhishek Karumuru · Answer

Could you try this code 
 a!localVariables(
 local!items: {
 {item: "Item 1", qty: 1, unitPrice: 10},
 {item: "Item 2", qty: 2, unitPrice: 20},
 {item: "Item 3", qty: 3, unitPrice: 30},
 {item: "Item 4", qty: 4, unitPrice: 40},
 {item: "Item 5", qty: 5, unitPrice: 50},
 {item: "Item 6", qty: 6, unitPrice: 60},
 {item: "Item 7", qty: 7, unitPrice: 70},
 {item: "Item 8", qty: 8, unitPrice: 80},
 {item: "Item 9", qty: 9, unitPrice: 90},
 {item: "Item 10", qty: 10, unitPrice: 100}
 },
 local!pagingInfo: a!refreshVariable(
 value: a!pagingInfo(
 startIndex: 1,
 batchSize: 5,
 sort: a!sortInfo(field: "item", ascending: false())
 )),
 local!dataSubset:todatasubset(local!items,local!pagingInfo),
 

 { a!gridLayout(
 label: "Products",
 instructions: "Update the item name, quantity, or unit price.",
 headerCells: {
 a!gridLayoutHeaderCell(label: "Item"),
 a!gridLayoutHeaderCell(label: "Qty"),
 a!gridLayoutHeaderCell(label: "Unit Price"),
 a!gridLayoutHeaderCell(label: "Total", align: "RIGHT")
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 5),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2)
 },
 rows: a!forEach(
 items: local!dataSubset,
 expression: a!gridRowLayout(
 contents: {
 a!textField(
 value: fv!item.item,
 saveInto: fv!item.item
 ),
 a!integerField(
 value: fv!item.qty,
 saveInto: fv!item.qty
 ),
 a!floatingPointField(
 value: fv!item.unitPrice,
 saveInto: fv!item.unitPrice
 ),
 a!textField(
 value: dollar(tointeger(fv!item.qty) * todecimal(fv!item.unitPrice)),
 readOnly: true,
 align: "RIGHT"
 )
 }
 ) 
 ),
 height: "SHORT",
 rowHeader: 1
 ),
 rule!customPaginationRule(
 pagingInfo: local!pagingInfo,
 totalCount: local!dataSubset.totalCount.
 )}
)

Abhishek Karumuru · Answer

Create a interface rule for pagination and call in the code where i have called rule!CustomPaginationrule: 
 a!sectionLayout(
 contents: {
 a!richTextDisplayField(
 align: "RIGHT",
 value: {
 a!richTextIcon(
 icon: "chevron-left",
 link: a!dynamicLink(
 saveInto: a!save(
 ri!pagingInfo,
 a!pagingInfo(
 startIndex: ri!pagingInfo.startIndex - ri!pagingInfo.batchSize,
 batchSize: ri!pagingInfo.batchSize,
 sort: ri!pagingInfo.sort
 )
 ),
 showWhen: ri!pagingInfo.startIndex > 1
 ),
 linkStyle: "STANDALONE"
 ),
 a!richTextItem(
 text: {
 char(32),
 a!richTextItem(
 text: {
 joinarray(
 {
 index(ri!pagingInfo, "startIndex", null),
 char(45),
 if(
 (
 index(ri!pagingInfo, "startIndex", null) + index(ri!pagingInfo, "batchSize", null) - 1
 ) > ri!totalCount,
 ri!totalCount,
 (
 index(ri!pagingInfo, "startIndex", null) + index(ri!pagingInfo, "batchSize", null) - 1
 )
 )
 },
 char(32)
 )
 },
 style: "STRONG"
 ),
 char(32),
 joinarray({ "of", ri!totalCount }, char(32)),
 char(32)
 }
 ),
 a!richTextIcon(
 icon: "chevron-right",
 link: a!dynamicLink(
 saveInto: a!save(
 ri!pagingInfo,
 a!pagingInfo(
 startIndex: ri!pagingInfo.startIndex + ri!pagingInfo.batchSize,
 batchSize: ri!pagingInfo.batchSize,
 sort: ri!pagingInfo.sort
 )
 ),
 showWhen: ri!pagingInfo.startIndex < ri!totalCount - ri!pagingInfo.batchSize
 ),
 linkStyle: "STANDALONE"
 )
 }
 )
 }
)

Editable Grid - Paging controlling number of records displayed per page

Top Replies