resizeToFit for RadGrid?

[jlj30]

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();
            }

[Maria Ilieva]

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

[jlj30]

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

[Maria Ilieva]

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

[jlj30]

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

[jlj30]

Hi,

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

Jim

[Wendelstam]

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

[jlj30]

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);
        }
    }
}