Showing horizontal scrollbar when grid is empty

[Twistur]

This is our scenario:

• We have a GridView in a RadPane.
• We have the utility to add columns to the GridView separately as opposed to doing it thru the intrinsic GridView feature. There's just too much codebase that's why we continue with our current approach.
• We add columns dynamically thru codes

If we add more columns and some of them go beyond the visible portion of the grid, the horizontal scrollbar does not show. It shows only if we resize the RadPane hosting it or during load.

I'm pretty sure what we're trying to achieve will involve some code-behind effort. Could you please provide a sensible starting point?

[Vera]

Hi Twistur,

I have tried to reproduce this issue using the details you provided, but without any success. May I ask you to try our recently announced Q3 SP1 and see if you are able to get the described behavior? In case you are, please open a support ticket and send us a small project demonstrating the problem, that we can debug on our side.

Kind regards,
Vera
the Telerik team

[Chris Andrews]

I am also having a very similiar issue, only we do not add columns with code.

We have a GridView inside a TabControl.  The grid has 5 columns, the first column being a ComboBox in the EditTemplate.  If the grid is empty and I select a long value from the drop down, this expands the column width (which we do want) and any columns on the right that do not fit becomes hidden and there is no scrollbar to get to it.  I also see no scrollbars if I manually set the width on the grid which will push the rightmost columns off the grid.

I am using the Q3 2011.3.1220 version of the controls.

The only way to get the scrollbar is to switch tabs in the parent tab control.

With entries already in the grid, this works just fine.

[Vera]

Hello Chris,

Actually, this behavior is expected since you haven't bound the columns. The scrollbar will appear only when the columns are populated with data.

Regards,

Vera
the Telerik team

[Chris Andrews]

The issue is when adding new rows.  Since the data has not been submitted yet, the grid still thinks it is "empty".  As I mentioned before, if the user selects a long text item from the first column, you are unable to get to the right columns to enter data.  Since all fields are required this will throw an error when saving because there is a null value.

I suppose a workaround would be to enter data from Right to Left, but I am hoping of a better workaround.

To me, it seems like a bug.

[Vera]

Hello,

You have hit a bug that has already been logged into our PITS. Here you can track its status.
Unfortunately, at this point we cannot suggest any workaround for it.

Kind regards,
Vera
the Telerik team

[Josh]

I have found a workaround for this. First, create an empty style tag with id and runat attributes. Then, if your grid is ajaxified, make sure the style tag is updated when the grid makes ajax calls.

<style id="pageStyles" runat="server" type="text/css"></style>
<telerik:RadAjaxManagerProxy ID="rapProxy" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="grdMyGrid">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="grdMyGrid" LoadingPanelID="lplLoading" />
                <telerik:AjaxUpdatedControl ControlID="pageStyles" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

Now in the code-behind, simply capture the InitInsert command, check the number of items in the grid, and override the appropriate style:

protected void grdMyGrid_ItemCommand(object sender, GridCommandEventArgs e) {
    switch (e.CommandName) {
        case "InitInsert": {
                if (grdMyGrid.Items.Count == 0) {
                    pageStyles.InnerText += ".rgHeaderDiv { overflow: auto !important; }";
                } // end if
            } // end case
            break;
        default:
            break;
    } // end switch
} // grdMyGrid_ItemCommand()

Finally, make sure you reset the contents of the style tag on every Page_Load() or else the scrollbar will stick around.

protected void Page_Load(object sender, EventArgs e) {
    pageStyles.InnerText = "";
}

The only problem with this approach is that the scrollbar appears immediately below the insert row rather than at the bottom of the grid. However, I do consider this better than nothing. I hope this is useful!

[Yoan]

Hi Josh,

Thank you for providing this solution to the community. However, since this forum is for WPF,it would not work in this case.

Kind regards,
Yoan
the Telerik team