Unplanned
Last Updated: 27 Jan 2023 09:18 by ADMIN
Buddhi
Created on: 20 Jan 2023 10:18
Category: UI for Blazor
Type: Bug Report
5
Edit Incell Mode Grouping issue in Blazor Telerik grid
I am using Telerik blazor grid and it is groupable and can be edited cell itself. i have used a button to group the grid.but after grouping when i am going to edit a cell ,entire grid is getting loaded.
following you can see a my code sample .how we can edit cell without loading grid .


@using System.ComponentModel.DataAnnotations 

<TelerikButton ThemeColor="primary" OnClick="@SetGridGroup">Group</TelerikButton>


<TelerikGrid Data=@MyData EditMode="@GridEditMode.Incell" Pageable="true" Height="500px"
            OnUpdate="@UpdateHandler" 
            OnEdit="@EditHandler" 
            OnDelete="@DeleteHandler"
            OnCreate="@CreateHandler" 
            OnCancel="@OnCancelHandler"
            Groupable="true">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add" Icon="@FontIcon.Plus">Add Employee</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
        <GridColumn Field=@nameof(SampleData.FirstName) Title="Name" />
        <GridColumn Field=@nameof(SampleData.LastName) Title="Last Name" />

        <GridColumn Field=@nameof(SampleData.Team ) Title="Team" />
        <GridCommandColumn>
            <GridCommandButton Command="Delete" Icon="@FontIcon.Trash">Delete</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>
@code {
    async Task SetGridGroup()
    {
        GridState<SampleData> desiredState = new GridState<SampleData>()
        {
            GroupDescriptors = new List<GroupDescriptor>()
            {
                new GroupDescriptor()
                {
                    Member = "Team",
                    MemberType = typeof(string)
                },
                
            },
            // choose indexes of groups to be collapsed (they are all expanded by default)
            CollapsedGroups = new List<int>() { 0 },
        };
        await Grid.SetStateAsync(desiredState);
    }
    void EditHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;
        // prevent opening for edit based on conditionif (item.ID < 3)
        {
            args.IsCancelled = true;// the general approach for cancelling an event
        }
        Console.WriteLine("Edit event is fired.");
    }
    async Task UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;
        await MyService.Update(item);
        await GetGridData();
        Console.WriteLine("Update event is fired.");
    }
    async Task DeleteHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;
        await MyService.Delete(item);
        await GetGridData();
        Console.WriteLine("Delete event is fired.");
    }
    async Task CreateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;
        await MyService.Create(item);
        await GetGridData();
        Console.WriteLine("Create event is fired.");
    }
    void OnCancelHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;
        Console.WriteLine("Cancel event is fired. Can be useful when people decide to not satisfy validation");
    }
    public class SampleData
    {
        publicint ID { get; set; }
        [Required]
        public string FirstName { get; set; }
        public string LastName { get; set; }

        public string Team {get;set;}
    }
    public List<SampleData> MyData { get; set; }
    async Task GetGridData()
    {
        MyData = await MyService.Read();
    }
    protected override async Task OnInitializedAsync()
    {
        await GetGridData();
    }
   publicstaticclassMyService
    {
        private static List<SampleData> _data { get; set; } = new List<SampleData>();
        public static async Task Create(SampleData itemToInsert)
        {
            itemToInsert.ID = _data.Count + 1;
            _data.Insert(0, itemToInsert);
        }
        publicstaticasync Task<List<SampleData>> Read()
        {
            if (_data.Count < 1)
            {
                for (int i = 1; i < 50; i++)
                {
                    _data.Add(new SampleData()
                    {
                        ID = i,
                        FirstName = "Name " + i.ToString(),
                        LastName = "Last Name " + i.ToString(),

                        Team="Team" +(i%5).ToString()
                    });
                }
            }
            returnawait Task.FromResult(_data);
        }
        public static async Task Update(SampleData itemToUpdate)
        {
            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
            if (index != -1)
            {
                _data[index] = itemToUpdate;
            }
        }
        public static async Task Delete(SampleData itemToDelete)
        {
            _data.Remove(itemToDelete);
        }
    }
}


1 comment
ADMIN
Svetoslav Dimitrov
Posted on: 27 Jan 2023 09:18

Hello Buddhi,

Thank you for bringing this to our attention, this is a valid bug report. As a small token of our appreciation, I have added Telerik Points to your account. 

I have renamed the article to denote the actual bug so that other people can find it more easily and give their votes. 

Regards,
Svetoslav Dimitrov
Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!