Declined
Last Updated: 01 May 2020 07:33 by ADMIN
ben
Created on: 28 Apr 2020 17:52
Category: Grid
Type: Feature Request
1
Grid Row Template with Selection - Unsure how to Bind to Selected Item

Looking through the examples I can't find one with SelectionMode="GridSelectionMode.Multiple" and using a RowTemplate.

ADMIN EDIT: This is not a bug in the component, an example of how this can be implemented by the app is available in the comments.

I'm not sure what I should be binding my checkbox to so it accurately reflects selection state.

From the RowTemplate Example adding SelectionMode:

<TelerikGrid Data=@GridData

@bind-SelectedItems="@SelectedItems"

SelectionMode="GridSelectionMode.Multiple" Height="@Height">

<RowTemplate Context="product">  @*Trying to inspect what is generated in the examples I came up with this, but not sure what to bind to checked*@

<td role="gridcell" colspan=0 data-col-index="0">
                    <span>
                        <input class="k-checkbox k-grid-checkbox telerik-blazor" type="checkbox" />
                    </span>
                </td>

<td> <img class="rounded-circle" src="@($"images/{product.ProductId}.jpg")" alt="Alternate Text" /> @product.ProductName </td> <td> @(String.Format("{0:C2}", product.UnitPrice)) </td> </RowTemplate> <GridColumns> <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" /> <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price" /> </GridColumns> </TelerikGrid>

3 comments
ADMIN
Marin Bratanov
Posted on: 01 May 2020 07:33

Hello Ben,

You can use the HeaderTemplate to add a checkbox and implement the desired logic there too.

 

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.
ben
Posted on: 30 Apr 2020 14:38

Marin,

What is the recommended guidance for the column header if one desires to click and 'select all'?  The current example provides a static column.

 

 

ADMIN
Marin Bratanov
Posted on: 30 Apr 2020 13:10

Hello Ben,

When the RowTemplate is used, you take over management of the model and this includes the selection. Perhaps the easiest way is to add a boolean field to the grid model to indicate selection so you can use it for the state of the checkbox.

<TelerikGrid Data=@GridData Pageable="true"
             SelectedItems="@SelectedItems"
             SelectionMode="GridSelectionMode.Multiple">
    <RowTemplate Context="employee">
        <td>
            <TelerikCheckBox Value="@employee.IsSelected" ValueChanged="@((bool value) => ChangeHandler(value, employee.EmployeeId))" />
        </td>
        <td>
            <img class="rounded-circle" src="@($"images/{employee.EmployeeId}.jpg")" alt="Alternate Text" />
            @employee.Name
        </td>
        <td>
            @employee.Team
        </td>
    </RowTemplate>
    <GridColumns>
        <GridColumn Title="Select" />
        <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; }
    public IEnumerable<Employee> SelectedItems { 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
            });
        }

        // select Employee with 3 through 5. Not required
        SelectedItems = GridData.Skip(2).Take(3).ToList();
        foreach (var item in SelectedItems)
        {
            item.IsSelected = true;
        }
    }

    void ChangeHandler(bool isSelected, int employeeId)
    {
        Employee currEmployee = GridData.Where(empl => empl.EmployeeId == employeeId).First();
        if (currEmployee != null)
        {
            //update the model first
            currEmployee.IsSelected = isSelected;
            
            //handle selected items collection
            var itemsToSelect = SelectedItems.ToList();
            if (isSelected)
            {
                itemsToSelect.Add(currEmployee);
            }
            else
            {
                itemsToSelect.Remove(currEmployee);
            }
            SelectedItems = new List<Employee>(itemsToSelect);
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        // for row selection with a row template
        public bool IsSelected { get; set; }
    }
}

 

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.