Ukrywanie/wyświetlanie paska przewijania siatki Kendo

Question

Chcę pokazać pasek przewijania siatki kendo tylko wtedy, gdy jest to konieczne. Oto moja inicjalizacji sieci:

@(Html.Kendo().Grid<UT.Repo.Core.up_HedgedCustomerLatestTradeListGet_Result>() 
    .Name("lastPositionsGrid") 
    .Columns(columns => 
    { 
     columns.Bound(c => c.ACCOUNT).Title("Hesap").Width(70); 
     columns.Bound(c => c.TICKET).Title("Emir"); 
     columns.Bound(c => c.SIDE).Title("Yön").Width(50); 
     columns.Bound(c => c.STATE).Title("Durum").Width(65); 
     columns.Bound(c => c.SYMBOL).Title("Sembol"); 
     columns.Bound(c => c.VOLUME).Title("Hacim").Width(65); 
     columns.Bound(c => c.OPENPX).Title("Açılış"); 
     columns.Bound(c => c.CLOSEPX).Title("Kapanış"); 
     columns.Bound(c => c.P_L).Title("Kar Zarar").Width(75); 
     columns.Bound(c => c.SL).Title("Zararı Durdur"); 
     columns.Bound(c => c.TP).Title("Karı Al"); 
     columns.Bound(c => c.TIME).Title("Zaman").ClientTemplate("#= kendo.toString(TIME, \"dd/MM/yyyy HH:mm:ss\") #").Width(160); 
    }) 
    .Scrollable() 
    .Sortable() 
    .Resizable(resize => resize.Columns(true)) 
    .Events(events => events.DataBound("onLastPositionsGridDataBound")) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .Sort(sort => sort.Add("TIME").Descending()) 
     .Read(read => read.Action("HedgedCustomerLatestTradeListGet", "Home")) 
    ) 
) 

O danych związany Próbuję ustawić widoczność paska przewijania:

function onLastPositionsGridDataBound(e) { 
    var gridHeight = $("#lastPositionsGrid").outerHeight(); 
    var gridHeaderHeight = $("#lastPositionsGrid table:eq(0)").outerHeight(); 
    var gridBodyHeight = $("#lastPositionsGrid table:eq(1)").outerHeight(); 
    if (gridHeight < gridHeaderHeight + gridBodyHeight) { // show the scrollbar 
     $("#lastPositionsGrid .k-grid-header").css('padding', ''); 
     $("#lastPositionsGrid .k-grid-header").css('padding-right', '17px'); 
     $("#lastPositionsGrid .k-grid-content").css('overflow-y','scroll'); 
    } 
    else { // hide the scrollbar 
     $("#lastPositionsGrid .k-grid-header").css('padding','0 !important'); 
     $("#lastPositionsGrid .k-grid-content").css('overflow-y', 'visible'); 
    } 
} 

Część, która ukrywa pasek przewijania wykonuje swoją pracę dobrze, ale część, która pokazuje pasek przewijania nie. Oto zrzut ekranu po okazaniu przewijania:

Jak widać linie te oddzielają komórki w nagłówku i wiersze nie pasuje. Jak mogę to naprawić?

Answer 1

to zadziała, spróbuj przelać automatycznie zawsze.

function onLastPositionsGridDataBound(e) { 
    var gridHeight = $("#lastPositionsGrid").outerHeight(); 
    var gridHeaderHeight = $("#lastPositionsGrid table:eq(0)").outerHeight(); 
    var gridBodyHeight = $("#lastPositionsGrid table:eq(1)").outerHeight(); 
    if (gridHeight < gridHeaderHeight + gridBodyHeight) { // show the scrollbar 
     $("#lastPositionsGrid .k-grid-header").css('padding', ''); 
     $("#lastPositionsGrid .k-grid-header").css('padding-right', '17px'); 
     $("#lastPositionsGrid .k-grid-content").css('overflow-y','auto'); 
    } 
    else { // hide the scrollbar 
     $("#lastPositionsGrid .k-grid-header").css('padding','0 !important'); 
     $("#lastPositionsGrid .k-grid-content").css('overflow-y', 'auto'); 
    } 
} 

Answer 2

Dam ci prostą odpowiedź "hakera". Jeśli masz kod, który może poprawnie zdecydować, kiedy ukryć pasek przewijania, ale nie może poprawnie zdecydować, kiedy pokazać pasek przewijania, rozwiązanie jest oczywiste. Zawsze pokazuj pasek przewijania, THEN uruchom swój kod, aby zdecydować, czy chcesz go ukryć.

Answer 3

Właśnie zmieniłem dwie rzeczy w twoim javascript i działało jak czar. Dzięki

1. Zmiana wartości od 17px do 21px. Więc w zasadzie musisz znaleźć właściwą wartość padding-right.

2. Zmiana wartości z '0 !important' na '0px'. Aby naprawić nagłówek, nie wyświetlaj dodatkowej kolumny na końcu.

Answer 4

Ponieważ są ręcznie ustawiając pasek przewijania do siatki, siatka nie ma pojęcia o tej zmianie. Aby to naprawić, po prostu wypełnij kolumnę po zakończeniu wyświetlania lub ukrywania paska przewijania. Więc wewnątrz twojej funkcji onLastPositionsGridDataBound po twoim, jeśli chcesz ustawić/ukryć pasek przewijania, automatycznie dopasuj kolumny, więc umieść ten kod po znaku if if.

var grid = $("#lastPositionsGrid").data("kendoGrid"); 
for (var i = 0; i < grid.columns.length; i++) { 
     grid.autoFitColumn(i); //autofit each column. 
} 

Daj mi znać, jeśli to pomoże.