Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 12 Aug 2022 06:42 by ADMIN
Roy
Created on: 29 Dec 2020 16:52
Category: Grid
Type: Bug Report
7
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; }
    }
}

 

---

Attached Files:
Duplicated Items
2 comments
ADMIN
Dimo
Posted on: 12 Aug 2022 06:42

Hi all,

This task is yet to be implemented. When we plan it, the status will change and you will get a notification. In the meantime, here are a couple of additional workarounds that do not require JavaScript and are likely more convenient to use:

Runnable REPL test page

Same code follows:

<p>Option 1 (recommended): Hide checkboxes of unselectable rows (non-active products):</p>

<TelerikGrid Data="@GridData"
             TItem="@Product"
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItems="@GridSelectedItems"
             SelectedItemsChanged="@OnGridSelectedItemsChanged1">
    <GridColumns>
        <GridCheckboxColumn OnCellRender="@OnCheckBoxCellRender1" />
        <GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
        <GridColumn Field="@nameof(Product.Active)" />
    </GridColumns>
</TelerikGrid>

<style>
    .no-selection .k-grid-checkbox {
        visibility: hidden;
    }
</style>

<p>Option 2: Revert selection of unselectable rows (non-active products):</p>

<TelerikGrid Data="@GridData"
             TItem="@Product"
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItems="@GridSelectedItems"
             SelectedItemsChanged="@OnGridSelectedItemsChanged2">
    <GridColumns>
        <GridCheckboxColumn />
        <GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
        <GridColumn Field="@nameof(Product.Active)" />
    </GridColumns>
</TelerikGrid>

<p> GridSelectedItems Count: @GridSelectedItems.Count().ToString() </p>

@code {
    List<Product> GridData { get; set; }
    IEnumerable<Product> GridSelectedItems { get; set; } = new List<Product>();
    IEnumerable<Product> GridSelectedItemsTemp { get; set; }

    void OnCheckBoxCellRender1(GridCellRenderEventArgs args)
    {
        var item = args.Item as Product;
        if (!item.Active)
        {
            args.Class = "no-selection";
        }
    }

    void OnGridSelectedItemsChanged1(IEnumerable<Product> newSelectedItems)
    {
        GridSelectedItems = newSelectedItems.Except(newSelectedItems.Where(x => !x.Active)).ToList();
    }

    void OnGridSelectedItemsChanged2(IEnumerable<Product> newSelectedItems)
    {
        GridSelectedItems = newSelectedItems;

        var exceptDisabled = newSelectedItems.Except(newSelectedItems.Where(x => !x.Active)).ToList();
        if (exceptDisabled.Count != GridSelectedItems.Count())
        {
            GridSelectedItemsTemp = newSelectedItems.Except(newSelectedItems.Where(x => !x.Active)).ToList();
        }
    }

    protected override void OnAfterRender(bool firstRender)
    {
        // for Grid 2 only
        if (GridSelectedItemsTemp != null)
        {
            GridSelectedItems = GridSelectedItemsTemp.ToList();
            GridSelectedItemsTemp = null;
            StateHasChanged();
        }

        base.OnAfterRender(firstRender);
    }

    protected override void OnInitialized()
    {
        GridData = new List<Product>();
        var rnd = new Random();

        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = "Product " + i,
                Active = i % 2 == 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public bool Active { get; set; }
    }
}

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Gert
Posted on: 11 Aug 2022 06:58
Any news on this? I would highly appreciate.
Create an account Log In
View
Type
Status
Category