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
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
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