KendoGrid dynamic

[AMRUTH]

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

The question is - "How to set the width of the columns" when the grid bound dynamically

[Alexander]

Hi Amruth,

I noticed that you have opened an identical internal inquiry regarding the same subject. For the benefit of the community, I'm posting my reply here as well.

"Upon my initial observations, I noticed that the behavior may be related to the fact that the logic responsible for setting the widths is not wrapped within a setTimeout() function.

Nevertheless, generally employing the logic responsible for changing the width of the columns will cause a stack overflow within the browser due to the fact that the .setOptions() will re-render the Grid. Meaning, that the DataBound handler will be re-fired.

I managed to omit the behavior by altering the "item.js" script in the following manner:

var ModuleItem = (function () {

    var init = function () {



    };

    var setColumnWidth = function () {

        setTimeout(function () {
            var options = $("#gridItem").data("kendoGrid").getOptions();
            for (i = 0; i < options.columns.length; i++) {
                options.columns[i].width = "5000px";
            }

            debugger;
            $("#gridItem").data("kendoGrid").setOptions({
                columns: options.columns
            });
        }, 100)
    };

    return {
        Init: init,
        OnColumnWidth: setColumnWidth
    };

})();

$(document).ready(function () {
    ModuleItem.OnColumnWidth();
});

Additionally, the Grid exposes Columns.Bound.Width() API configuration that can explicitly be set within the boundaries of the widget. In this regard, is there any particular reason that the configuration is not utilized on your side?

When it comes to configuring arbitrary HTML attributes for a given column, a possible recommendation would be to configure the Columns.Bound.HtmlAttributes() API configuration. For example:

.Columns(columns =>
{
    foreach (System.Data.DataColumn dcolumn in Model.Columns)
    {
        columns.Bound(dcolumn.ColumnName).HtmlAttributes(new {@class = "MyClass" }).Title(dcolumn.Caption);
    }
})

This would then produce the following result within the DOM:

"