How do I limit the size of a row?

[steeeeeeeeeee]

Hi,

I am using the RadGrid (Q1 2007) for a project.

Is there a way I can stop the cells expanding to display all the content?

one of the fields contains a large amount of text data, that makes the grid look ridiculous. Can I limit it in some way to a max of two lines & then clip the rest?

I imagine this should be fairly simple to do, but im struggling to see how!

Thanks

Stephen.

[Dimo]

Hi Stephen,

Table cell widths can be fixed and the content will not expand them horizontally if you set TableLayout="Fixed" to the MasterTableView and/or set explicit column widths.

However, the table cell behavior is such, that table cells always expand vertically, if the cell content is too much. In order to avoid this, you have two options:

1) Use a GridTemplateColumn and a <div style="width:100px;height:100px;overflow:hidden">.....</div> inside the ItemTemplate. All content which does not fit in the specified width and height will be clipped, but still rendered.

2) Subscribe to the ItemDataBound event and modify the data cell values.

http://www.telerik.com/help/aspnet-ajax/grdaccessingcellsandrows.html


Regards,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Ibrahim Imam]

i used the second workaround and changed the data in the itemdatabound event.

this works only if the gird is not in edit mode.

in some cases i switch to edit mode in the same event and rebind in prerender in order to have an editable grid.
i am using mulitrow edit to get some kind of excel like behaviour.

any hint would be appreciated

[Princy]

Hello Ibrahim,

When the grid is in EditMode, you can access the controls and the values in each control as shown below:
c#:

 protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
               GridEditableItem editedItem = e.Item as GridEditableItem;
               TextBox txt = (e.Item as GridEditableItem)["BoundColumnUniqueName"].Controls[0] as TextBox ; // where BoundColumnUniqueName is the column uniquename
            }
         }

Thanks
Princy.

[Ibrahim Imam]

hello

thanks for the fast response.

in the RadGrid1_ItemDataBound event the gridview is not in edit mode.
i set the edit mode in this event also because some users are allowed to input data in the grid and some are not.
Additionally not all rows are editable so i have to check the data in rows and then set item.edit=true or not.

the columns i access and clip long textes are also not editable but normal gridboundcolumns.
i debugged it and the logic for accessing the cells and clipping the text also works but if i set item.edit=true and make a rebind in prerender these changes have no effect.

here is some codesnippet:

  protected void RadGrid1_DataBound(object sender, GridItemEventArgs e)
    {
        
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
             ....
             //decide if row should be editable depending on user and rows data
             if(Row should be editable)
                 item.Edit=true;  // if i remove this line it works

            foreach (TableCell cell in item.Cells)
            {
                if (cell.Text.Length > 25)
                {
                    cell.ToolTip = cell.Text;
                    cell.Text = cell.Text.Substring(0, 22) + "...";

                }
            }
        }
   } 
  protected override void Page_PreRender(object sender, EventArgs e)
    {
             rg_Gridview.Rebind(); // if i do not rebind it works but then editmode is not enabled
    }

[Dimo]

Hello Ibrahim,

For table cells in edit mode, you should work with the textboxes (or whatever the edit controls are), not the cells' Text property, as the text is not there in this case. This is what Princy suggested.


Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Ibrahim Imam]

i tried to change the text property of the textbox but that also does not work in my scenario.

the cell i try to change is readonly.
only some columns in the gridview are editable but i want to clip the content of GridBoundColumns that are ReadOnly=false.

[Dimo]

Hi Ibrahim,

Please review the following example:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable dt = new DataTable();
    DataRow dr;
    int colsNum = 2;
    int rowsNum = 5;
    string colName = "Column";

    for (int j = 1; j <= colsNum; j++)
    {
        dt.Columns.Add(String.Format("{0}{1}", colName, j));
    }

    for (int i = 1; i <= rowsNum; i++)
    {
        dr = dt.NewRow();

        for (int k = 1; k <= colsNum; k++)
        {
            dr[String.Format("{0}{1}", colName, k)] = "1234567890";
        }
        dt.Rows.Add(dr);
    }

    (sender as RadGrid).DataSource = dt;
}

    protected void RadGrid_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            if (!e.Item.IsInEditMode)
            {
                string cellText = (e.Item as GridDataItem)["Column2"].Text;
                (e.Item as GridDataItem)["Column2"].Text = cellText.Substring(0, 5);
            }
            else
            {
                TextBox tb = (e.Item as GridDataItem)["Column2"].Controls[0] as TextBox;
                tbtb.Text = tb.Text.Substring(0, 5);
            }
        }
        else if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
        {
            TextBox tb = (e.Item as GridEditFormItem)["Column2"].Controls[0] as TextBox;
            tbtb.Text = tb.Text.Substring(0, 5);
        }
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<p>EditMode="InPlace"</p>

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="600px"
    Skin="Office2007"
    AutoGenerateEditColumn="true"
    OnNeedDataSource="RadGrid_NeedDataSource"
    OnItemDataBound="RadGrid_ItemDataBound">
    <MasterTableView EditMode="InPlace" />
</telerik:RadGrid>

<br /><br />

<p>EditMode="EditForms"</p>

<telerik:RadGrid
    ID="RadGrid2"
    runat="server"
    Width="600px"
    Skin="Office2007"
    AutoGenerateEditColumn="true"
    OnNeedDataSource="RadGrid_NeedDataSource"
    OnItemDataBound="RadGrid_ItemDataBound">
    <MasterTableView EditMode="EditForms" />
</telerik:RadGrid>

</form>
</body>
</html>

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Ibrahim Imam]

hello,

unfortunately that didn't solve my problem - the text still was not clipped as expected.
as a workaround i do not mark any column as readonly=false but as resizable false and change the textbox in the bound event manually.
i set the textbox to disabled, adapt the style so the cell doesn't look editable and clip the text.

[Dimo]

Hi Ibrahim,

May be I didn't understand what exactly are you trying to do?

In case you need further assistance, I suggest that you send us a formal support ticket and attach a complete runnable sample, which shows your implementation. We will review it and provide further advice.

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.