Last Row cut off when scrolled to bottom

[Charles]

I have a grid Static headers and AllowScroll set to true. When I scroll all the way down the last row is not completely visible. And worse, if you edit the row you can't see the edit controls at all. I am using the latest UI version and the latest IE. Please see the attached screen shot. How do I fix this?

Thanks.

Charles

​

<telerik:RadGrid ID="rgNotifications" runat="server" AutoGenerateColumns="False" CellSpacing="0"  AllowPaging="false" AllowSorting="true" Width="920px" Skin="Windows7"
    Height="265px" >
    <ClientSettings EnableRowHoverStyle="true">
        <Scrolling AllowScroll="True" UseStaticHeaders="true" />
    </ClientSettings>
    <MasterTableView  DataSourceID="sqldsNotificationAddresses" ShowGroupFooter="false" DataKeyNames="NotificationAddressID" Width="820px"
        EditMode="InPlace" CommandItemDisplay="Top"
        CommandItemSettings-AddNewRecordText="Add Employee Notification"
        AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowAutomaticDeletes="true" >

    <CommandItemSettings ShowRefreshButton="false" />
    <NoRecordsTemplate>
        <div class="ACHD1">There are no Employee Notifications.</div>
    </NoRecordsTemplate>
    <ColumnGroups>
        <telerik:GridColumnGroup HeaderText="Send Notification For:" Name="Notify">
            <HeaderStyle HorizontalAlign="Center" />
        </telerik:GridColumnGroup>
    </ColumnGroups>

    <Columns>
        <telerik:GridTemplateColumn HeaderText="Always<br />Notify on<br />Round Robin" UniqueName="NotifyRoundRobin">
            <ItemTemplate>
                <asp:CheckBox ID="cbAlwaysNotifyOnRoundRobin" runat="server" Checked='<%# Eval("AlwaysNotifyOnRoundRobin")%>' AutoPostBack="true" OnCheckedChanged="cbAlwaysNotifyOnRoundRobin_CheckChanged" />
            </ItemTemplate>
            <EditItemTemplate>
            </EditItemTemplate>
            <InsertItemTemplate>
            </InsertItemTemplate>
            <ItemStyle Width="55px" />
        </telerik:GridTemplateColumn>
        <telerik:GridBoundColumn HeaderText="Employee Name" DataField="EmployeeName">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn HeaderText="Email Address" DataField="EmailAddress">
        </telerik:GridBoundColumn>
        <telerik:GridMaskedColumn HeaderText="SMS Text Number" DataField="SMSPhoneNumber" Mask="(###) ###-####">
        </telerik:GridMaskedColumn>
        <telerik:GridTemplateColumn HeaderText="Contact-Us Lead" ColumnGroupName="Notify">
            <ItemTemplate>
                <asp:CheckBox ID="cbNotifyContactUsLead" runat="server" Checked='<%# Eval("NotifyContactUsLead")%>' AutoPostBack="true" OnCheckedChanged="cbNotifyContactUsLead_CheckChanged" />
            </ItemTemplate>
            <EditItemTemplate>
            </EditItemTemplate>
            <InsertItemTemplate>
            </InsertItemTemplate>
            <ItemStyle Width="55px" />
        </telerik:GridTemplateColumn>
        <telerik:GridTemplateColumn HeaderText="Credit App" ColumnGroupName="Notify">
            <ItemTemplate>
                <asp:CheckBox ID="cbNotifyCreditApp" runat="server" Checked='<%# Eval("NotifyCreditApp")%>' AutoPostBack="true" OnCheckedChanged="cbNotifyCreditApp_CheckChanged" />
            </ItemTemplate>
            <EditItemTemplate>
            </EditItemTemplate>
            <InsertItemTemplate>
            </InsertItemTemplate>
            <ItemStyle Width="55px" />
        </telerik:GridTemplateColumn>
        <telerik:GridTemplateColumn HeaderText="3rd Party Lead" ColumnGroupName="Notify">
            <ItemTemplate>
                <asp:CheckBox ID="cbNotifyEmailParserLead" runat="server" Checked='<%# Eval("NotifyEmailParserLead")%>' AutoPostBack="true" OnCheckedChanged="cbNotifyEmailParserLead_CheckChanged" />
            </ItemTemplate>
            <EditItemTemplate>
            </EditItemTemplate>
            <InsertItemTemplate>
            </InsertItemTemplate>
            <ItemStyle Width="55px" />
        </telerik:GridTemplateColumn>
        <telerik:GridButtonColumn ConfirmText="Delete this EmployeeNotification?" ConfirmDialogType="RadWindow"
            ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" UniqueName="DeleteColumn">
            <ItemStyle Width="30px" />
        </telerik:GridButtonColumn>
        <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditColumn">
            <ItemStyle Width="65px" />
        </telerik:GridEditCommandColumn>

    </Columns>
    </MasterTableView>
</telerik:RadGrid>

[Galin]

Hi Charles,

The described issue is replicated on my side therefore I will forward it to our developers. In the meantime please use the following js workaround

function onGridCreated(sender, args) {
    sender.repaint();
}

I hope this helps.

Regards,
Galin
Telerik

 

 

[Charles]

Hi Galin,

I added the function call to the client settings as below and it had no effect. Is this the correct place to put the event call?

<telerik:RadGrid ID="rgNotifications" runat="server" AutoGenerateColumns="False" CellSpacing="0"  AllowPaging="false" AllowSorting="true" Width="920px" Skin="Windows7"
    Height="265px" >
    <ClientSettings EnableRowHoverStyle="true" ClientEvents-OnGridCreated="onGridCreated">
        <Scrolling AllowScroll="True" UseStaticHeaders="true" />
    </ClientSettings>

thanks.

Charles

[Konstantin Dikov]

Hello Charles,

Could you please try the following workaround instead and see if it will make any difference on your end too:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function pageLoad() {
            var grid = $find("<%=rgNotifications.ClientID%>");
            grid.repaint();
        }
    </script>
</telerik:RadCodeBlock>

I have tested it with your exact RadGrid settings and it seems to fix the problem in IE 11.


Best Regards,
Konstantin Dikov
Telerik

 

 

[Martin]

grid.repaint(); alone does not work for us

what we do is that on window_resized() which gets called also when the grid is loaded, we take to account the bottom of the page, width of header and paging if applicable and calculate the size of the scrollable area

grid.get_element().style.height = (bottomOfPage.offsetTop - pagingValueAdjustment - headerValueAdjustement) + "px";

then we call

grid.repaint();