Checkbox event of FlexGridBehaviors

Checkbox event of FlexGridBehaviors

Posted by: soraroid on 21 April 2025, 8:47 pm EST

• 

  soraroid

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 April 2025, 8:47 pm EST

  Hello.

  I want to read the row value when the event occurs when the checkbox in each row is cheked with the mouse.

  ※ The value I want to change by clicking with the mouse is bchk.

  Please provide an example source.

  Thank you.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 22 April 2025, 1:53 am EST

  Hi,

  As per my understanding, you want to get the row data whenever the checkbox in checked/unchecked.

  By default, there is no event to detect when the checkbox is checked/unchecked. However, you could use the following to get the row index and the row data:

  <FlexGrid @ref="grid" ItemsSource="cities" Style="@("max-height:50vh; width: 50%")"
  IsVirtualizationEnabled="false">
      <FlexGridColumns>
          <GridColumn HeaderHorizontalAlignment="C1HorizontalAlignment.Center"
          Header="Selected" HorizontalAlignment="C1HorizontalAlignment.Center">
              <CellTemplate>
                  @{
                      var city = context as City;
                      <C1CheckBox IsChecked="city.Selected"
                      IsCheckedChanged="@(v => OnCheckChanged(v.Value, city))">
                      </C1CheckBox>
                  }
              </CellTemplate>
          </GridColumn>
      </FlexGridColumns>
  </FlexGrid>
  
  
  @code {
      IEnumerable<City> cities;
      FlexGrid? grid;
  
      protected override void OnInitialized()
      {
          cities = Customer.GetCities();
      }
  
      private void OnCheckChanged(bool? isChecked, City city)
      {
          city.Selected = isChecked == true;
          // Get row index using the Id
          var rowIndex = city.Id;
          // Get the Row Data
          City rowData = (City)grid.Rows[rowIndex].DataItem;
          Console.WriteLine($"Checkbox changed for city: {rowData.Name}, Checked: {rowData.Selected}, Row Index: {rowIndex}");
      }
  }

  You could also refer to the following forum case that discusses the same: https://developer.mescius.com/forums/blazor-edition/flexgrid-checklistbehavior-selection-changed

  Further, based on your requirement, you could also create custom column and implement the behaviour that you want. Refer to the following demo on creating custom column: https://developer.mescius.com/componentone/demos/blazor/blazorexplorer/FlexGrid/CustomDropDownColumn

  Let us know if you face any issues.

  Regards,

  Ankit

  FlexGrid_CheckBox.zip