How to get selected rows from grid

Hi, this question ist about row selection:
a) Is it possible to add a checkbox column to the grid by which individual rows can be checked/unchecked?

b) How can I get access to the selected row or rows f.e. by clicking a button "Get rows" outside the grid? If it will not work with multiple checked rows, is there a way to get the selected (highlited) row?

c) In the northwind demo I have seen that links in a row can be implemted (see screenshot). How can this be accomplished?

Thx a lot and best regards,
Frank

Hi Frank,

a) Is it possible to add a checkbox column to the grid by which individual rows can be checked/unchecked?

It is possible to put a checkbox. Here are a few forum threads that show how:


b) How can I get access to the selected row or rows f.e. by clicking a button "Get rows" outside the grid? If it will not work with multiple checked rows, is there a way to get the selected (highlited) row?

You can use the Value property of the DataGrid component. Set it to a page property. The DataGrid will store all selected data items in that property as an array.

c) In the northwind demo I have seen that links in a row can be implemted (see screenshot). How can this be accomplished?

This is implemented by using the Template of the DataGrid column. It can contain other components such as the Link. Here is how it looks in the Northwind demo.

Here are some instructions that show how to use the Template to customize the appearance of DataGrid columns.

Hi Atanas,
thank you for your quick help. I could only make it work partly :frowning:

a) I was able to add the checkbox column and in the running app check/uncheck the rows
b) But I was not able to utilize the grids property "value" as in my version this seems not to be there (see screenshot). Also I guess I have to add and remove items from "selectedItems" when the checkbox of the rows is changed or databind it. Is it done in the eventhandler of the checkbox or is that somehow automatic?


Best regards,
Frank

Hi Frank,

You seem to have created a Blazor application where the DataGrid still doesn't support multiple selection and doesn't have the Value property. This is something that we will implement.

Using a checkbox column is a workaround. You will have to update the selection from code. Here is how to do that.

  1. Handle the Change event of the Checkbox. Add Execute C# handler with the following value
  2. Create a new page property of type IList<YourEntity> e.g. IList<Category> with initial value new List<Category>(). For the moment you have to type that in the Type dropdown and then click the Add ... link (we are working on a better UI).
  3. Open the *.razor.cs file of that page (it is in the server\Pages directory) and implement the UpdateSelection method:
    public void UpdateSelection(Category category)
    {
      if (selection.Contains(category))
      {
        selection.Remove(category);
      }
      else
      {
        selection.Add(category);
      }

      StateHasChanged();
    }

Now when you check a record in the DataGrid the selection property will update.

Hi Atanas.,
great its working!!

I only had to add one thing: The "value" property of the checkbox must be set to "@GetCheckboxValue(adressen)"

and this function implemented in the cs-file:

  public bool GetCheckboxValue(Adressen adr)
        {
            if (selectedItems != null && selectedItems.Contains(adr))
                return true;
            return false;
        }

Then the checkboxes get their values from the collection.

Best regards,
Frank