This is a migrated thread and some comments may be shown as answers.

resizeToFit for RadGrid?

7 Answers 147 Views
Grid
This is a migrated thread and some comments may be shown as answers.
jlj30
Top achievements
Rank 2
jlj30 asked on 28 Jan 2013, 07:14 PM
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();
            }

7 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 31 Jan 2013, 02:48 PM
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.
0
jlj30
Top achievements
Rank 2
answered on 31 Jan 2013, 06:32 PM
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
0
Maria Ilieva
Telerik team
answered on 05 Feb 2013, 01:17 PM
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.
0
jlj30
Top achievements
Rank 2
answered on 05 Feb 2013, 02:27 PM
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
0
jlj30
Top achievements
Rank 2
answered on 22 Feb 2013, 04:22 PM
Hi,

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

Jim
0
Wendelstam
Top achievements
Rank 1
answered on 10 Sep 2013, 04:07 PM
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
0
jlj30
Top achievements
Rank 2
answered on 11 Sep 2013, 01:46 AM
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);
        }
    }
}

Tags
Grid
Asked by
jlj30
Top achievements
Rank 2
Answers by
Maria Ilieva
Telerik team
jlj30
Top achievements
Rank 2
Wendelstam
Top achievements
Rank 1
Share this question
or