Completed
Last Updated:
17 Sep 2019 12:17
by ADMIN
Release 2.0.0
Gordon
Created on:
06 May 2019 06:47
Category:
Grid
Type:
Bug Report
Horizontal scroll does not scroll headers
When there are wide columns that produce a horizontal scrollbar, scrolling horizontally does not scroll the headers. It must.
WORKAROUND (see also the rules for the containing div that provides the scroll):
<style> .k-grid, .k-grid-container, .k-grid-content.k-virtual-content { display: inline-block; }</style>
REPRODUCIBLE:
@using Telerik.Blazor.Components.Grid<div style="width: 1200px; overflow-x: auto; overflow-y:hidden; border: 1px solid red;"> <TelerikGrid Data="@trades" EditMode="inline" Pageable=true PageSize=10> <TelerikGridColumns> <TelerikGridCommandColumn width="100"> <TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton> <TelerikGridCommandButton Command="Update" Icon="save" ShowInEdit="true" OnClick="UpdateItem">Update</TelerikGridCommandButton> <TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true" OnClick="CancelItem">Cancel</TelerikGridCommandButton> </TelerikGridCommandColumn> <TelerikGridColumn Field="@(nameof(Trade.TradeId))" Width=100></TelerikGridColumn> @*<TelerikGridColumn Field="@(nameof(Trade.TradeType))" Width=200></TelerikGridColumn>*@ <TelerikGridColumn Field=@nameof(Trade.TradeType) Title="Trade Type"> <EditorTemplate> @{ var TradeToEdit = context as Trade; if (TradeToEdit.TradeType == "POWER PHYSICAL") { <select class="form-control d-inline" style="height: 30px" onchange=@SaveItem value=@TradeToEdit.TradeType> <option value="POWER PHYSICAL">POWER PHYSICAL</option> <option value="GAS PHYSICAL"> GAS PHYSICAL</option> </select> } else { <select class="form-control d-inline" style="height: 30px" onchange=@SaveItem value=@TradeToEdit.TradeType> <option value="GAS PHYSICAL"> GAS PHYSICAL</option> <option value="POWER PHYSICAL">POWER PHYSICAL</option> <option value="POWER PHYSICAL">POWER FINANCIAL</option> </select> } } </EditorTemplate> </TelerikGridColumn> <TelerikGridColumn Field="@(nameof(Trade.Company))" Width=500></TelerikGridColumn> <TelerikGridColumn Field="@(nameof(Trade.TradeDate))" Width=500></TelerikGridColumn> <TelerikGridColumn Field="@(nameof(Trade.BegTime))" Width=500></TelerikGridColumn> <TelerikGridColumn Field="@(nameof(Trade.EndTime))" Width=500></TelerikGridColumn> </TelerikGridColumns> </TelerikGrid></div>@functions { public class Trade { public int TradeId { get; set; } public string TradeType { get; set; } public string Company { get; set; } public DateTime TradeDate { get; set; } public DateTime BegTime { get; set; } public DateTime EndTime { get; set; } } public List<Trade> trades { get; set; } protected override void OnInit() { trades = new List<Trade>(); for (int i = 0; i < 25; i++) { trades.Add(new Trade() { TradeId = i, TradeType = "type " + i, Company = "company " + i, TradeDate = DateTime.Now.AddDays(i), BegTime = DateTime.Now.AddHours(-i), EndTime = DateTime.Now.AddHours(i) }); } } void SaveItem() { } public void UpdateItem(GridCommandEventArgs e) { } public void CancelItem(GridCommandEventArgs e) { }}
0 comments