or
Hi
Can we achieve sticky header on the grid with page scroll instead of having a scrollbar within a grid.
If you refer to any example: https://demos.telerik.com/aspnet-core/grid they have one scrollbar for grid n one for page. Can we eliminate grid n display all data rows n have a sticky header as we goes down?
<div id="divGrid">
@(Html.Kendo().Grid<dynamic>()
.Name("gridItem")
.Columns(columns =>
{
if (Model != null)
{
foreach (System.Data.DataColumn column in Model.Columns)
{
columns.Bound(column.ColumnName);
}
}
})
.Pageable()
.Sortable()
.Filterable()
.Groupable()
.Scrollable()
.HtmlAttributes(new { style = "width: 1800px; height: 600px;" })
.Events(e => e.DataBound("ModuleItem.OnColumnWidth"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
if (Model != null)
{
foreach (System.Data.DataColumn column in Model.Columns)
{
var field = model.Field(column.ColumnName, column.DataType);
field.Editable(false);
}
}
})
.Read(read => read.Action("Read", "Item"))
)
)
</div>
@section Scripts {
<script src="~/js/item.js" asp-append-version="true"></script>
}
var ModuleItem = (function () {
var init = function () {
};
var setColumnWidth = function () {
debugger;
var options = $("#gridItem").data("kendoGrid").getOptions();
for (i = 0; i < options.columns.length; i++) {
options.columns[i].width = "100px";
}
$("#gridItem").data("kendoGrid").setOptions(options);
};
return {
Init: init,
OnColumnWidth: setColumnWidth
};
})();
$(document).ready(function () {
ModuleItem.Init();
});
The kendo grid is bound dynamically from a datatable since the columns can be dynamic.
How to set the with of the columns. I am using the code as described but getting this error for each row. Also if I need to modify column attributes where should it be handled.
Uncaught TypeError: Cannot read properties of null (reading 'sort')