problem with scrolling in kendo grid asp.net core

[soroush]

hi telerik team

i'm using kendo grid in my project asp.net core 2.2. i use "k-rtl" css class in my grid. but i have skip problem!! when i run project and i click on columns to sort, it's dont work! In fact, when I click on the columns (to sort), this is not done and horizontal scrolling jumps! below gif: i need kendo grid in my project and use it in persian language( right to left language). i use Telerik_UI_for_ASP.NET_CORE version 2019.3.1023. please help me how i should fix this issue?

 

@model IEnumerable<DomainClasses.Person.Person>
@using Utilities.Convertor
@using Kendo.Mvc.UI
@{
    Layout = "_DefaultLayout2";
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>
    <a asp-action="Create">Create New</a>
</p>
<div class="row" style="color:#03db22">
    <div class="col-xl-12 k-rtl">
        <div id="grid">
            @{
                var maritalStatusTemplate = "# if (data.MaritalStatus==2) { # <i class='material-icons' style='color:limegreen;font-size:xx-large'>done</i> # } #";
                //var blueRayTemplate = "# if (data.BlueRay) { # <i class='fa fa-check' aria-hidden='true'></i> # } #";
            }

            @(Html.Kendo().Grid<DomainClasses.Person.Person>()
                                        .Name("grid")
                                        .Navigatable()
                                        .Sortable()
                                        .Editable()
                                        .Groupable()
                                        .Filterable()

                                    .Pageable(pg =>
                                    {
                                        pg.AlwaysVisible(true);
                                        pg.ButtonCount(5);
                                        pg.Enabled(true);
                                        pg.PageSizes(new int[] {5,10,20,30,40});
                                        pg.Refresh(true);
                                        pg.Responsive(true);
                                        pg.PreviousNext(true);
                                        pg.Numeric(true);
                                    })
                    .Scrollable(sc=>sc.Virtual(true))
                    .ToolBar(x => { x.Create(); })
                    .Columns(columns =>
                    {
                        columns.Bound(column => column.PersonType).EditorTemplateName("ClientPersonTypeEditor").Width(90);
                        columns.Bound(column => column.PersonId).Width(100);
                        columns.Bound(column => column.Name).Width(150);
                        columns.Bound(column => column.Family).Width(180);
                        columns.Bound(column => column.AliasName).Width(100);
                        columns.Bound(column => column.FatherName).Width(100);
                        columns.Bound(column => column.BirthDate).ClientTemplate("#: BirthDatePersian #").Width(110);
                        columns.Bound(column => column.BirthCertificate).Width(100);
                        columns.Bound(column => column.NationalNumber).Width(100);
                        columns.Bound(column => column.Province).Width(180);
                        columns.Bound(column => column.County).EditorTemplateName("ClientCountyEditor").Width(100);
                        columns.Bound(column => column.Village).Width(150);
                        columns.Bound(column => column.Street).Width(180);
                        columns.Bound(column => column.Madhhab).Width(100);
                        columns.Bound(column => column.MaritalStatus).ClientTemplate(maritalStatusTemplate).HtmlAttributes(new { style = "text-align: center" }).Width(100);
                        columns.Bound(column => column.NumberOfWife).Width(100);
                        columns.Bound(column => column.NumberOfBoy).Width(100);
                        columns.Bound(column => column.NumberOfGirl).Width(100);
                        columns.Bound(column => column.WNCAYIF).Width(100);
                        columns.Bound(column => column.PersonnelCode).Width(100);
                        columns.Bound(column => column.Workplace).Width(100);
                        columns.Bound(column => column.MembershipDate).ClientTemplate("#: MembershipDatePersian #").Width(110);
                        columns.Bound(column => column.MilitaryService).Width(100);
                        columns.Bound(column => column.ServiceOrgan).Width(100);
                        columns.Bound(column => column.Category).Width(100);
                        columns.Bound(column => column.PlaceOfTraining).Width(100);
                        columns.Bound(column => column.DateOfTraining).ClientTemplate("#: DateOfTrainingPersian #").Width(110);


                        columns.Command(column =>
                        {
                            column.Edit();
                            column.Destroy();
                        }).Locked().Width(200);
                    })
                    .DataSource(
                    ds => ds.Ajax()
                    .ServerOperation(true)
                    .PageSize(20)
                    .Read(r => r.Action("GetAllPersons", "People"))
                    )
                    )

        </div>
    </div>
</div>

 

[soroush]

admins telerik please help me plz

[Alex Hajigeorgieva]

Hi, Soroush,

Locked columns have a requirement for a set grid height which does not appear to have been met:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/columns/locked-columns

In addition to that, I can see that the grid is set to use virtualized mode which is also dependent on height as well as row heights. Furthermore, paging and virtual scrolling should not be used together, so if you would like to to use paging, remove the virtual setting from the scrollable configuration.

https://docs.telerik.com/kendo-ui/controls/data-management/grid/scrolling/virtual-scrolling

Give this a try and let us know in case you have further issues.

Regards,
Alex Hajigeorgieva
Progress Telerik

[soroush]

hi Alex and thanks for your answer

i set height to columns. also i remove virtual scroll and i remove locked column in my grid. but problem not solve! please see the below image to see my problem. when i use .k-rtl class (to right to left grid) i have this problem. when i click on column headers to sort column its jump!!! and i cant sort it's. or even i cant filter columns. but if i remove .k-rtl from div it solve.

 

[soroush]

plz, help me. I need quick help. thanks

[soroush]

No one to guide me? Admins plz

[Alex Hajigeorgieva]

Hi,

The issue that you describe is not reproducible with the same settings as you have enclosed here - I am attaching a project for your reference so you can inspect it and let us know if you notice any differences.

I noticed that there is an HTML div with an id grid - you should remove this or rename it as the grid initializes its own div with id the same as the Name(). The provided configuration will lead to invalid HTML.

In addition to that, the forums for ASP.NET Core have up to 72 hours response time. Once you become a licenced user you can take advantage of private responses up to 24 hours, pre-screening up to 4 hours as well as phone support so you can get quicker responses.

https://www.telerik.com/purchase/support-plans

Kind Regards,
Alex Hajigeorgieva
Progress Telerik