resizeToFit for RadGrid?

8 posts, 0 answers
  1. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 28 Jan 2013 Link to this post

    Hi,

    I have used a javascript function that was provided in another post that causes auto generated columns to automatically be resized to fit  their content.  That works fine, except the grid's width continues to fill the width of the page.  Turning off scrollbars solves the issue, but I want scrollbars.

    I have tried the following, but I get an error saying that "width" is not a valid property.

    Any suggestions?

    Thanks in advance

    Jim

    function pageLoad() {
                    resizeGridCols();
                }
     
                function resizeGridCols()
                {
                    var grid = $find('<%=grdRACI.ClientID %>');
                    grid = $telerik.toGrid(grid);
                      
                    var columns = grid.get_masterTableView().get_columns();
                    // Resize the columns to fit their content
                    for (var i = 0; i < columns.length; i++) {
                        columns[i].resizeToFit();
                    }
                    // Resize the grid
                    var totalWidth = 0;
                    for (var i = 0; i < columns.length; i++) {
                        totalWidth = totalWidth + columns[i].style.width; // This statement fails!
                    }
                    grid.style.width = totalWidth  + "px"; // Not sure if this will work since I don't get here
                    grid.repaint();
                }
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 31 Jan 2013 Link to this post

    Hello Jim,

    I reviewed the described scenario but I'm not completely sure what is the exact problem you are currently experiencing with resize to fit functionality you have implemented. Could you please elaborates bit more on it and send screenshots which shows the issue that appear on your side?

    As for the js error, note that it is expected to face such an error as the columns collection returns collection of objects which does not have style.width properties. In your case you should use the following:
    totalWidth = totalWidth + columns[i].get_element().offsetWidth;



    All the best,
    Maria Ilieva
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 31 Jan 2013 Link to this post

    Hi,

    Thanks for the proper code to get the column width.
    I have attached a screenshot that should clearly show what I am trying to fix.
    I want the grid's width to match the newly resized columns.

    Any suggestions?

    Thanks

    Jim
  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 05 Feb 2013 Link to this post

    Hi Jim,

    Could you please post your RadGrid markup as well as the related code behind? Thus we will be able to review the settings you have for the controls nd do our best to provide proper solution for this behaviour.

    Regards,
    Maria Ilieva
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 05 Feb 2013 Link to this post

    Hi Maria,

    The declarations and code you requested:

    <div>
                            <telerik:RadGrid ID="grdRACI" Skin="Outlook" GridLines="Both" runat="server" AutoGenerateColumns="true"
                                OnItemDataBound="grdRACI_ItemDataBound" OnColumnCreated="grdRACI_ColumnCreated">
                                <MasterTableView>
                                </MasterTableView>
                                <ExportSettings HideStructureColumns="false" ExportOnlyData="false" IgnorePaging="true"
                                    OpenInNewWindow="true">
                                </ExportSettings>
                                <ClientSettings>
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                                    <Resizing AllowColumnResize="true" AllowResizeToFit="true" ResizeGridOnColumnResize="true" />
                                </ClientSettings>
                            </telerik:RadGrid>
                        </div>

    protected void grdRACI_ItemDataBound(object sender, GridItemEventArgs e)
    {
        try
        {
            if (e.Item is GridDataItem)
            {
                GridDataItem dataBoundItem = e.Item as GridDataItem;
                Int32 numRoleColumns = grdRACI.MasterTableView.AutoGeneratedColumns.Count(); // Yes, it should be 1 less than this because the 1st column is Task, but we're starting at column 1 in the for loop below
                String colName;
                String RACI_Value;
                for (int i = 1; i < numRoleColumns; i++)
                {
                    colName = grdRACI.MasterTableView.AutoGeneratedColumns[i].UniqueName;
                    RACI_Value = dataBoundItem[colName].Text;
                    if (RACI_Value.Contains("*"))
                    {
                        dataBoundItem[colName].Text = RACI_Value.Substring(0, RACI_Value.Length - 1);
                        dataBoundItem[colName].Style["background-color"] = "LightGreen";
                    }
                    dataBoundItem[colName].Style["text-align"] = "center";
                }
            }
        }
        catch (Exception ex)
        {
            string errorDesc = "Error at grdRACI_ItemDataBound in ITO_VE_Process_RACI";
            Tools.Log(errorDesc, ex);
            Response.Redirect("GlobalError.aspx");
        }
    }
     
    protected void grdRACI_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column.ColumnType == "GridBoundColumn")
        {
            if (e.Column.HeaderText != "Task")
            {
                GridBoundColumn col = (GridBoundColumn)e.Column;
                col.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
                //col.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
            }
        }
    }

    I also have code that loads the grid with data, but I did not include that as I felt it wasn't relevant.

    Let me know if you need anything else.

    Thanks

    Jim
  7. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 22 Feb 2013 Link to this post

    Hi,

    Any update on this issue?  It's been several weeks.
    Thanks

    Jim
  8. Wendelstam
    Wendelstam avatar
    48 posts
    Member since:
    Feb 2006

    Posted 10 Sep 2013 Link to this post

    Hi Jim.

    I am struggling with the same scenario, did you find any good solution that you would like to share with me?

    Thanks in advance.
    Johan
  9. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 10 Sep 2013 Link to this post

    Hi Johan,

    I did get this working, but it's been a while and I'm not sure exactly what I did to resolve it.
    Not what you wanted to hear, right?

    Anyway, here's what I have now.  I think the <Resizing> tag within the <ClientSettings> may have done it.
    I've included the RadGrid declaration as well as my OnItemDataBound and OnColumnCreated code behind handlers.
    Hopefully something here will help you.

    Jim

    The RadGrid declaration:
    <telerik:RadGrid ID="grdRACI" Skin="Outlook" GridLines="Both" runat="server" AutoGenerateColumns="true"
                                OnItemDataBound="grdRACI_ItemDataBound" OnColumnCreated="grdRACI_ColumnCreated">
                                <MasterTableView NoMasterRecordsText="No responsibilities defined" NoDetailRecordsText="No responsibilities defined">
                                </MasterTableView>
                                <ExportSettings HideStructureColumns="false" ExportOnlyData="false" IgnorePaging="true"
                                    OpenInNewWindow="true">
                                </ExportSettings>
                                <ClientSettings>
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                                    <Resizing AllowColumnResize="true" AllowResizeToFit="true" ResizeGridOnColumnResize="true" />
                                </ClientSettings>
                            </telerik:RadGrid>

    The OnItemDataBound and OnColumnCreated code:
    protected void grdRACI_ItemDataBound(object sender, GridItemEventArgs e)
    {
        try
        {
            if (e.Item is GridDataItem)
            {
                GridDataItem dataBoundItem = e.Item as GridDataItem;
                Int32 numRoleColumns = grdRACI.MasterTableView.AutoGeneratedColumns.Count(); // Yes, it should be 1 less than this because the 1st column is Task, but we're starting at column 1 in the for loop below
                String colName;
                String RACI_Value;
                for (int i = 1; i < numRoleColumns; i++)
                {
                    colName = grdRACI.MasterTableView.AutoGeneratedColumns[i].UniqueName;
                    RACI_Value = dataBoundItem[colName].Text;
                    if (RACI_Value.Contains("*"))
                    {
                        dataBoundItem[colName].Text = RACI_Value.Substring(0, RACI_Value.Length - 1);
                        dataBoundItem[colName].Style["background-color"] = "LightGreen";
                    }
                    dataBoundItem[colName].Style["text-align"] = "center";
                }
            }
        }
        catch (Exception ex)
        {
            string errorDesc = "Error at grdRACI_ItemDataBound in ITO_VE_Process_RACI";
            Tools.Log(errorDesc, ex);
            Response.Redirect("GlobalError.aspx");
        }
    }
     
    protected void grdRACI_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column.ColumnType == "GridBoundColumn")
        {
            GridBoundColumn col = (GridBoundColumn)e.Column;
            if (e.Column.HeaderText != "Task")
            {
                col.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
                col.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
                col.HeaderStyle.Wrap = true;
                if (isPDFExport)
                    col.HeaderStyle.Font.Size = FontUnit.XSmall;
            }
            else
            {
                col.ItemStyle.Wrap = true;
                col.ItemStyle.Width = Unit.Pixel(320);
                col.HeaderStyle.Width = Unit.Pixel(320);
            }
        }
    }

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017