Completed
Last Updated: 10 Dec 2019 17:45 by ADMIN
Release 2.6.0
Eric
Created on: 29 Aug 2019 10:29
Category: Grid
Type: Feature Request
10
Grid editors should take 100% width of the cell
At the moment, the editors in the grid have a fixed width. This makes them too narrow when the column is wide, or too wide when a column is narrow.
4 comments
ADMIN
Marin Bratanov
Posted on: 10 Dec 2019 17:45

This will be released in 2.6.0, and to get fixed for the regular string textboxes, this needs to be done as well: https://feedback.telerik.com/blazor/1435183-incorrect-textbox-rendering-issues-with-bootstrap-and-setting-width-has-no-effect-when-label-is-used. If it is not implemented by 2.6.0, here's a workaround you can use for the textboxes until it gets implemented:

    table.k-grid-table span.telerik-blazor,
    table.k-grid-table .k-textbox {
        width: 100%;
    }

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ADMIN
Marin Bratanov
Posted on: 01 Sep 2019 11:19

Hi Will,

This is logged for improvement, and you can Follow it here: https://feedback.telerik.com/blazor/1409173-ensure-filter-buttons-are-always-visible-and-the-inputs-are-responsive.

On whether it needs a separate issue - I'd say yes from the perspective of how development is done and that editors are separate from filters.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Will
Posted on: 30 Aug 2019 15:50
There's a possibly-related problem with the filter input-box/button at the top of a grid, which appears to be fixed-width, so it doesn't fill a wide column but is truncated on the right of a narrow column.  I don't know if this needs a separate issue filed, but fixed-width elements in something like a table/grid seems like it's going to be a problem wherever it occurs.
ADMIN
Marin Bratanov
Posted on: 29 Aug 2019 10:38

Hi,

A workaround for the time being can be to use custom editor templates and put a component with width=100% there:

@using Telerik.Blazor.Components.Grid
@using Telerik.Blazor.Components.TextBox

<TelerikGrid Data=@MyData EditMode="inline" Pageable="true" Height="500px">
    <TelerikGridColumns>
        <TelerikGridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
        <TelerikGridColumn Field=@nameof(SampleData.Name) Title="Name" Width="70px">
            <EditorTemplate>
                @{
                    CurrentlyEditedEmployee = context as SampleData;
                    <TelerikTextBox @bind-Value="CurrentlyEditedEmployee.Name" Width="100%"></TelerikTextBox>
                }
            </EditorTemplate>
        </TelerikGridColumn>
        <TelerikGridColumn Field=@nameof(SampleData.Role) Title="Position" Width="500px">
            <EditorTemplate>
                @{
                    CurrentlyEditedEmployee = context as SampleData;
                    <TelerikTextBox @bind-Value="CurrentlyEditedEmployee.Role" Width="100%"></TelerikTextBox>
                }
            </EditorTemplate>
        </TelerikGridColumn>
        <TelerikGridCommandColumn>
            <TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
        </TelerikGridCommandColumn>
    </TelerikGridColumns>
    <TelerikGridEvents>
        <EventsManager OnUpdate="@UpdateHandler"></EventsManager>
    </TelerikGridEvents>
</TelerikGrid>

@code {
    public SampleData CurrentlyEditedEmployee { get; set; }

    public void UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        var matchingItem = MyData.FirstOrDefault(c => c.ID == item.ID);

        if (matchingItem != null)
        {
            matchingItem.Name = item.Name;
            matchingItem.Role = item.Role;
        }
    }

    protected override void OnInitialized()
    {
        MyData = new List<SampleData>();

        for (int i = 0; i < 50; i++)
        {
            MyData.Add(new SampleData()
            {
                ID = i,
                Name = "name " + i,
                Role = Roles[i % Roles.Count]
            });
        }
    }

    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Role { get; set; }
    }

    public List<SampleData> MyData { get; set; }

    public static List<string> Roles = new List<string> { "Manager", "Employee", "Contractor" };
}

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor