Unplanned
Last Updated: 15 Apr 2020 05:38 by ADMIN
Jeffrey
Created on: 08 Nov 2019 04:16
Category: Grid
Type: Feature Request
16
Ability to enable/disable checkbox in checkbox column to allow/prevent selection of the row
Subject says it all.  Would like the ability to selectively enable/disable a single checkbox in a checkbox column.
3 comments
ADMIN
Marin Bratanov
Posted on: 15 Apr 2020 05:38

You may also find interesting this idea: https://feedback.telerik.com/blazor/1454469-select-rows-only-with-checkboxes-clicking-the-rows-to-not-affect-selection

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Jeffrey
Posted on: 08 Nov 2019 13:54

Marin,

Thanks for the quick and detailed response

ADMIN
Marin Bratanov
Posted on: 08 Nov 2019 09:02

Hi Jeffrey,

This post will list three ideas I can offer for this, and it is a bit long. I have ordered them from least to most amount of code you'd need to write (which has an inverse relationship to the flexibility you can achieve).

For the time being you can handle the selection change event and loop the selected items, and take only those you want (which is not ideal, of course): https://docs.telerik.com/blazor-ui/components/grid/selection/multiple#selecteditemschanged-event.

Another option (which, in my opinion has slightly worse UX) is to use two-way binding for the selected items and only store the ones you want. The issue is that the checkbox will stay toggled even if the item does not get selected:

 

<TelerikGrid Data=@GridData
             SelectionMode="GridSelectionMode.Multiple"
             @bind-SelectedItems="SelectedItems"
             Pageable="true"
             Height="400px">
    <GridColumns>
        <GridCheckboxColumn />
        <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; }
    IEnumerable<Employee> _selItems { get; set; }
    public IEnumerable<Employee> SelectedItems { 
        get 
        {
            return _selItems;
        } 
        set
        { 
            _selItems = value.Where(empl => empl.EmployeeId != 2);
        }
    }

    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
        SelectedItems = GridData.Skip(2).Take(3).ToList();
    }

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

A third option is to implement the selection with your own code and disabled checkboxes in the column template, something like this:

 

<TelerikGrid Data=@GridData
             SelectionMode="GridSelectionMode.None"
             Pageable="true"
             Height="400px">
    <GridColumns>
        <GridColumn Field="@(nameof(Employee.EmployeeId))">
            <Template>
                @{ 
                    Employee empl = context as Employee;
                    <input type="checkbox" id="@("selCb_" + empl.EmployeeId)" class="k-checkbox" checked="@empl.Selected"
                          @onchange="@(e => SelectEmployee(empl, e))" @key="@empl.EmployeeId" disabled="@( empl.EmployeeId == 3 )" />
                    <label class="k-checkbox-label" for="@("selCb_" + empl.EmployeeId)">Select @empl.EmployeeId</label>
                }
            </Template>
        </GridColumn>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>

@if (SelectedItems.Count > 0)
{
    <ul>
        @foreach (Employee employee in SelectedItems)
        {
            <li>
                @employee.Name
            </li>
        }
    </ul>
}

@code {
    public List<Employee> GridData { get; set; }
    public List<Employee> SelectedItems { get; set; } = new List<Employee>();

    void SelectEmployee(Employee emplToSelect, ChangeEventArgs e)
    {
        bool isSelected = bool.Parse(e.Value.ToString());

        emplToSelect.Selected = isSelected;
        if(isSelected)
        {
            SelectedItems.Add(emplToSelect);
        }
        else
        {
            SelectedItems.Remove(emplToSelect);
        }
    }

    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
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool Selected { get; set; }
    }
}

 

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor