Resizing column does not work when horizontal scroll is moved

[Durgesh]

Hello,

I am using kendo grid in ASP.net core. 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? I did a search on the forum and I found it was a bug on old version but mine is update to last version.

<div class="row">
    <div class="col col-md-offset-11 mt-3 suite-projects-grid" data-archive-mode="false">
        @(Html.Kendo().Grid<Models.WebProject>
            ()
            .Name("suite-projects-grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.name)
                        .ClientTemplate("# if (name != null) { #<a href='../project/#=name#/#=_id#'>#=name#</a># } else { #" + "" + "# } #")
                        .Title(Localizer.Text("Project Name")).Filterable(true);
                columns.Bound(p => p.created_date).Title("Created date").Format("{0: dd/MM/yyyy}").Filterable(false).Width(200);
                columns.Bound(p => p.model_count).Title("Revit File(s)").Width(120).Filterable(false).Sortable(false);
                columns.Bound(p => p.job_count).Title("Work Order(s)").Width(100).Filterable(false).Sortable(false);
                columns.Bound(p => p.panel_count).Title("Panel(s)").Width(100).Filterable(false).Sortable(false);
                //columns.Command(command => command.Custom("menu").Template("<i class='fas fa-bars'></i>").Click("showDetails")).Width(100);
                columns.Bound(p => p.archived)
                        .ClientTemplate("# if (!archived) { #<button class='btn btn-default' title='Archive Project'><i class='fas fa-file-archive'></i></button># } else { #<button class='btn btn-default' title='UnArchive Project'><i class='far fa-file-archive'></i></button># } #")
                        .HtmlAttributes(new { @class = "k-grid-archiveProject text-center" })
                        .Title(" ").Filterable(false).Width(70);
                columns.Command(command => command.Custom("PurgeProject").Text(" ").HtmlAttributes(new { @class = "btn-default", title = "Purge Project" })
                        .IconClass("fas fa-trash").Click("purgeProject")).Width(65);
                columns.Command(command => command.Custom("ManageProjectsUsers").Text(" ").HtmlAttributes(new { @class = "btn-default", title = "Manage Projects Users" })
                        .IconClass("fas fa-user").Click("manageProjectUsers")).Width(50);

            })

            .Sortable()
            .Filterable()
            .Resizable(resize => resize.Columns(true))
            .Pageable(pager => pager
                .Input(true)
                .Numeric(false)
                .Refresh(true)
            )
            .Scrollable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(100)
                .ServerOperation(false)
                .Events(events =>
                {
                })
                .Model(model =>
                {
                    model.Id(p => p._id);
                })
                .Read(read => read.Action("ProjectsPartial", "Project").Data("gerArchiveParam"))
            )
        )
    </div>
</div>

[Viktor Tachev]

Hi Durgesh,

 

The behavior you describe was an issue with a previous version of the components. Please make sure that you are using the latest release of the components and see how the behavior changes. The JavaScript and CSS files should have a corresponding version as well. The current release is 2020.2.513.

 

Regards,
Viktor Tachev
Progress Telerik