Scroll bar

[Gosha]

When use grid in scrolling mode, there is scroll bar on right and that is ok. But when apply some filter so all items fit on 1 page, scroll bar dissaperar (what is normal), but all columns are moved to the right and are no longer aligned with the header. I use % column width so columns move to right when there is no scroll bar. How to tell column header to also move to the right to be aligned with data? Or, how to set scroll bar always visible to hold fixed columns width?

[Pavlina]

Hello Sasa,

When setting column widths, the recommended approach is to set HeaderStyle-Width only. Can you please try this and copy-paste your complete RadGrid declaration here if you still have issues with the alignment?

Greetings,
Pavlina
the Telerik team

[Gosha]

<telerik:RadGrid ID="rgArtikli" runat="server" AllowPaging="True" AllowSorting="True"
    GridLines="None" PageSize="15" ShowStatusBar="True" AllowFilteringByColumn="True"
    BorderStyle="None" AutoGenerateColumns="False" Visible="False" Width="100%">
    <ClientSettings AllowColumnsReorder="True" ColumnsReorderMethod="Reorder" EnableAlternatingItems="False"
        EnableRowHoverStyle="True" ReorderColumnsOnClient="True">
        <Selecting AllowRowSelect="True" />
        <ClientEvents OnRowContextMenu="RowContextMenu" />
        <Scrolling UseStaticHeaders="True" />
        <Resizing AllowColumnResize="True" EnableRealTimeResize="True" />
    </ClientSettings>
    <ItemStyle Wrap="False" />
    <AlternatingItemStyle Wrap="False" />
    <MasterTableView IsFilterItemExpanded="False" EditMode="PopUp" InsertItemDisplay="Bottom"
        PageSize="15" GridLines="None" DataKeyNames="ID">
        <Columns>
            <telerik:GridClientSelectColumn UniqueName="Selekcija">
                <HeaderStyle Width="38px" />
                <ItemStyle Width="38px" />
            </telerik:GridClientSelectColumn>
            <telerik:GridBoundColumn DataField="Naziv" HeaderText="Naziv" UniqueName="Naziv">
                <HeaderStyle Width="20%" />
                <ItemStyle Width="20%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Sifra" HeaderText="Šifra" UniqueName="Sifra">
                <HeaderStyle Width="10%" />
                <ItemStyle Width="10%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="JM" HeaderText="JM" UniqueName="JM">
                <HeaderStyle Width="5%" />
                <ItemStyle Width="5%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Kolicina" HeaderText="Kolicina" UniqueName="Kolicina"
                DataFormatString="{0:###,###.##}">
                <HeaderStyle HorizontalAlign="Right" Width="10%" />
                <ItemStyle HorizontalAlign="Right" Width="10%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Rezervacija" HeaderText="Rezervacija" UniqueName="Rezervacija"
                DataFormatString="{0:###,###.##}">
                <HeaderStyle Width="10%" HorizontalAlign="Right" />
                <ItemStyle HorizontalAlign="Right" Width="10%" />
            </telerik:GridBoundColumn>
            <telerik:GridNumericColumn DataField="Min_kol" HeaderText="Min.kol." UniqueName="Min_kol"
                DataFormatString="{0:###,###.##}">
                <HeaderStyle HorizontalAlign="Right" Width="10%" />
                <ItemStyle HorizontalAlign="Right" Width="10%" />
            </telerik:GridNumericColumn>
            <telerik:GridNumericColumn DataField="Nab_cena" HeaderText="Nab. cena" UniqueName="Nab_cena"
                DataFormatString="{0:###,###.00}">
                <HeaderStyle Width="10%" HorizontalAlign="Right" />
                <ItemStyle HorizontalAlign="Right" Width="10%" />
            </telerik:GridNumericColumn>
            <telerik:GridNumericColumn DataField="Pro_cena" HeaderText="Pro. cena" UniqueName="Pro_cena"
                DataFormatString="{0:###,###.00}">
                <HeaderStyle Width="10%" HorizontalAlign="Right" />
                <ItemStyle HorizontalAlign="Right" Width="10%" />
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn DataField="Porez" HeaderText="Porez" UniqueName="Porez"
                HeaderTooltip="Porez">
                <HeaderStyle Width="8%" />
                <ItemStyle Width="8%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Tip" HeaderText="Tip" UniqueName="Tip">
                <HeaderStyle Width="8%" />
                <ItemStyle Width="8%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Vrsta" HeaderText="Vrsta" UniqueName="Vrsta">
                <HeaderStyle Width="10%" />
                <ItemStyle Width="10%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Dobavljac" HeaderText="Dobavljac" UniqueName="Dobavljac">
                <HeaderStyle Width="10%" />
                <ItemStyle Width="10%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID">
            </telerik:GridBoundColumn>
        </Columns>
        <PagerStyle Mode="Slider" FirstPageToolTip="Prva strana" LastPageToolTip="Poslednja strana"
            NextPagesToolTip="Sledeca strana" NextPageToolTip="Sledeca strana" PagerTextFormat="Promeni stranu: {4} &nbsp;Strana <strong>{0}</strong> of <strong>{1}</strong>, items <strong>{2}</strong> to <strong>{3}</strong> of <strong>{5}</strong>."
            PageSizeLabelText="Broj artikala po strani:" PrevPagesToolTip="Prethodna strana"
            PrevPageToolTip="Prethodna strana" BorderStyle="Solid" ShowPagerText="False" />
        <FilterItemStyle Wrap="True" />
    </MasterTableView>
    <SelectedItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
        Font-Underline="False" Wrap="True" />
</telerik:RadGrid>

[Pavlina]

Hi,

You should remove ItemStyle-Width property from your code and use only HeaderStyle-Width to set column widths as shown below. 

<telerik:GridBoundColumn DataField="Naziv" HeaderText="Naziv" UniqueName="Naziv">
    <HeaderStyle Width="20%" />
</telerik:GridBoundColumn>

Greetings,
Pavlina
the Telerik team

[Gosha]

No help. Still happens the same. When scroll bar desapears, data goes (strech) to right but headers no.

[Pavlina]

Hello,

To align headers with items you should set either HeaderStyle HorizontalAlign property and ItemStyle HorizontalAlign. However, I am sending you a modified project which handles the desired functionality. Please examine it and let me know if it works for you.

Greetings,
Pavlina
the Telerik team

[Gosha]

Still does not work. Problem is somewhere else. I can point you to my project and send aspx file but that information can not be public, so how to do that?

Edit: I put information in my profile-interests so you can go and try. If you want code I can sent you

[Pavlina]

Hello Sasa,

You can try to upload the project on public site and send us the transfer link. Thus we will be able to test it locally and provide a solution.

Regards,
Pavlina
the Telerik team