Unplanned
Last Updated: 20 Feb 2021 10:39 by ADMIN
Roy
Created on: 29 Dec 2020 16:52
Category: Grid
Type: Bug Report
3
When you use the checkbox to select a row, you cannot clear it if you cancel the SelectedItemsChanged event

---

ADMIN EDIT

Here is a workaround - using a bit of JS to clear the checked state of the checkbox element when you clear the SelectedItems collection:

At the end of this post you can find attached a sample project that showcases a more complex scenario where you may want to keep some rows selected but cancel the selection of others (in that sample, only one row with a given ItemType can be selected). It shows how you can get the index in the rendering of a particular row to use for a slightly modified version of the JS function.

 

@inject IJSRuntime _js

@*You should move this to a proper place for scripts,
 suppressing the error like this is just a hack to keep this sample code concise*@
<script suppress-error="BL9992">
    function uncheckGrid(parentElem) {
        var checkboxes = parentElem.querySelectorAll(".k-checkbox.k-grid-checkbox");
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = false;
        }
    }
</script>

<div @ref="@ParentElem">
    <TelerikGrid Data=@GridData
                 SelectionMode="@GridSelectionMode.Multiple"
                 SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
                 SelectedItems="@SelectedEmployees"
                 Pageable="true"
                 Height="400px">
        <GridColumns>
            <GridCheckboxColumn />
            <GridColumn Field=@nameof(Employee.Name) />
            <GridColumn Field=@nameof(Employee.Team) Title="Team" />
        </GridColumns>
    </TelerikGrid>
</div>
@if (SelectedEmployees != null)
{
    <ul>
        @foreach (Employee employee in SelectedEmployees)
        {
            <li>
                @employee.Name
            </li>
        }
    </ul>
}

@code {
    ElementReference ParentElem { get; set; }


    public List<Employee> GridData { get; set; }
    public IEnumerable<Employee> SelectedEmployees { 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
            });
        }
    }

    protected void OnSelect(IEnumerable<Employee> employees)
    {
        bool flag = true;
        foreach (Employee item in employees)
        {
            if(item.EmployeeId % 3 == 0)
            {
                flag = false;
            }
        }
        if (flag)
        {
            SelectedEmployees = employees;
        }
        else
        {
            SelectedEmployees = Enumerable.Empty<Employee>();
            _js.InvokeVoidAsync("uncheckGrid", ParentElem);
        }
    }

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

 

---

0 comments