Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 05 Sep 2019 11:18 by ADMIN
Release 1.6.0
Gert
Created on: 06 May 2019 10:35
Category: Grid
Type: Feature Request
14
Grid row selection
I would like to be able to select a row visually and logically. This will let me pass the selection from one grid to another (for example, from a grid in a modal dialog to the main page).
4 comments
ADMIN
Marin Bratanov
Posted on: 31 Jul 2019 06:13
Thank you for sharing your code.

I would only advise that you use valid HTML markup, because the RowTemplate is rendered inside a <tr> element, so it must have only <td> elements as children, and their count must match the count of the grid columns (so it matches the header the grid generates).


Regards,
Marin Bratanov
Progress Telerik UI for Blazor
qw
Posted on: 30 Jul 2019 08:22
Hi all,
Built-in row selection would be great feature. Now I am using this workaround.

<TelerikGrid Data="Data">
    <TelerikGridColumns>
        <TelerikGridColumn Title=@T["Name"] Field="@nameof(Model.Name)" />
        <TelerikGridColumn Title=@T["ShortName"] Field="@nameof(Model.ShortName)" />
    </TelerikGridColumns>
    <RowTemplate Context="item">
        <div @onclick="@(e => ChangeSelection(e, item))" class="@(IsSelected(item) ? "table-active" : null)" style="display:contents">
            <td>@item.Name</td>
    <td>@item.ShortName</td>
        </div>
    </RowTemplate>
</TelerikGrid>

@code {
TItem SelectedItem { get; set; }

bool IsSelected(TItem item) => item.Equals(SelectedItem);

void ChangeSelection(UIMouseEventArgs e, TItem item)
{
if (IsSelected(item))
{
if (e.CtrlKey)
SelectedItem = default;

return;
}

SelectedItem = item;
}
}
ADMIN
Marin Bratanov
Posted on: 29 Jul 2019 05:17
Hi all,

This is getting popular and I am posting below a workaround devised for another ticket, which relies on a row template so you can have custom styling, a bit of binding expressions for updating the actual data, has a button that shows how you can execute logic on the current item (which you could also do through the checkbox events), and, most importantly, relies on a view model that knows whether an item is selected.

If you have solved this in a better way, you could post this here for everyone else to use until this becomes a built-in feature.

<style>
    .selected {
        background-color: red;
    }
</style>
 
@using Telerik.Blazor.Components.Grid
@using Telerik.Blazor.Components.Button
 
<TelerikGrid Data=@MyData Height="500px">
    <RowTemplate Context="employee">
        <td class="@(employee.Selected ? "selected" : "")"> @* consider adding such a class to all the cells to get uniform row appearance *@
            <input type="checkbox" @bind="(employee.Selected)" />
            @employee.Selected
            <TelerikButton class="k-button k-button-list-box w-100 btn align-self-start" OnClick="@( () => MoveToSelected(employee) )">Select @(employee.Name)</TelerikButton>
        </td>
        <td>
            <strong>@employee.Name</strong>
        </td>
        <td>
            Hired on: @(String.Format("{0:dd MMM yyyy}", employee.HireDate))
        </td>
    </RowTemplate>
    <TelerikGridColumns>
        <TelerikGridColumn Title="" Field="@nameof(SampleData.Selected)" Filterable="false"></TelerikGridColumn>
        <TelerikGridColumn Field=@nameof(SampleData.Name) Title="Employee Name" />
        <TelerikGridColumn Field=@nameof(SampleData.HireDate) Title="Hire Date" />
    </TelerikGridColumns>
</TelerikGrid>
 
@result
 
@{
    var selectedItems = MyData.Where(p => p.Selected == true);
 
    <ul>
        @foreach (SampleData item in selectedItems)
        {
            <li>@item.Name</li>
        }
    </ul>
}
 
@code {
    public class SampleData
    {
        public int ID { get; set; }
        public bool Selected { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }
 
    string result { get; set; }
 
    void MoveToSelected(SampleData selectedEmployee)
    {
        SampleData currDataItem = MyData.FirstOrDefault(e => e.ID == selectedEmployee.ID);
        if(currDataItem != null)
        {
            currDataItem.Selected = !currDataItem.Selected;
        }
        result = $"ButtonClickl: selected employees number: {MyData.Where(p => p.Selected == true).Count()}, last employee clicked on: {selectedEmployee.ID}";
 
        StateHasChanged();
    }
 
    public List<SampleData> MyData { get; set; } = Enumerable.Range(1, 50).Select(x => new SampleData
    {
        ID = x,
        Name = "name " + x,
        HireDate = DateTime.Now.AddDays(-x)
    }).ToList();
}


Regards,
Marin Bratanov
Progress Telerik UI for Blazor

Ramon
Posted on: 21 Jun 2019 14:06
  • Row selection unique column: RowSelectColumnName for example we would set grid.RowSelectColumnName = "Id"
  • Rows selected property: SelectedRows, grid.SelectedRows = [2, 6, 9] or ['aw', 'fe', gg'] etc... get; set;
Create an account Log In
View
Type
Status
Category