Showing horizontal scrollbar when grid is empty

8 posts, 0 answers
  1. Twistur
    Twistur avatar
    28 posts
    Member since:
    Jun 2011

    Posted 20 Dec 2011 Link to this post

    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?

  2. Vera
    Admin
    Vera avatar
    265 posts

    Posted 21 Dec 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. Chris Andrews
    Chris Andrews avatar
    41 posts
    Member since:
    Mar 2010

    Posted 21 Jan 2012 Link to this post

    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.
  4. Vera
    Admin
    Vera avatar
    265 posts

    Posted 25 Jan 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  5. Chris Andrews
    Chris Andrews avatar
    41 posts
    Member since:
    Mar 2010

    Posted 25 Jan 2012 Link to this post

    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.
  6. Vera
    Admin
    Vera avatar
    265 posts

    Posted 25 Jan 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  7. Josh
    Josh avatar
    7 posts
    Member since:
    Nov 2012

    Posted 24 Jan 2013 Link to this post

    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!
  8. Yoan
    Admin
    Yoan avatar
    1182 posts

    Posted 25 Jan 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top