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>