Editable Grid

Certified Senior Developer

Is there any way to remove select all checkbox in editable grid?
we have requirement to select 1 item at a time. there is grid validation of selecting 1 item at time.
it shows error but is there any way to not even allowing to check the select all checkbox?

  Discussion posts and replies are publicly visible

  • 0
    Certified Lead Developer

    18.2 introduces a feature called "ROW_HIGHLIGHT". which can solve the header checkbox issue. Instead of selecting checkbox, you can click anywhere on your row to select it.
    In the previous versions, you cannot remove the select all checkbox. However you can design your grid to only allow one selection at a time which will automatically not allow you to check the select all checkbox.

    You can make use of the selection disabled feature of a!gridRowLayout() for that or you can write a logic that would allow only one selection and automatically uncheck the previous selection if any.

  • There is no provision to opt out Select All checkbox. Either you can have selection or you can disable it completely.
    As I can see you are using validations to ensure single item selection, whereas there is a logic for ensuring that only 1 item is selected at any point of time and this saves repetitive user clicks/actions. You can write that logic in selectionSaveInto.
    Hope I answered the question to your satisfaction, please let me know if otherwise.

  • I agree with other practitioners that there is no way we can hide only select all checkbox but one thing you can do is don't set Selectable as True but create one column of checkbox and handle the validations
  • yes, I agree with , we can either set selectable value as false and create a new column and handling the validations
  • 0
    Certified Senior Developer
    in reply to TJ
    Thanks TJ
    I think this functionality can be achieved by taking new column with radio buttons, to select 1 item at a time.
  • Hi  

    The same functionality can be achieved without taking an additional column of radio button. 

    Single selection can be achieved by writing the below logic in selectionSaveInto.

    selectionValue: ri!selectedIndex_int,
    selectionSaveInto: {
    ri!selectedIndex_int,
    if(
    count(ri!selectedIndex_int)=count(local!items),
    a!save(ri!selectedIndex_int,1),
    if(count(ri!selectedIndex_int)>1,ri!selectedIndex_int<<ldrop(ri!selectedIndex_int,1),{})
    )
    }
    )

     

    Please check the code snippet attached. Let me know if it helps.

    Regards,

    Sidhant Behura

    =load(
      local!items: {
        {id:1, item: "Item 1", qty: 1, unitPrice: 10},
        {id:2, item: "Item 2", qty: 2, unitPrice: 20},
        {id:3, item: "Item 3", qty: 3, unitPrice: 30},
        {id:4, item: "Item 4", qty: 4, unitPrice: 40}
      },
      local!selected,
      a!gridLayout(
        label: "Grid Layout",
        instructions: "Selected: " & ri!selectedIndex_int,
        headerCells: {
          a!gridLayoutHeaderCell(label: "Item"),
          a!gridLayoutHeaderCell(label: "Qty", align: "RIGHT"),
          a!gridLayoutHeaderCell(label: "Unit Price", align: "RIGHT"),
          a!gridLayoutHeaderCell(label: "Total", align: "RIGHT")
        },
        rows: {
          a!forEach(
            items: local!items,
            expression: a!gridRowLayout(
            id: fv!index,
            contents: {
                a!textField(
                value: fv!item.item,
                saveInto: fv!item.item
              ),
              a!integerField(
                value: fv!item.qty,
                saveInto: fv!item.qty,
                align: "RIGHT"
              ),
              a!floatingPointField(
                value: fv!item.unitPrice,
                saveInto: fv!item.unitPrice,
                align: "RIGHT"
              ),
              a!textField(
                value: dollar(tointeger(fv!item.qty) * todecimal(fv!item.unitPrice)),
                readOnly: true,
                align: "RIGHT"
              )
            }
          )
            
          )
          
          
        },
        selectable: true,
        selectionValue: ri!selectedIndex_int,
        selectionSaveInto: {
          ri!selectedIndex_int,
          if(
            count(ri!selectedIndex_int)=count(local!items),
            a!save(ri!selectedIndex_int,1),
            if(count(ri!selectedIndex_int)>1,ri!selectedIndex_int<<ldrop(ri!selectedIndex_int,1),{})
          )
          
          
         }
      )
    )
     

  • 0
    Certified Lead Developer

    You could also use an image field displaying a checkbox.

    load(
      local!data: {
        1,2,3
      },
      local!selectedIndex,
      a!gridLayout(
        label: "Editable Grid",
        labelPosition: "ABOVE",
        headerCells: {
          a!gridLayoutHeaderCell(label: ""),
          a!gridLayoutHeaderCell(label: "Data")
        },
        columnConfigs: {
          a!gridLayoutColumnConfig(width: "ICON"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE")
        },
        rows: a!forEach(
          items: local!data,
          expression: a!gridRowLayout(
            contents: {
              a!imageField(
                images: a!documentImage(
                  document: if(
                    fv!index = tointeger(local!selectedIndex),
                    cons!CHECKBOX_CHECKED,
                    cons!CHECKBOX
                  ),
                  link: a!dynamicLink(
                    saveInto: if(
                      tointeger(local!selectedIndex) = fv!index,
                      a!save(
                        target: local!selectedIndex,
                        value: null
                      ),
                      a!save(
                        target: local!selectedIndex,
                        value: fv!index
                      )
                    )
                  )
                )  
              ),
              a!textField(
                value: fv!item
              )
            }
          )
        )
      )
    )

  • 0
    Certified Lead Developer
    in reply to lukasm0001
    Using an image field in a grid might impact the overall screen performance as appian has to load the image for every row in the grid. If the grid size grows big then the number of images to be loaded will also grow to hamper the overall user experience.

    The best choice for this requirement would be to use the checkbox or radio button as suggested by Tj and parag.
  • 0
    Certified Lead Developer
    Hi Parag,

    Directly removing select all is not possible till v18.1. But workaround is to use radio button column instead of selection checkbox.
    Thanks.