Hi Michal,

Please keep in mind that the statement in my last post targets the built-in selection. It is generally possible to use the standard built-in selection with RowTemplate (excluding the Checkbox selection). However, if you want to override that, so the user does not have to use either Ctrl or Shift to select multiple items, you should take full control of how the selection occurs. Similar to the approach listed here: https://docs.telerik.com/blazor-ui/knowledge-base/grid-select-or-deselect-item-on-row-click. 

A crucial part to ensure the custom selection will be working is to handle the SelectedItemsChanged event and do not execute any logic in it. Otherwise, the built-in selection may interfere with your custom logic in the OnRowClick handler. It is possible that you are hitting this in your app. 

I am not aware of your exact current configuration but I have prepared a runnable sample that shows custom selection on row click in a Grid that uses RowTemplate: https://blazorrepl.telerik.com/GxlvGHPb23TJTPGf23.

I hope that will help you achieve the desired result on your end.

Regards,
Nadezhda Tacheva
Progress Telerik

Hi Michal,

If the Checkbox selection is not enabled, the user must use either Ctrl or Shift to select multiple items. Please see Multiple row selection basics for more clarity.

For multiple selection on mobile devices (you've mentioned you are using a tablet), the only way to allow the user to select multiple rows is to enable Checkbox selection.

In case one is using a Row Template, the Checkbox selection cannot work out of the box as discussed earlier in this thread. Therefore, the selection should be handled by the developer. Still, you will need to render a cell with a custom Checkbox if you want to let the user select multiple rows on mobile devices. Please refer to the example that my colleague Marin sent on 30 Apr 2020 4:10 PM.

Regards,
Nadezhda Tacheva
Progress Telerik

Hi Michal,

Thank you for confirming that no Checkbox selection is needed! In this case, you can use the built-in multiple selection and two-way binding for the selected items. Let me provide details on both the discussed examples.

Multiple Selection specifics

When multiple selection is enabled and Checkbox selection is not enabled, the user can select multiple items by:

• Ctrl + Click (or Ctrl + Space when the Grid is navigable) - thus the user will select one item per click. This combination selects or deselects the current row, while persisting previously selected rows.
  
  
• Shift + Click (or Shift + Space when the Grid is navigable) - thus the user will select a range of items. This combination selects all the rows between the last selected one (with Space or mouse click) and the one holding the focused cell (or currently clicked cell).

Example I shared

In the example I shared, I am observing proper multiple selection when I am using the above-listed commands.

See attached a video of the result I am getting: grid-multiple-selection.

Example you shared

In the code you initially provided, I see you are handling the OnRowClick event to modify the SelectedItems collection. This effectively interferes with the built-in selection mechanism.

In addition, you have also included the CheckBox column and enabled CheckBoxOnlySelection as follows:

<GridCheckboxColumn CheckBoxOnlySelection="true" Visible="false" @key="@("sIDX1")" SelectAll="false" />

This is not needed if you do not want to implement Checkbox selection as you have informed me.

Here are the changes I suggest:

• Do not handle OnRowClick to alter the selection. Let the Grid handle that for you.
• Remove the GridCheckboxColumn declaration as you will not be using it.

I've modified your code and the selection behaves as expected on my end. Again, I am selecting items when holding Shift or Ctrl as per the Grid specification. I'm attaching the updated code, so you can test it on your end.

Take your time to revise that and please let me know if you are facing any other issues. If so, please open a dedicated ticket on the matter, so it can be addressed in the standard 24h support time. The feedback portal items generally have longer response time.

Regards,
Nadezhda Tacheva
Progress Telerik

Hi Michal,

When RowTemplate is used, you can still use two-way binding of the SelectedItems. The issue arises if one wants to use CheckBox selection. For this functionality, the Grid needs to render a CheckboxColumn which cannot happen if RowTemplate is used. In this case, the Grid no longer controls its own rendering, so the CheckBox selection has to be implemented by the app.

You've mentioned that you do not want any CheckBox but the example you've shared includes a CheckboxColumn. It may be a leftover, though, can you please confirm?

Other than that, you can use the standard selection: https://blazorrepl.telerik.com/GnbYcJFF34uUjfM721.

I've tested your sample but I do not see an issue, I am able to select all items in both Grids. Please let me know if I am missing something. You may open a dedicated ticket where we can discuss the specific use case.

Side note: The code snippet you provided uses ExpandoObject. We've registered a problem with that in REPL - there are no errors as you are saying but the code does not compile. We have logged it for fixing in a future version of the tool.

Regards,
Nadezhda Tacheva
Progress Telerik

Hello Ben,

You can use the HeaderTemplate to add a checkbox and implement the desired logic there too.

Regards,
Marin Bratanov
Progress Telerik

Hello Ben,

When the RowTemplate is used, you take over management of the model and this includes the selection. Perhaps the easiest way is to add a boolean field to the grid model to indicate selection so you can use it for the state of the checkbox.

<TelerikGrid Data=@GridData Pageable="true"
             SelectedItems="@SelectedItems"
             SelectionMode="GridSelectionMode.Multiple">
    <RowTemplate Context="employee">
        <td>
            <TelerikCheckBox Value="@employee.IsSelected" ValueChanged="@((bool value) => ChangeHandler(value, employee.EmployeeId))" />
        </td>
        <td>
            <img class="rounded-circle" src="@($"images/{employee.EmployeeId}.jpg")" alt="Alternate Text" />
            @employee.Name
        </td>
        <td>
            @employee.Team
        </td>
    </RowTemplate>
    <GridColumns>
        <GridColumn Title="Select" />
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>

@if (SelectedItems != null)
{
    <ul>
        @foreach (Employee employee in SelectedItems)
        {
            <li>
                @employee.Name
            </li>
        }
    </ul>
}

@code{
    public List<Employee> GridData { get; set; }
    public IEnumerable<Employee> SelectedItems { get; set; } = Enumerable.Empty<Employee>();

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }

        // select Employee with 3 through 5. Not required
        SelectedItems = GridData.Skip(2).Take(3).ToList();
        foreach (var item in SelectedItems)
        {
            item.IsSelected = true;
        }
    }

    void ChangeHandler(bool isSelected, int employeeId)
    {
        Employee currEmployee = GridData.Where(empl => empl.EmployeeId == employeeId).First();
        if (currEmployee != null)
        {
            //update the model first
            currEmployee.IsSelected = isSelected;
            
            //handle selected items collection
            var itemsToSelect = SelectedItems.ToList();
            if (isSelected)
            {
                itemsToSelect.Add(currEmployee);
            }
            else
            {
                itemsToSelect.Remove(currEmployee);
            }
            SelectedItems = new List<Employee>(itemsToSelect);
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        // for row selection with a row template
        public bool IsSelected { get; set; }
    }
}

Regards,
Marin Bratanov
Progress Telerik