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

Column values cut off / clipped off

4 Answers 478 Views

Grid

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

First asked on 22 Dec 2009, 10:51 AM

Hi there,

I have an issue with my grid, the value inside the columns are cut off / clipped off.
I've set my TableLayout=Auto, ClipCellContentOnResize=false and my grid is using AutoGenerateColumns=True.

I guess the main reason is because the grid can't resize properly if the grid is hidden or not diplayed on the page.
I read somewhere in the forum that the resizing is done using javacript.

The grid is inside the a tab (RadPageView) and I have a few tabs to load.
When I clicked on LoadAll button, the tab with the grid is not shown yet. And the result the values are cut off.

But if I'm in the tab with the grid and load the grid, the values are shown in full.

Can this be fixed?
If it's not possible, how to call the auto resize columns method?

Thanks

First

    
            <telerik:RadGrid ID="myGrid" runat="server"      
        
                ItemStyle-Wrap="false" AlternatingItemStyle-Wrap="false"    
        
                onitemdatabound="myGrid_ItemDataBound" EnableViewState="false">     
        
                <MasterTableView AutoGenerateColumns="true" TableLayout="Auto" Width="600" ></MasterTableView>     
        
                <ClientSettings>    
        
                    <Scrolling AllowScroll="True"  UseStaticHeaders="True" SaveScrollPosition="true" ScrollHeight="400"></Scrolling>    
        
                    <Resizing ClipCellContentOnResize="false" AllowColumnResize="false"/>     
        
                </ClientSettings>    
        
            </telerik:RadGrid>

4 Answers, 1 is accepted

answered on 22 Dec 2009, 12:39 PM

Hello,

One option is to set RenderSelectedPageOnly="true" for the RadMultiPage and AutoPostBack="true" for the RadTabStrip.

Another option is to readjust the RadGrid layout with Javascript once its PageView has been selected. You can implement some custom logic, so that the method is executed only the first time and not on every tab click. However, you will have to execute it again if you update the RadGrid control while it is not in the active PageView.

<%@ 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 = 4;

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)] = String.Format("{0}{1}Row{2} {0}{1}Row{2} {0}{1}Row{2} {0}{1}Row{2}", colName, k, i);

}

dt.Rows.Add(dr);

}

(sender as RadGrid).DataSource = dt;

}

</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" />

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultiPage1" AutoPostBack="false"

OnClientTabSelected="CheckForGridPageView">

<Tabs>

<telerik:RadTab Text="Tab 1" />

<telerik:RadTab Text="Tab 2" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="400px" RenderSelectedPageOnly="false">

<telerik:RadPageView ID="RadPageView2" runat="server">

page view 1

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView1" runat="server">

page view 2

<telerik:RadGrid ID="myGrid" runat="server" ItemStyle-Wrap="false" AlternatingItemStyle-Wrap="false"

OnNeedDataSource="RadGrid_NeedDataSource">

<MasterTableView AutoGenerateColumns="true" TableLayout="Auto" Width="600" />

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" ScrollHeight="400">

</Scrolling>

<Resizing ClipCellContentOnResize="false" AllowColumnResize="false" />

</ClientSettings>

</telerik:RadGrid>

<script type="text/javascript">

function CheckForGridPageView(sender, args)

{

if (args.get_tab().get_index() == 1) // second tab

{

adjustGrid();

}

function adjustGrid()

{

var grid = $find('myGrid')

grid.get_masterTableView().get_element().style.tableLayout = "auto";

grid.get_masterTableViewHeader().get_element().style.tableLayout = "auto";

grid._scrolling._initializeDimensions();

return false;

}

</script>

</telerik:RadPageView>

</telerik:RadMultiPage>

</form>

</body>

</html>

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 25 Jun 2014, 09:30 AM

Hi Shahista,

Please have a look into the sample code snippet which works fine at my end. Please provide your full code if it doesn't help.

ASPX:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultiPage1"

AutoPostBack="true">

<Tabs>

<telerik:RadTab Text="Tab 2" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="400px"

RenderSelectedPageOnly="true">

<telerik:RadPageView ID="RadPageView1" runat="server">

<telerik:RadGrid ID="rgrdOrders" runat="server" DataSourceID="sqldsOrders" CellSpacing="-1" GridLines="Both" ResolvedRenderMode="Classic">

<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID" DataSourceID="sqldsOrders">

<Columns>

<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32" FilterControlAltText="Filter OrderID column" HeaderText="OrderID" ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CustomerID" FilterControlAltText="Filter CustomerID column" HeaderText="CustomerID" SortExpression="CustomerID" UniqueName="CustomerID">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadPageView>

</telerik:RadMultiPage>

Thanks,
Princy.