MVC Telerik 2019.2.619; Windows 10; Visual Studio 2017
I have a grid on a view and as long as I don't scroll horizontally I can resize the columns. Once I move the horizontal scrollbar just a little the resize handle moves also. Instead of finding it on the line between the columns it is found over in the column header area. Any idea what I am missing here?
Rich
My controller code for the read:
[HttpPost]
public IActionResult IssuesGrid_Read([DataSourceRequest]DataSourceRequest request)
{
List<IssuesForGrid> myData = new List<IssuesForGrid>();
myData.Add( new IssuesForGrid
{
IssueNumber = 1,
NonIngallsIssueNumber = "ABC-1",
Project = "PROJ1",
ShortDescription = "This is a test",
DetectionDate = DateTime.Now,
DetectedBy = "George",
Severity = "Low",
Status = "Open",
AssignedTo = "Mike",
ActionNeeded = true,
ActionNeededText = "Fix it",
Ecd = DateTime.Now,
DecisionNeeded = true,
DecisionDetails = "What is wrong",
Comments = "Not again lol"
});
IQueryable<IssuesForGrid> myIssues = myData.AsQueryable();
DataSourceResult result = myData.ToDataSourceResult(request);
return Json(result);
}
My View:
@{
ViewData["Title"] = "Home Page";
}
@using (Html.BeginForm(actionName: null, controllerName: null, method: FormMethod.Post, htmlAttributes: new { name = "myForm", id = "myForm", onkeydown = "return event.keyCode!=13" }))
{
@Html.AntiForgeryToken()
<div class="BordSolThinBlk MT50">
@(Html.Kendo().Grid<IssuesForGrid>()
.Name(componentName: "IssuesGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.IssueNumber))
.Read(read => read.Action(actionName: "IssuesGrid_Read", controllerName: "Home"))
.PageSize(pageSize: 100)
)
.Columns(columns =>
{
columns.Group(g0 => g0.Title("Issue General Information").HeaderHtmlAttributes(new { @class = "GridLightGreyHeader", style = "color:black !Important;" }).Visible(true)
.Columns(si =>
{
si.Bound(p => p.IssueNumber).Title(text: "Issue #").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
si.Bound(p => p.NonIngallsIssueNumber).Title(text: "Non-Ingall Issue #").Width(pixelWidth: 150).Filterable(value: true).Visible(true);
si.Bound(p => p.Project).Title(text: "Project").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
si.Bound(p => p.ShortDescription).Title(text: "Short Description").Width(pixelWidth: 150).Filterable(value: true).Visible(true);
si.Bound(p => p.DetectionDate).Title(text: "Detection Date").Width(pixelWidth: 125).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true);
si.Bound(p => p.DetectedBy).Title(text: "Detected By").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
}));
columns.Group(g1 => g1.Title("Issue Disposition").HeaderHtmlAttributes(new { @class = "GridLightGreyHeader", style = "color:black !Important;" }).Visible(true)
.Columns(ci =>
{
ci.Bound(p => p.Severity).Title(text: "Severity").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
ci.Bound(p => p.Status).Title(text: "Status").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
ci.Bound(p => p.AssignedTo).Title(text: "Assigned To").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
ci.Bound(p => p.ActionNeeded).Title(text: "Need Action").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
ci.Bound(p => p.ActionNeededText).Title(text: "Action Needed Comment").Width(pixelWidth: 500).Filterable(value: true).Visible(true);
ci.Bound(p => p.Ecd).Title(text: "ECD").Width(pixelWidth: 125).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true);
}));
columns.Group(g2 => g2.Title("Decision Info").HeaderHtmlAttributes(new { @class = "GridLightGreyHeader", style = "color:black !Important;" }).Visible(true)
.Columns(di =>
{
di.Bound(p => p.DecisionNeeded).Title(text: "Need Decision").Width(pixelWidth: 110).Filterable(value: true).Visible(true);
di.Bound(p => p.DecisionDetails).Title(text: "Decision Details").Width(pixelWidth: 500).Filterable(value: true).Visible(true);
}));
columns.Group(g3 => g3.Title("Issue Details").HeaderHtmlAttributes(new { @class = "GridLightGreyHeader", style = "color:black !Important;" }).Visible(true)
.Columns(ai =>
{
ai.Bound(p => p.Comments).Title(text: "Comments").Width(pixelWidth: 500).Filterable(value: true).Visible(true);
}));
})
.HtmlAttributes(new { @class = "H750 BordSolThinBlk" })
.Pageable(pageable => pageable.Input(enabled: true).Numeric(enabled: false).Refresh(enabled: true))
.Sortable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(false))
.Scrollable()
.Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))
.Filterable()
.ColumnMenu()
.Editable(editable => editable.Mode(GridEditMode.InCell))
)
</div>
<style>
.k-grid .k-alt {
background-color: lightgray; /* specify the alternate background-color */
}
</style>
}
My Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebApplication1</title>
<script src="~/js/site.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.aspnetmvc.min.js"></script>
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common.min.css" />
<link href="~/css/site.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
</div>
</nav>
<div class="container body-content">
@RenderBody()
<hr />
</div>
@RenderSection("Scripts", required: false)
</body>
</html>
4 Answers, 1 is accepted
Thank you for taking the time to report the behaviour that you have observed in your project. This is a known issue which is now fixed in our latest internal build available in your account:
https://github.com/telerik/kendo-ui-core/issues/5137#issuecomment-513178301
Please accept our apology for the inconvenience and let me know in case you have further questions.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Rank 1
Hi Alex,
good to know the issues is already known.
Is there a fix available or at least a workaround?
Best Regards
Rank 1
Hi Alex,
any update on this?
Should i open a support ticket?
Best regards
Andreas
The fix is available in the 2019.2.718 internal build but it should also be included in our next major release which is due today so you should be able to download it soon or use the CDN.
<script src="https://kendo.cdn.telerik.com/2019.3.917/js/kendo.all.min.js"></script>Kind Regards,
Alex Hajigeorgieva
Progress Telerik