Long text overflows into adjacent column

[Andrew]

Hi,

I am new to your controls - but very impressed, keep it up.

My issue is that with a RadGrid (Q3 2008) when the text of a field is too long to fit in the column, and has no whitespace on which to break, the text simply overflows into the adjacent column. Have I missed a setting/option somewhere, in my case just forcing a break at the column width would be fine. Incidentally I get the same behaviour with the PDF export.

I have searched the support site and don't see anyone else asking, and I surely am not the only person getting the effect?

[Daniel]

Hello Andrew,

Please test the workaround shown below:

    <style type="text/css">
        .MasterTable_yourSkinName td
        {
           overflow: hidden;
        }
        .GridHeader_yourSkinName
        {
           overflow: hidden;
        }
    </style>

You need to replace the marked text with the actual name of your skin.

Regards,
Daniel
the Telerik team

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

[Andrew]

Many thanks - fast response too.

Yes that works in that the text is chopped at the column boundary, at least it looks neater.

However it then introduces another problem. When a field is used to group records, the text on the grouping row "showing fieldname: field value (showing 3 of 11 items group continues on the next page" also gets truncated - i.e. the cell on the grouping row needs to span several columns to allow it to overflow, but not normal data in normal columns.

Sorry to be difficult :-)

[Dimo]

Hi Andrew,

In this case, please use

.GridRow_SkinName td,
.GridAltRow_SkinName td
{
       overflow:hidden;
}


instead of


.MasterTable_SkinName td
{
    overflow: hidden;
}


Kind regards,
Dimo
the Telerik team

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

[Andrew]

Hi again,

Many thanks, much better.

[LiZ0r]

I've tried to put this in my .aspx page but it doens't seem to work for me...
any suggestions as to how I can fix this problem, or any suggestions on what I'm doing wrong?

[Yavor]

Hello Lily,

You need to make sure that the css code supplied earlier:

.GridRow_SkinName td,
.GridAltRow_SkinName td
{
       overflow:hidden;
}

is applied to the grid properly. Also, make sure you have replaced SkinName with the proper name of the skin that you are currently using.

Sincerely yours,
Yavor
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.

[LiZ0r]

That's exactly what I did  though and does not work...
 

<

 

style type="text/css">

 

     

.GridRow_WebBlue td,

 

     

.GridHeader_WebBlue  

 

 

    {  

 

        overflow: hidden;

     }

</style>

 

 

I don't get any errors when I build it though so not sure why it won't work?

[Dimo]

Hello LiZ0r,

If you are using RadGrid Q1 2009, the CSS classes are different:

.RadGrid  .rgRow  td,
.RadGrid  .rgAltRow  td
{
       overflow:hidden;
}


Sincerely yours,
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.

[LiZ0r]

Sorry, I forgot to mention that I was using RadGrid Q1 2009....
Though this still doesn't seem to be working, do I need to mention the skin name anywhere?

[Dimo]

Hello LiZ0r,

Probably you mean that the headers still overflow. The CSS selector for them is:

.RadGrid  .rgHeader,
.RadGrid  .rgRow  td,
.RadGrid  .rgAltRow  td
{
       overflow:hidden;
}

You don't  have to include the skin name, as the "RadGrid" CSS class is applied to the RadGrid outer div in addition to the "RadGrid_SkinName" CSS class.

If you still have issues and you are sure that the CSS rule is registered, please send us a simple web page.

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.

[LiZ0r]

That worked!
Thanks so much!

[Purush]

Hi Team,
We are using the telerik version Telerik.Web.UI, Version=2011.1.315.40.

Tried setting using the CSS and in the code behind by hooking up the Itemcreated and prerender event, but the column text are getting overflows. The below code is working when we save the HTML and test in browser (meaning the texts are truncated) but when the same HTML feeded to exporttoPDF it is not truncating. any solutions.. thanks

  public static void OnPreRender(RadGrid gridControl,
            EventArgs e)
        {
            foreach (GridHeaderItem item in gridControl.MasterTableView.GetItems(GridItemType.Header))
            {
                foreach (GridColumn column in gridControl.MasterTableView.Columns)
                {
                    if (column.Visible)
                    {
                    
                        item[column.UniqueName].Style["overflow"] = "hidden";
                        
                    }
                }
            }

        }

[Purush]

Updating sample Default.aspx & Default.aspx.cs (as mentioned in the previous post),

Default.aspx
<%@ Page Title="Home Page" Language="C#"
    CodeBehind="Default.aspx.cs" Inherits="Radgridexportopdf._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html>
<head><title></title></head>
<body>
<style>
    /*Telerik RadGrid NextGen Skin*/

/*global*/

.RadGrid_NextGen
{
background-color:#FFFFFF;
font-size: 8px;
margin-top:0px;
font-family: Arial;
border:1px solid #808080;
border-right:0px;
border-bottom:0px;
}

.RadGrid_NextGen,
.RadGrid_NextGen .rgMasterTable,
.RadGrid_NextGen .rgDetailTable,
.RadGrid_NextGen .rgGroupPanel table,
.RadGrid_NextGen .rgCommandRow table,
.RadGrid_NextGen .rgEditForm table,
.RadGrid_NextGen .rgPager table,
.GridToolTip_NextGen
{
    /*font:12px/16px "segoe ui",arial,sans-serif;*/
}

.RadGrid_NextGen .rgMasterTable,
.RadGrid_NextGen .rgDetailTable
{
    border-collapse:separate;
}

.RadGrid_NextGen .rgRow,
.RadGrid_NextGen .rgAltRow,
.RadGrid_NextGen .rgHeader,
.RadGrid_NextGen .rgResizeCol,
.RadGrid_NextGen .rgPager,
.RadGrid_NextGen .rgGroupPanel,
.RadGrid_NextGen .rgGroupHeader
{
    cursor:default;
}

.RadGrid_NextGen input[type="image"]
{
    cursor:pointer;
}

.RadGrid_NextGen .rgRow td,
.RadGrid_NextGen .rgAltRow td,
.RadGrid_NextGen .rgEditRow td,
.RadGrid_NextGen .rgFooter td,
.RadGrid_NextGen .rgFilterRow td,
.RadGrid_NextGen .rgHeader,
.RadGrid_NextGen .rgResizeCol,
.RadGrid_NextGen .rgGroupHeader td
{
    /*padding-left:7px;
    padding-right:7px;*/
    overflow:hidden;
}

.RadGrid_NextGen .rgClipCells .rgHeader,
.RadGrid_NextGen .rgClipCells .rgRow>td,
.RadGrid_NextGen .rgClipCells .rgAltRow>td
{
    overflow:hidden;
}

.RadGrid_NextGen .rgClipCells .rgRow>td,
.RadGrid_NextGen .rgClipCells .rgAltRow>td
{
    overflow:hidden;
}

.RadGrid_NextGen .rgHeader,
.RadGrid_NextGen .rgRow td,
.RadGrid_NextGen .rgAltRow td
{
    border-right:1px solid #808080;
    border-bottom:1px solid #808080;
}

.RadGrid_NextGen .rgHeader:first-child,
.RadGrid_NextGen th.rgResizeCol:first-child,
.RadGrid_NextGen .rgFilterRow>td:first-child,
.RadGrid_NextGen .rgRow>td:first-child,
.RadGrid_NextGen .rgAltRow>td:first-child
{
    /*border-left:0;
    padding-left:8px;*/
}

.RadGrid_NextGen .rgAdd,
.RadGrid_NextGen .rgRefresh,
.RadGrid_NextGen .rgEdit,
.RadGrid_NextGen .rgDel,
.RadGrid_NextGen .rgFilter,
.RadGrid_NextGen .rgPagePrev,
.RadGrid_NextGen .rgPageNext,
.RadGrid_NextGen .rgPageFirst,
.RadGrid_NextGen .rgPageLast,
.RadGrid_NextGen .rgExpand,
.RadGrid_NextGen .rgCollapse,
.RadGrid_NextGen .rgSortAsc,
.RadGrid_NextGen .rgSortDesc,
.RadGrid_NextGen .rgUpdate,
.RadGrid_NextGen .rgCancel,
.RadGrid_NextGen .rgUngroup
{
    width:16px;
    height:16px;
    border:0;
    margin:0;
    padding:0;
    background-color:transparent;
    background-image:url('../Images/RadGrid/sprite.gif');
    background-repeat:no-repeat;
    vertical-align:middle;
    font-size:1px;
    cursor:pointer;
}

.RadGrid_NextGen .rgGroupItem input,
.RadGrid_NextGen .rgCommandRow img,
.RadGrid_NextGen .rgHeader input,
.RadGrid_NextGen .rgFilterRow img,
.RadGrid_NextGen .rgFilterRow input,
.RadGrid_NextGen .rgPager img
{
    vertical-align:middle;
}

/*header*/

.RadGrid_NextGen .rgHeaderDiv
{
    /*background:#dae2e8 0 -5900px repeat-x url('../Images/RadGrid/sprite.gif');*/
}
.rgTwoLines .rgHeaderDiv
{
    /*background-position:0 -6200px;*/
}

.rgNoScrollImage .rgHeaderDiv
{
    /*background-image:none;*/
}

.RadGrid_NextGen .rgHeader,
.RadGrid_NextGen th.rgResizeCol
{
background-image:url('../Images/RadGrid/tab_bg_sprite.gif');
background-repeat:repeat-x;
background-position:bottom;
text-align: left;
height:22px;
color:#414447;
background-color:#fbfcfc;
font-weight:bold;
vertical-align:middle;
border-right:1px solid #cfcfcf;
border-bottom:1px solid #9fa09f;

}

.RadGrid_NextGen th.rgSorted
{
    background-image:url(../Images/RadGrid/tab_bg_sprite.gif);
    background-repeat:repeat-x;
    background-position:0px -416px;
    border-bottom:1px solid #9fa09f;
    background-color:#fbfcfc;
    border-right:1px solid #cfcfcf;
}

.RadGrid_NextGen .rgHeader,
.RadGrid_NextGen .rgHeader a
{
    /*color:#fff;
    text-decoration:none;*/
    color:#414447;
    text-decoration:none;
    padding: 2px 5px 3px 3px;
}

.RadGrid_NextGen .rgCheck
{
    /*height:15px;
    margin:0;
    padding:0;*/
}

/*rows*/

.RadGrid_NextGen .rgRow td,
.RadGrid_NextGen .rgAltRow td,
.RadGrid_NextGen .rgEditRow td,
.RadGrid_NextGen .rgFooter td
{
    /*border:1px solid;
    border-top:0;
    padding-top:4px;
    padding-bottom:3px;*/
    padding: 2px 5px 3px 3px;
}

.RadGrid_NextGen .rgRow td
{
    /*border-color:#fff #fff #fff #dae2e8;*/
}

.RadGrid_NextGen .rgAltRow
{
    background-color: #F1F1F1;
}

.RadGrid_NextGen .rgAltRow td
{
    /*border-color:#dae2e8;*/
}

.RadGrid_NextGen .rgRow .rgSorted
{
    /*border-bottom-color:#f0f0f0;
    background-color:#f0f0f0;*/
}

.RadGrid_NextGen .rgSelectedRow .rgSorted,
.RadGrid_NextGen .rgActiveRow .rgSorted,
.RadGrid_NextGen .rgHoveredRow .rgSorted,
.RadGrid_NextGen .rgEditRow .rgSorted
{
    /*background-color:transparent;*/
}

.RadGrid_NextGen .rgRow a,
.RadGrid_NextGen .rgAltRow a,
.RadGrid_NextGen .rgEditRow a,
.RadGrid_NextGen .rgFooter a,
.RadGrid_NextGen .rgEditForm a
{
    /*color:#0e3d4f;*/
}

.RadGrid_NextGen .rgSelectedRow
{
    background-color:#FFECAA;
}
*+html .RadGrid_NextGen .rgSelectedRow .rgSorted{/* background-color:#FFECAA */}
* html .RadGrid_NextGen .rgSelectedRow .rgSorted{background-color:#FFECAA}

.RadGrid_NextGen .rgActiveRow,
.RadGrid_NextGen .rgHoveredRow
{
    /*background:#bfe3f6 0 -2900px repeat-x url('../Images/RadGrid/sprite.gif');*/
}
*+html .RadGrid_NextGen .rgActiveRow .rgSorted,
*+html .RadGrid_NextGen .rgHoveredRow .rgSorted{/*background-color:#bfe3f6*/}
* html .RadGrid_NextGen .rgActiveRow .rgSorted,
* html .RadGrid_NextGen .rgHoveredRow .rgSorted{/*background-color:#bfe3f6*/}

.RadGrid_NextGen .rgEditRow
{
    /*background:#fff 0 -4900px repeat-x url('../Images/RadGrid/sprite.gif');*/
}
*+html .RadGrid_NextGen .rgEditRow .rgSorted{background-color:#fff}
* html .RadGrid_NextGen .rgEditRow .rgSorted{background-color:#fff}

.RadGrid_NextGen .rgSelectedRow td,
.RadGrid_NextGen .rgActiveRow td,
.RadGrid_NextGen .rgHoveredRow td,
.RadGrid_NextGen .rgEditRow td
{
    /*border-left:0;
    border-right:0;
    padding-left:8px;
    padding-right:8px;*/
}

.RadGrid_NextGen .rgSelectedRow td,
.RadGrid_NextGen .rgSelectedRow td.rgSorted
{
    /*border-bottom-color:#133c44;*/
}

.RadGrid_NextGen .rgActiveRow td,
.RadGrid_NextGen .rgHoveredRow td,
.RadGrid_NextGen .rgActiveRow td.rgSorted,
.RadGrid_NextGen .rgHoveredRow td.rgSorted
{
    /*border-bottom-color:#5d9fb7;*/
}

.RadGrid_NextGen .rgEditRow td,
.RadGrid_NextGen .rgEditRow td.rgSorted
{
    /*border-color:#fff #fff #768ca5 #fff;*/
}

/*footer*/

.RadGrid_NextGen .rgFooterDiv,
.RadGrid_NextGen .rgFooter
{
    background:#dae2e8;
}

.RadGrid_NextGen .rgFooter td
{
    border-top-width:1px;
    border-color:#a2b3c7 #dae2e8 #fff #dae2e8;
}

/*status*/

.RadGrid_NextGen .rgPager .rgStatus
{
    width:35px;
    border:1px solid;
    border-color:#a2b3c7 #9cb6c5 #fff #9cb6c5;
    border-left:0;
    padding:3px 0 2px;
}

.RadGrid_NextGen .rgStatus div
{
    width:24px;
    height:24px;
    overflow:hidden;
    border:0;
    margin:0 auto;
    padding:0;
    background:transparent center center no-repeat url('../Images/loading_small.gif');
    text-indent:-2222px;
}

/*pager*/

.RadGrid_NextGen .rgPager
{
    background:#dae2e8;
}

.RadGrid_NextGen .rgPager td
{
    padding:0;
}

.RadGrid_NextGen .rgPager .rgPagerCell
{
    border:1px solid;
    border-color:#a2b3c7 #fff #fff;
    border-right:0;
    padding:5px 0 4px;
}

.RadGrid_NextGen .rgWrap
{
    float:left;
    padding:0 10px;
    line-height:22px;
    white-space:nowrap;
}

.RadGrid_NextGen .rgArrPart1
{
    padding-right:0;
}

.RadGrid_NextGen .rgArrPart2
{
    padding-left:0;
}

.RadGrid_NextGen .rgInfoPart
{
    float:right;
    color:#506175;
}

.RadGrid_NextGen .rgInfoPart strong
{
    font-weight:normal;
    color:#000;
}

.RadGrid_NextGen .rgArrPart1 img,
.RadGrid_NextGen .rgArrPart2 img
{
    margin:0 8px;
}

.RadGrid_NextGen .rgPageFirst,
.RadGrid_NextGen .rgPagePrev,
.RadGrid_NextGen .rgPageNext,
.RadGrid_NextGen .rgPageLast
{
    width:22px;
    height:22px;
    vertical-align:top;
}

.RadGrid_NextGen .NextPrev .rgPageFirst,
.RadGrid_NextGen .NextPrev .rgPagePrev,
.RadGrid_NextGen .NextPrev .rgPageNext,
.RadGrid_NextGen .NextPrev .rgPageLast
{
    vertical-align:middle;
}

.RadGrid_NextGen .rgPageFirst
{
    background-position:0 -550px;
}
.RadGrid_NextGen .rgPageFirst:hover
{
    background-position:0 -600px;
}
.RadGrid_NextGen .rgPagePrev
{
    background-position:0 -700px;
}
.RadGrid_NextGen .rgPagePrev:hover
{
    background-position:0 -750px;
}
.RadGrid_NextGen .rgPageNext
{
    background-position:0 -850px;
}
.RadGrid_NextGen .rgPageNext:hover
{
    background-position:0 -900px;
}
.RadGrid_NextGen .rgPageLast
{
    background-position:0 -1000px;
}
.RadGrid_NextGen .rgPageLast:hover
{
    background-position:0 -1050px;
}

.RadGrid_NextGen .rgPagerButton
{
    height:22px;
    border:1px solid;
    border-color:#4e667e #476077 #425c71;
    margin:0 14px 0 0;
    padding:0 4px 2px;
    background:#d6e1e7 repeat-x 0 -1550px url('../Images/RadGrid/sprite.gif');
    color:#0d202b;
    font:12px/12px "segoe ui",arial,sans-serif;
    vertical-align:middle;
    cursor:pointer;
}

.RadGrid_NextGen .rgNumPart
{
    padding:0;
}

.RadGrid_NextGen .NumericPages .rgNumPart
{
    padding:0 10px;
}

.RadGrid_NextGen .rgNumPart a:hover,
.RadGrid_NextGen .rgNumPart a:hover span,
.RadGrid_NextGen .rgNumPart a.rgCurrentPage,
.RadGrid_NextGen .rgNumPart a.rgCurrentPage span
{
    background:no-repeat url('../Images/RadGrid/sprite.gif');
}

.RadGrid_NextGen .rgNumPart a
{
    float:left;
    line-height:22px;
    margin:0;
    padding:0 5px 0 0;
    color:#000;
    text-decoration:none;
}

.RadGrid_NextGen .rgNumPart span
{
    float:left;
    padding:0 0 0 5px;
}

.RadGrid_NextGen .rgNumPart a:hover
{
    background-position:100% -1250px;
    color:#0e3d4f;
}

.RadGrid_NextGen .rgNumPart a:hover span
{
    background-position:0 -1150px;
    cursor:pointer;
}

.RadGrid_NextGen .rgNumPart a.rgCurrentPage,
.RadGrid_NextGen .rgNumPart a.rgCurrentPage:hover
{
    background-position:100% -1450px;
    color:#0053a5;
    cursor:default;
}

.RadGrid_NextGen .rgNumPart a.rgCurrentPage span,
.RadGrid_NextGen .rgNumPart a.rgCurrentPage:hover span
{
    background-position:0 -1350px;
    cursor:default;
}

.RadGrid_NextGen .NextPrevNumericAndAdvanced .rgAdvPart
{
    float:none;
    text-align:center;
}

.RadGrid_NextGen .rgPager .RadSlider
{
    float:left;
    margin:0 10px 0 0;
}

.RadGrid_NextGen .rgPager .rgPagerLabel,
.RadGrid_NextGen .rgPager .RadComboBox,
.RadGrid_NextGen .rgPager .RadInput_NextGen
{
    margin:0 4px 0 0;
    vertical-align:middle;
}

*+html .RadGrid_NextGen .rgPager .RadComboBox{margin-top:-1px;}
* html .RadGrid_NextGen .rgPager .RadComboBox{margin-top:-1px;padding:1px 0;}

.RadGrid_NextGen .rgPagerTextBox
{
    text-align:center;
}

/*sorting, reordering*/

.RadGrid_NextGen .rgHeader .rgSortAsc
{
    /*background-image:url('../Images/RadGrid/sorteduparrow.gif');
    
    background-repeat:no-repeat;
    background-position:inherit center;*/
    background-image:url('../Images/RadGrid/tab_bg_sprite.gif');
    background-repeat:no-repeat;
    background-position:0px -479px;
    height:5px;
}

.RadGrid_NextGen .rgHeader .rgSortDesc
{
    
    background-image:url('../Images/RadGrid/tab_bg_sprite.gif');
    background-repeat:no-repeat;
    background-position:0px -471px;
    height:5px;
}

.GridReorderTop_NextGen,
.GridReorderBottom_NextGen
{
    /*width:9px !important;
    height:9px !important;
    margin-left:-5px;
    background:0 0 no-repeat url('../Images/RadGrid/sprite.gif');
*/
}

.GridReorderBottom_NextGen
{
    /*background-position:0 -50px;*/
}

/*filtering*/

.RadGrid_NextGen .rgFilterRow
{
    background:#dae2e8;
}

.RadGrid_NextGen .rgFilterRow td
{
    padding-top:4px;
    padding-bottom:5px;
    border:1px solid;
    border-top:0;
    border-color:#dae2e8 #dae2e8 #a2b3c7;
}

.RadGrid_NextGen .rgFilter
{
    width:22px;
    height:22px;
    margin:0 0 0 2px;
    background-position:0 -300px;
}

.RadGrid_NextGen .rgFilter:hover
{
    background-position:0 -350px;
}

/*.RadGrid_NextGen .rgFilterActive,
.RadGrid_NextGen .rgFilterActive:hover
{
    background-position:0 -400px;
}*/

.RadGrid_NextGen .rgFilterBox
{
    border:1px solid #768ca5;
    padding:2px 1px 3px;
    font:12px "segoe ui",arial,sans-serif;
    color:#000;
    vertical-align:middle;
}

/*grouping*/

.RadGrid_NextGen .rgGroupPanel
{
    height:24px;
    border:0;
    border-bottom:1px solid #3d556c;
    background:#dfeeff;
}

.RadGrid_NextGen .rgGroupPanel td
{
    border:0;
    padding:3px;
    vertical-align:middle;
}

.RadGrid_NextGen .rgGroupPanel td td
{
    padding:0;
}

.RadGrid_NextGen .rgGroupPanel .rgSortAsc
{
    background-position:4px -144px;
}

.RadGrid_NextGen .rgGroupPanel .rgSortDesc
{
    background-position:4px -94px;
}

.RadGrid_NextGen .rgUngroup
{
    background-position:0 -6500px;
}

.RadGrid_NextGen .rgGroupItem
{
    border:1px solid #506175;
    padding:0 2px 1px 3px;
    background:#ebf7ff;
    color:#0053a5;
    line-height:20px;
    font-weight:normal;
    vertical-align:middle;
}

.RadGrid_NextGen .rgGroupHeader
{
    background:#8ea3b9;
    font-size:1.1em;
    line-height:21px;
    color:#fff;
}

.RadGrid_NextGen .rgGroupHeader td
{
    padding:0 5px 0 3px;
}

.RadGrid_NextGen td.rgGroupCol,
.RadGrid_NextGen td.rgExpandCol
{
    background:#8ea3b9 none;
    border-color:#8ea3b9;
}

.RadGrid_NextGen .rgExpand
{
    background-position:5px -496px;
}

.RadGrid_NextGen .rgCollapse
{
    background-position:3px -444px;
}

.RadGrid_NextGen .rgGroupHeader td p
{
    display:inline;
    margin:0;
    padding:0 10px;
}

.RadGrid_NextGen .rgGroupHeader td div div
{
    top:-0.8em;
    padding:0 10px;
}

.RadGrid_NextGen .rgGroupHeader td div div div
{
    top:0;
    padding:0;
    border:0;
}

/*editing*/

.RadGrid_NextGen .rgEditForm
{
    border-bottom:1px solid #768ca5;
}

.RadGrid_NextGen .rgUpdate
{
    background-position:0 -1800px;
}

.RadGrid_NextGen .rgCancel
{
    background-position:2px -1848px;
}

/*hierarchy*/

.RadGrid_NextGen .rgDetailTable
{
    border:1px solid #768ca5;
    border-right:0;
}

/*command row*/

.RadGrid_NextGen .rgCommandRow
{
    background:#495a70 0 -2099px repeat-x url('../Images/RadGrid/sprite.gif');
    color:#fff;
}

.RadGrid_NextGen .rgCommandCell
{
    border:0;
    padding:0;
}

.RadGrid_NextGen thead .rgCommandCell
{
    border-bottom:1px solid #212f41;
}

.RadGrid_NextGen tfoot .rgCommandCell
{
    border-top:1px solid #212f41;
}

.RadGrid_NextGen .rgCommandTable td
{
    border:0;
    padding:3px 7px 4px;
}

.RadGrid_NextGen .rgCommandTable
{
    border:1px solid;
    border-color:#63768a #465668 #58697d;
}

.RadGrid_NextGen .rgCommandRow a
{
    color:#fff;
    text-decoration:none;
}

.RadGrid_NextGen .rgAdd
{
    margin-right:3px;
    background-position:0 -1650px;
}

.RadGrid_NextGen .rgRefresh
{
    margin-right:3px;
    background-position:0 -1600px;
}

.RadGrid_NextGen .rgEdit
{
    background-position:0 -1700px;
}

.RadGrid_NextGen .rgDel
{
    background-position:0 -1750px;
}

/*multirow select*/

.GridRowSelector_NextGen
{
    background:#3d556c;
}

/*row drag n drop*/

.GridItemDropIndicator_NextGen
{
    border-top:1px dashed #3d556c;
}

/*tooltip*/

.GridToolTip_NextGen
{
    border:1px solid #768ca5;
    padding:3px;
    background:#dae2e8;
    color:#000;
}

/*rtl*/

div.RadGridRTL_NextGen .rgHeader,
div.RadGridRTL_NextGen .rgResizeCol
{
    text-align:right;
}

.RadGridRTL_NextGen .rgHeader:first-child,
.RadGridRTL_NextGen th.rgResizeCol:first-child,
.RadGridRTL_NextGen .rgFilterRow>td:first-child,
.RadGridRTL_NextGen .rgRow>td:first-child,
.RadGridRTL_NextGen .rgAltRow>td:first-child
{
    border-left:1px solid;
    padding-left:7px;
}

.RadGridRTL_NextGen .rgPager .rgStatus
{
    border-right:0;
    border-left-width:1px;
}

.RadGridRTL_NextGen .rgWrap
{
    float:right;
}

.RadGridRTL_NextGen .rgInfoPart
{
    float:left;
}

.RadGridRTL_NextGen .rgNumPart
{
    width:220px;
}

.RadGridRTL_NextGen .rgNumPart a
{
    float:right;
}

.RadGridRTL_NextGen .rgDetailTable
{
    border-right:1px solid;
    border-left:0;
}

</style>
<form runat="server" id="frm">
<asp:ScriptManager ID="SMP" runat="server"></asp:ScriptManager>

<telerik:RadGrid runat="server" ID="DG" AutoGenerateColumns="false"  OnItemCreated="DG_ItemCreated"
        EnableEmbeddedSkins="false" GridLines="Horizontal" Skin="NextGen"  Width="100px" Visible="true"
        Height="50px">
        <MasterTableView HorizontalAlign="Center" AutoGenerateColumns="false" Width="100px" TableLayout="Fixed"
        GridLines="Horizontal" BorderWidth="0" >
            <Columns>
            <telerik:GridBoundColumn DataField="slno" HeaderStyle-HorizontalAlign="Left"
                HeaderText="Slno" HeaderStyle-Width="50px">
                <ItemStyle Width="50px" HorizontalAlign="Left" />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="name" HeaderStyle-Width="50px" HeaderStyle-HorizontalAlign="Left"
                HeaderText="Name">
                <ItemStyle Width="50px" HorizontalAlign="Left" />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="description" HeaderStyle-Width="50px"  HeaderStyle-HorizontalAlign="Left"
                HeaderText="DescriptionDescription">
                <ItemStyle Width="50px" HorizontalAlign="Left" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="description2" HeaderStyle-Width="50px"  HeaderStyle-HorizontalAlign="Left"
                HeaderText="DescriptionDescription2">
                <ItemStyle Width="50px" HorizontalAlign="Left" />
            </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        
        </telerik:RadGrid>
<asp:Button ID="btnExport" runat="server" Text="Export to PDF" OnClick="ExporttoPDF_Click"/>
</form>
</body>
</html>


Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Telerik.Web.UI;

namespace Radgridexportopdf
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
            DataTable dt = new DataTable();
            dt.Columns.Add("slno");
            dt.Columns.Add("name");
            dt.Columns.Add("description");
            dt.Columns.Add("description2");
            
            DataRow drNewRow = null;            
            drNewRow = dt.NewRow();
            drNewRow["slno"] = "11";
            drNewRow["name"] = "John Paul";
            drNewRow["description"] = "JOHNJOHNJOHNJOHNJOHNJOHNJOHNJOHNJOHN";
            drNewRow["description2"] = "Sample Test";
            dt.Rows.Add(drNewRow);

            drNewRow = dt.NewRow();
            drNewRow["slno"] = "111";
            drNewRow["name"] = "Paul Kan";
            drNewRow["description"] = "JOHNJOHNJOHNJOHNJOHNJOHNJOHNJOHNJOHN";
            drNewRow["description2"] = "Sample Test";
            dt.Rows.Add(drNewRow);

            drNewRow = dt.NewRow();
            drNewRow["slno"] = "111";
            drNewRow["name"] = "John Kan";
            drNewRow["description"] = "JOHNJOHNJOHNJOHNJOHNJOHNJOHNJOHNJOHN";
            drNewRow["description2"] = "Sample Test";
            dt.Rows.Add(drNewRow);

            drNewRow = dt.NewRow();
            drNewRow["slno"] = "111";
            drNewRow["name"] = "John Kan";
            drNewRow["description"] = "JOHNJOHNJOHNJOHNJOHNJOHNJOHNJOHNJOHN";
            drNewRow["description2"] = "Sample Test";

            dt.Rows.Add(drNewRow);
            DG.DataSource = dt;
            DG.DataBind();



        }
        protected void DG_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridDataItem || e.Item is GridHeaderItem)
            {
                
                foreach (TableCell cell in e.Item.Cells)
                {
                    cell.Style["font-family"] = "Arial";
                    cell.Style["font-size"] = "10px";
                    cell.Style["text-align"] = "Left";
                    cell.Style["padding"] = "2px";
                    cell.Style["border-right"] = "2px";
                    cell.Style["border-bottom"] = "2px";
                    cell.Style["border-left"] = "2px";
                    cell.Style["border-top"] = "2px";
                    cell.Style["overflow"] = "hidden";


                }
            }
        }
        protected void ExporttoPDF_Click(object sender, EventArgs e)
        {
            string profileName = "ProfileName.pdf";
            this.DG.Page.Response.Clear();
            this.DG.Page.Response.ClearHeaders();
            this.DG.Page.Response.ContentType = "application/pdf";
            this.DG.Page.Response.ContentEncoding = System.Text.Encoding.UTF8;
            this.DG.Page.Response.AddHeader("Content-Disposition", "attachment; filename=" + Server.HtmlEncode(profileName) + "");
            this.DG.MasterTableView.ExportToPdf();
        }
    }
}







Thanks,
Purush