FlexGrid Button in CellTemplate Focus Click Behaviour

FlexGrid Button in CellTemplate Focus Click Behaviour

Posted by: james on 2 December 2024, 10:46 pm EST

• 

  james

  • Post Options:
  • Link
    Copy

  Posted 2 December 2024, 10:46 pm EST

  Hi

  I have a button column with a flexgrid, by using the “CellTemplate”:

  <GridColumn Header="Action">
      <CellTemplate>
          @{
              var item = (ShiftApplication)context;
          }
          <button @onclick="() => OnApproveClick(item)"
                  class="btn btn-primary btn-sm"
                  style="margin: 2px;">
              Approve
          </button>
      </CellTemplate>
  </GridColumn>

  If a different application on the computer is focused, such as windows explorer, and the user then moves their mouse to the button in the column and clicks the button, the behaviour is as follows:

  • the button animation shows as if the button was clicked.
  • the button click action does not happen.

  In other words, the webpage must have focus before clicking the button for the action to work.

  This is in contrast to the behaviour of a button that is not within the grid.
  
  If the button is not in the grid, then it works correctly.

  Is there anyway to change this behaviour?

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 3 December 2024, 2:24 am EST

  Hi,

  Thanks for sharing the code snippet with us. We were able to replicate the mentioned behaviour at our end with the latest version of the C1Library 8.0.20242.965, and we have escalated this to the concerned dev team for further investigation. The internal tracking id for the same is C1XAML-37448. We will let you know when there is more information on this from the dev team.

  As a workaround, you could use the “onmousedown” event that seems to be working fine:

          <GridColumn Header="Mouse Down" IsReadOnly="true">
              <CellTemplate>
                  @{
                      var item = (WeatherForecast)context;
                  }
                  <button @onmousedown="() => OnMouseDown(item)"
                          class="btn btn-primary btn-sm"
                          style="margin: 2px;">
                      Approve
                  </button>
              </CellTemplate>
          </GridColumn>

  Let me know if you face any issues. Attached is the sample with the workaround.

  Regards,

  Ankit

  CellTemplate_Focus.zip

• 

  james

  • Post Options:
  • Link
    Copy

  Posted 3 December 2024, 8:13 pm EST

  Hi Ankit

  Thanks for the confirmation, and the mousedown event.
  
  I’m guessing that won’t work for spacebar, and I am also curious if mousedown is triggered when finger pressed on a mobile.

  We are mid-project at the moment, so I may wait for the fix - which will hopefully be around the same time the cursor data source bugfix is released too, as we can’t upgrade before that point.

  Kind Regards
  
  James

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 5 December 2024, 3:34 am EST

  Hi James,

  yes, the mousdown and click events are different and pressing the spacebar on a button doesn’t fire the mousedown event because the spacebar simulates a click event for accessibility, not a direct mouse interaction.

  Yes, the mousedown event is triggered when a finger touches the screen over an element, in this case the button.

  We could wait for the update/fix on this issue from the dev team. I will update you once I have more information on this.

  Regards,

  Ankit