Telerik Forums
UI for ASP.NET Core Forum
1 answer
193 views

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?

0 answers
42 views


<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')
    at init.refresh (kendo.all.js:313050:21)
    at init.trigger (kendo.all.js:313050:21)
    at init._process (kendo.all.js:313050:21)
    at init.success (kendo.all.js:313050:21)
    at success (kendo.all.js:313050:21)
    at n.success (kendo.all.js:313050:21)
    at c (jquery.min.js?v=sC4DguVhnpO_D28VleBggrIrr2VBjHPGn5MoyC7SJ0E:2:34433)
    at Object.fireWith [as resolveWith] (jquery.min.js?v=sC4DguVhnpO_D28VleBggrIrr2VBjHPGn5MoyC7SJ0E:2:35386)
    at l (jquery.min.js?v=sC4DguVhnpO_D28VleBggrIrr2VBjHPGn5MoyC7SJ0E:2:96312)
    at XMLHttpRequest.<anonymous> (jquery.min.js?v=sC4DguVhnpO_D28VleBggrIrr2VBjHPGn5MoyC7SJ0E:2:99172)
AMRUTH
Top achievements
Rank 1
 asked on 02 Oct 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?