Is there a way to configure number of selected rows in BLAZOR GRID?

[Satish]

If I want to restrict the number of selected rows to just three, can I do this with a configuration or a property?  I am looking at the following demo.  Thanks!

https://demos.telerik.com/blazor-ui/grid/row-selection

[Hristian Stefanov]

Hi Satish,

To restrict the number of selected rows to just three, utilize the SelectedItemsChanged event. Here is an example:

<TelerikGrid Data="@GridData"
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItems="@SelectedEmployees"
             SelectedItemsChanged="@((IEnumerable<Employee> newSelected) => OnRowSelect(newSelected))"
             Pageable="true">
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" CheckBoxOnlySelection="false" />
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)" />
    </GridColumns>
</TelerikGrid>

<p><code>SelectedItemsChanged</code> fired at: @SelectedItemsChangedLog</p>

<h3>Selected Employees:</h3>
<ul>
    @foreach (Employee employee in SelectedEmployees)
    {
        <li>@employee.Name</li>
    }
</ul>

@code {
    private List<Employee> GridData { get; set; } = new();
    private IEnumerable<Employee> SelectedEmployees { get; set; } = Enumerable.Empty<Employee>();
    private string SelectedItemsChangedLog { get; set; } = string.Empty;

    protected void OnRowSelect(IEnumerable<Employee> newSelected)
    {
        // Enforce max selection of 3
        if (newSelected.Count() > 3)
        {
            // Optionally, show an alert or toast
            SelectedItemsChangedLog = $"Max 3 selections allowed. Reverted at {DateTime.Now.ToLongTimeString()}";
            return; // ignore change
        }

        SelectedEmployees = newSelected;
        SelectedItemsChangedLog = DateTime.Now.ToLongTimeString();
    }

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

        SelectedEmployees = new List<Employee>() { GridData.ElementAt(2) };
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
    }
}

Regards,
Hristian Stefanov
Progress Telerik

[Satish]

Hi Hristian,

The "OnRowSelect" event is not firing.  I have  the following rendermode.  Is this a problem?  

@rendermode @(new InteractiveServerRenderMode(prerender: false))

[Hristian Stefanov]

Hi Satish,

If the SelectedItemsChanged event is not firing in the example I shared in my initial message, there could be several possible reasons. One of them could indeed be related to the @rendermode not being configured correctly. For guidance on this topic, please refer to: Using TelerikRootComponent with Per Page/Component Interactivity.

Best,

Hristian

[Satish]

Hristian,

My code is as follows.  The event fires for GridCommandButton, but not for SelectedItemsChanged.

If the rendermode is not configured right, no event should have been fired.

<TelerikGrid Data="@availableSchedules" class="myTelerik-grid"
             SelectedItems="@selectedSchedules" 
             SelectedItemsChanged="@((IEnumerable<BTWInstructorAvailability> newSelected) => OnRowSelect(newSelected))"
             ScrollMode="GridScrollMode.Scrollable" Height="300px">
    <GridColumns>
        <GridCheckboxColumn CheckBoxOnlySelection="true" SelectAll="false" />
        <GridColumn Field="InstructorName" Title="Instructor Name" />
        <GridColumn Field="StartDate" DisplayFormat="{0:MM/dd/yyyy}" Title="Start Date" />
        <GridColumn Field="EndDate" DisplayFormat="{0:MM/dd/yyyy}" Title="End Date" />
        <GridColumn Field="Languages" Title="Languages" />
        <GridCommandColumn Context="categoryCommandContext">
            <GridCommandButton Command="Custom" OnClick="@CheckMaxSelection" ShowInEdit="false"
                               Class="myTelerik-grid-button">Select</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

[Hristian Stefanov]

Hi Satish,

From what I understand, the issue is that the SelectedItemsChanged event isn’t triggered when clicking the GridCommandButton. This is expected behavior, since the GridCommandButton performs programmatic selection. The SelectedItemsChanged event—and similar events—are primarily intended to respond to user-driven actions, such as clicking a row or making another direct selection.

If you need to run the same logic from SelectedItemsChanged when using a GridCommandButton, you’ll need to call that logic manually within the button’s handler.

Best,

Hristian

[Satish]

Hristian,

No I was not trying to call SelectedItemsChanged  when clicking the GridCommandButton.  The event SelectedItemsChanged  doesn't fire, when a row is selected when there is no GridCommandButton in TelerikGrid.

[Satish]

I finally figured out.  SelectionMode="GridSelectionMode.Multiple is missing!