grid scroll bars issue in chrome

[BABU]

when sorting a column in descending order in the telerik grid, the grid display scrolls the far left, forcing the user to scroll back to the right to view the column that was sorted on. This does not happen when sorting a column in ascending order and its happening in chrome browser only.

Please suggest me to fix the issue

[Konstantin Dikov]

Hi Babu,

I have tried to replicate the issue on my end, but to no avail.

Please refer to the attached sample page and see what differs in your project. Additionally, you could provide the markup of your grid, so we could test it with your exact settings. 

And finally, if you are using old RadControls version, please try to update to our latest to see if that solves the issue.


Regards,
Konstantin Dikov
Telerik

[BABU]

Team,
We are creating the columns dynamically, nothing as static.
We used telerik version : 2011.2.712.35

[Konstantin Dikov]

Hello Baby,

I have tested again with version Q2 2011 with dynamically created grid and I am still not able to replicate the issue on my end.

Please test the attached sample page and see what differs from your scenario.

If the issue persists and in order for us to be able to assist you further, please open a regular support ticket with sample, runnable project attached, so we could reproduce and locate the issue locally.

 

Regards,
Konstantin Dikov
Telerik

[BABU]

Team,

You can reproduce the issue if you have more columns in the grid, We have more than 25 columns in the grid in that most of the columns creating dynamically in the grid.

[Konstantin Dikov]

Hello Babu,

I have added 30 columns to the RadGrid and tested it with the previously provided code and again I was unable to replicate the described issue.

Could you please ensure that there are no JavaScript errors on your page that could prevent the proper behavior of the RadGrid.

You could refer to the attached sample page that works as expected on my end and see if it works on your side too.

In order for us to be able to assist you further, please open a regular support ticket with sample, runnable project that replicates the issue attached, so we could investigate it locally and provide you with a relevant to your project solution if such could be provided.

 

Regards,
Konstantin Dikov
Telerik

[BABU]

/* Data Grid table start*/

.RadGrid_Default .rgRow td table.alterRow tr td {
     border-top:1px solid #6FB1E0 !important
}
.RadGrid_Default .rgRow td table.alterRow tr:first-child td {
     border-top:none !important
}
.RadGrid_Default .rgAltRow td table.alterRow tr td {
     border-top:1px solid #6FB1E0 !important
}
.RadGrid_Default .rgAltRow td table.alterRow tr:first-child td {
     border-top:none !important
}
.tableSearch .RadComboBox .rcbInputCell .rcbInput
{
    background: url(../images/icon-search1.png) no-repeat scroll 278px 2px #FFFFFF
}
.inTableBtn .RadGrid_Default .rgAdd
{
    background:url(../images/icon-plus-inner.png)  no-repeat 0 0 !important;
    width:19px !important;
    height:19px !important

     }
 .inTableBtn .RadGrid_Default .rgCommandRow
 {
      margin-top:-31px !important
     }
.inTableBtn .RadGrid_Default .rgCommandTable td
{
    border-radius:3px 3px 3px 3px !important;
    border:1px solid #6C8A4F !important;
    background-color:#85AC5B !important;
    padding:3px !important;
    width:16px !important;
    height:16px !important
    }
 .inTableBtn .RadGrid_Default .rgCommandTable td a
{
    display:none
    }

.inTableBtn .RadGrid_Default .rgCommandRow {
     margin-right:30px !important
}
.inTableBtn .RadGrid_Default .rgCommandTable td a {
     background:none !important; border:none !important
}
.tableSearch .RadComboBox table td.rcbInputCell, .RadComboBox .rcbInputCell .rcbInput
{
    height: 16px !important;
    line-height: 16px !important
}
.tableSearch .RadGrid td.rgPagerCell
{
    margin-top: -10px !important
}
.tableSearch .RadComboBox table td.rcbInputCell, .RadComboBox .rcbInputCell
{
    border: none !important;
    padding: 0 !important;
    background: none !important
}
.tableSearch .RadComboBox
{
    float: right;
}

.tableSearch .RadComboBox .rcbInputCell .rcbInput
{
    line-height: 16px !important;
    height: 16px !important
}
.noBorTable .RadGrid_Default
{
    border: none !important
}
.RadGrid_Default, .RadGrid_Default .rgMasterTable, .RadGrid_Default .rgDetailTable, .RadGrid_Default .rgGroupPanel table, .RadGrid_Default .rgCommandRow table, .RadGrid_Default .rgEditForm table, .RadGrid_Default .rgPager table, .GridToolTip_Default
{
    font-family: Arial,Helvetica,sans-serif !important
}
.RadGrid_Default .rgHeader, .RadGrid_Default th.rgResizeCol
{
    background: none !important
}
.RadGrid_Default
{
    border: 1px solid #DBDBDB !important;
    overflow: hidden !important;
    display: block;
    font-family: Arial,Helvetica,sans-serif !important;
    border-top:none !important
}
.RadGrid_Default table tr td
{
    border-top: 1px solid #DBDBDB !important
}
.RadGrid_Default table tr:first-child td
{
    border-top: none !important
}
.RadGrid_Default table tr.rgAltRow td
{
    background-color: #F1FAFF;
    padding: 7px 15px !important;
    border-left: #95C1DA solid 1px !important;
    border-bottom: none !important
}
.forEdit table tr.rgEditRow td
{
    background-color: #F1FAFF;
    padding: 7px 15px !important;
    border-left: #95C1DA solid 1px !important;
    border-bottom: none !important
}
.forEdit table tr.rgEditRow td.p0
{
    padding:0px !important
}

.forEdit .rgEditRow td table.alterRow tr td
{
    border-top:1px solid #6FB1E0 !important
}
.forEdit .rgEditRow td table.alterRow tr:first-child td
{
    border-top:0px !important
}

.forEdit table tr.rgEditRow td:first-child
{
    border-left:medium none !important
}
 .washSummaryCss .forEdit table tr.rgEditRow td table tr td:first-child
 {
     border-left:1px solid #6FB1E0 !important
 }
 .forEdit tr.rgEditRow td.bdrL0{ border-left:0px !important}
/*.RadGrid_Default table tr td input.aspNetDisabled
{
    border: #c2c2c2 solid 1px !important;
    background:#f0f0f0 !important
    }
*/
.RadGrid_Default table tr.rgAltRow td:first-child
{
    border-left: none !important
}
.RadGrid_Default .rgSelectedRow td
{
    background: url(../images/bg-grid-selected.gif) repeat-x left top #005c83 !important;
    cursor: move !important
}

.RadGrid_Default table th.rgHeader
{
    background:url(../images/bg-thead.gif) repeat-x left top #3aa2eb !important;
    border-left: #fff solid 1px;
    color: #fff;
    padding: 7px 15px !important;
    border-bottom: none !important
}
.RadGrid_Default table th.rgSorted
{
    background:url(../images/asc.gif) repeat-x right top #3aa2eb !important
    }
.RadGrid_Default .rgSortAsc,.RadGrid_Default .rgSortDesc
{
    background: url(../images/sprite.gif) no-repeat !important
    }

.RadGrid_Default .rgHeader .rgSortAsc {
    background-position: 3px -248px !important;
    height: 10px !important;
    float:right;
    margin-right:-13px
}
.RadGrid_Default .rgHeader .rgSortDesc {
    background-position: 3px -198px !important;
    height: 10px !important;
    float:right;
    margin-right:-13px
}
.RadGrid_Default table th.rgHeader:first-child
{
    border-left: none !important
}
.RadGrid_Default .rgRow td
{
    border-left: #95C1DA solid 1px !important;
    padding: 7px 15px !important;
    border-bottom: none !important;
    background:#fff
}
.RadGrid_Default .rgRow td.actCol, .RadGrid_Default .rgAltRow td.actCol, .RadGrid_Default .rgEditRow td.actCol
{
    border-left: 0 !important;
    padding:7px 0 !important
}
.RadGrid_Default .rgRow td.actColpad, .RadGrid_Default .rgAltRow td.actColpad, .RadGrid_Default .rgEditRow td.actColpad
{
    padding:7px 0 !important
}
.RadGrid_Default .rgRow td a
{
    color:#3393D5 !important
}
.RadGrid_Default .rgAltRow td a
{
   color:#3393D5 !important
}
.RadGrid_Default .rgRow td.p0
{
    padding: 0 !important
}
.RadGrid_Default .rgAltRow td.p0
{
    padding: 0 !important
}
.RadGrid_Default .rgRow td.bdrL0
{
    border-left: 0 !important
}
.RadGrid_Default .rgAltRow td.bdrL0
{
    border-left: 0 !important
}
.RadGrid_Default th.aC, .RadGrid_Default td.aC
{
    text-align: center !important
}
.RadGrid_Default table tr.rgRow td:first-child
{
    border-left: none !important
}

.RadGrid_Default .rgHeader, .RadGrid_Default th.rgHeader a
{
    background: none;
    color: #fff;
    font: bold 12px arial
}

.RadGrid_Default, .data .RadGrid_Default td.rgPagerCell
{
    border: #94C0D2 solid 1px;
    border-top: 0
}
.RadGrid_Default .rgMasterTable, .RadGrid_Default .rgDetailTable
{
    font: normal 12px arial
}
/*--------------------Table Green CSS-------------*/

.greenTable table th.rgHeader
{
    background:#8CB164 !important;
    border-left: 1px solid #EAF4F9;
    color: #fff;
    border-bottom: none !important
}
.greenTable table th.rgHeader th.inlineThtd
{
    background:#8CB164 !important;
    border-left: 1px solid #EAF4F9;
    color: #fff;
    border-bottom: none !important
}
.greenTable table tr.rgAltRow td
{
    background:#ecffde !important
}
.greenTable table tr td tr.footer td
{
    background:#b5dc8b !important
}
.greenTable .rgRow td table.alterRow tr td.borTop0
{
    border-top:0 !important
}
.greenTable table tr.rgAltRow td.borTop0
{
    border-top:0 !important
}

/*-----------------End----------------------*/
.dataLBlue table tr th.rgHeader
{
    background: #6EC3EA !important;
    color: #FFFFFF
}
.RadGrid_Default .rgCommandTable
{
    border: none !important
}
.RadGrid_Default .rgCommandTable img
{
    vertical-align: middle;
    margin-top: -2px
}
.RadGrid_Default .rgCommandRow
{
    background: none !important;
    position: absolute;
    margin: -33px 0 0 0;
    border: none !important;
    right:10px
}
.RadGrid_Default .rgCommandCell
{
    background: none !important;
    border: none !important;
    display: block;
    float: right
}
.RadGrid_Default .rgCommandRow a
{
    color: #FFFFFF !important;
    font-weight: 700;
    text-decoration: none
}
/*.RadGrid_Default .rgCommandTable td a
{
    background: url(../images/btn-tran-bg.png) repeat-x left top #85AC5B !important;
    border: 1px solid #459C00 !important;
    border-radius: 3px 3px 3px 3px !important;
    line-height: 20px;
    padding: 5px 10px !important;
    color: #FFFFFF !important;
}*/

.RadGrid_Default .rgEditRow td select
{
    border: 1px solid #00B0F0;
    padding: 3px
}
.RadGrid_Default .rgEditRow td.rgExpandCol input.rgExpand, .RadGrid_Default .rgEditRow td.rgExpandCol input.rgCollapse
{
    border: none !important;
    padding: 8px;
    margin-left: 6px
}
.RadGrid_Default .rgEditRow td input
{
    border: 1px solid #00B0F0;
    padding: 3px
}
.RadGrid_Default .rgEditRow .radTxtbox
{
    border: 1px solid #00B0F0 !important;
    padding: 3px !important
}
.RadGrid_Default .rgEditRow td
{
    border: none !important;
    border-left: 1px solid #6FB1E0 !important;
    background:none !important
}
.RadGrid_Default .rgEditRow td:first-child
{
    border-left: none !important
}
.RadGrid_Default .rgAdd {
    background:none !important
}
.RadGrid_Default .rgFooterDiv, .RadGrid_Default .rgFooter
{
    position: absolute;
    background: none !important;
    border: none !important
}
.totalCost .totalWash {
    border-right: 1px solid #6FB1E0 !important
}
.totalCost .tWash {
    padding-right: 16px !important
}
.totalCost .rgFooterDiv, .totalCost .rgFooter {
    border: 1px solid #6FB1E0 !important;
    display: block;
    margin-left: -1px;
    width: 1136px !important
}
.totalCost .rgFooterDiv, .totalCost .rgFooter td {
    font-weight: bold !important;
    width: 360px !important
}
.RadGrid_Default .rgFooter td
{
    border: none !important
}

.RadGrid_Default .rgDetailTable
{
    border: 1px solid #D2D2D2 !important;
    margin:0 20px 20px -24px !important
}
.RadGrid_Default .rgDetailTable:first-child
{
    margin-top:20px !important
}
.RadGrid_Default .rgDetailTable th.rgHeader
{
    border-left: 1px solid #43B3FB !important;
    background:#CDEBFF !important;
    color:#3D464C !important
}
.RadGrid_Default .rgDetailTable tr.rgFilterRow
{
    display:none !important
    }
.RadGrid_Default .rgDetailTable tr.rgAltRow td
{
 background:#EAF4F9 !important
     }
.RadGrid .rgMasterTable
{
    background:#F9F9F9 !important
}
.RadGrid_Default .rgMasterTable td.rgExpandCol
{
    background:#F9F9F9 !important
}
.RadGrid_Default tr.rgRow td.rgExpandCol
{
    background:#fff !important
}
.RadGrid_Default tr.rgAltRow td.rgExpandCol
{
    background:#F1FAFF !important
}
.RadGrid_Default .rgAltRow td.rgExpandCol
{
    background: #F1FAFF !important;
    border-bottom: none !important
}

.MyImageButton input {
     border:none !important
}
.RadGrid_Default .rgExpand, .RadGrid_Default .rgCollapse {
     background: url(../images/sprite.gif) no-repeat !important
}

.RadGrid_Default .rgCollapse {
    background-position:3px -444px !important
}
.RadGrid_Default .rgExpand
{
    background-position:5px -496px !important
 }

 .twoDrag .RadGrid_Default tr.rgRow:last-child td, .twoDrag .RadGrid_Default tr.rgAltRow:last-child td
{
   border-bottom: 1px solid #dbdbdb !important
}
.RadGrid_Default .tab
{
    background: url(../images/bg-tab-subheader.gif) repeat-x left top !important;
    padding: 5px 10px !important
}
.RadGrid_Default .tab h5
{
    font-size:13px;
    padding:3px 0
}
.inTableBtn
{
    margin:0 20px 20px -24px !important
}
.inTableBtn:first-child
{
    margin-top:20px !important
}

.inTableBtn .RadGrid_Default th.rgHeader
{
    border-left: 1px solid #43B3FB !important;
    background:#CDEBFF !important;
    color:#3D464C !important
}
.inTableBtn .RadGrid_Default th.bLNone
{
    border-left: 0 !important
}
.inTableBtn .RadGrid_Default tr.rgFilterRow
{
    display:none !important
    }
.RadGrid_Default .rgEditRow
{
    background: none !important
 }
.inTableBtn .RadGrid_Default .rgCommandTable td
{
background: none !important;
border: none !important
}
.rgNoRecords div
{
    padding:10px 15px
}
.rgNoRecords td
{
   border:none !important;
   background:#fff !important
}
/* Data Grid table end*/

/* Data Grid Pager start*/

.RadGrid_Default .rgPager
{
    background: url(../images/bg-pageBar.jpg) repeat-x scroll left top #e1ddde !important
}
.RadGrid_Default .rgPager td, .RadDataPager_Default .rgPager td
{
    height: 35px !important;
    padding: 10px 5px !important
}
.RadGrid_Default .rgPager table
{
    width: auto !important;
    text-align: right !important;
    float: right !important
}
.RadGrid_Default .rgPager td
{
    border: none !important;
    padding: 0 !important
}
.RadGrid_Default td.rgPagerCell
{
    border: none !important
}
.RadGrid_Default .rgPageFirst, .RadGrid_Default .rgPagePrev, .RadGrid_Default .rgPageNext, .RadGrid_Default .rgPageLast
{
    background-position: 0 0;
    background-color: transparent !important;
    background-image: url('../images/sprite.png') !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important
}
.RadGrid .rgPageFirst, .RadGrid .rgPagePrev, .RadGrid .rgPageNext, .RadGrid .rgPageLast
{
    width:23px !important
    }
.RadGrid_Default .rgPageFirst
{
    background-position: 0 -550px !important
}
.RadGrid_Default .rgPagePrev
{
    background-position: 0 -700px !important
}
.RadGrid_Default .rgPageNext
{
    background-position: 0 -850px !important
}
.RadGrid_Default .rgPageLast
{
    background-position: 0 -1000px !important
}

.RadGrid_Default .rgNumPart a.rgCurrentPage span, .RadGrid_Default .rgNumPart a.rgCurrentPage:hover span
{
    background: none repeat scroll 0 0 #0377BA !important;
    border: none;
    color: #FFFFFF !important
}
.RadGrid_Default .rgNumPart a.rgCurrentPage, .RadGrid_Default .rgNumPart a.rgCurrentPage:hover
{
    background: none repeat scroll 0 0 #0377BA !important;
    border: 1px solid #CCCCCC !important;
    color: #FFFFFF !important
}
.RadGrid_Default .rgNumPart a
{
    background: none repeat scroll 0 0 #FFFFFF !important;
    border: 1px solid #CCCCCC !important;
    border-radius: 2px 2px 2px 2px !important;
    color: #0377BA !important;
    float: left;
    height: 16px !important;
    line-height: 16px !important;
    margin: 4px 2px 0 3px !important;
    padding: 0 5px 0 0
}
.RadGrid_Default .rgNumPart a:hover span
{
    background: none repeat scroll 0 0 #FFFFFF !important
}
.RadDataPager .rgWrap, .RadDataPager .rgWrapRight, .RadDataPager .rgWrapNone
{
    padding: 0 2px !important
}

.RadGrid_Default .rgEditRow
{
    background:none !important
    }
.RadGrid .rgInfoPart
{
    margin-left:-685px !important;
    float:left !important
}
.rgAdvPart .rcbReadOnly td.rcbArrowCell {
    background:none !important
}
.rgAdvPart .rcbFocused .rcbReadOnly .rcbArrowCellRight {
     background:none !important
}
.rgAdvPart .rcbArrowCell a
{
    background: url(../images/bt-arrow.gif) -3px 9px no-repeat #FFFFFF !important;
    border: 1px solid #aaa !important;
    border-radius: 0 2px 2px 0;
    height: 21px !important;
    line-height: 21px !important;
    width:16px !important;
    border-left:none !important;
    float:left
    }
.rgAdvPart .RadComboBox
{
    width:36px !important
     }
.rgPager .RadComboBox .rcbArrowCell a
{
    background: url(../images/bt-arrow.gif) -3px 9px no-repeat #FFFFFF !important;
    border: 1px solid #aaa !important;
    border-radius: 0 2px 2px 0;
    height: 21px !important;
    line-height: 21px !important;
    width:16px !important;
    border-left:none !important;
    float:left
    }
.rgPager .rcbReadOnly td.rcbArrowCell {
    background:none !important
}
.rgPager .rcbFocused .rcbReadOnly .rcbArrowCellRight {
     background:none !important
}
  .rgPager .RadComboBox table td.rcbInputCell {
     background: none !important;
    border:none !important;
    padding:0 !important
}
.rgPager .RadComboBox .rcbInputCell .rcbInput{
    background-color: #FFFFFF !important;
    border: 1px solid #aaa !important;
    border-radius: 2px 0 0 2px;
    height: 18px !important;
    line-height: 18px !important;
    width:14px !important;
    border-right:none !important;
    padding-left:4px !important
}
 .PagerButton
{
    border:none;
    height:20px;
    margin:1px 0 0 5px;
    float:left
    }
.FirstPage
{
    background: url(../images/pagerFirst.png) no-repeat left top; width:23px; cursor:pointer; cursor:hand;
    }
.PrevPage
{
     background:url(../images/pagerPrev.png) no-repeat left top; cursor:pointer;cursor:hand;
    }
.NextPage
{
     background:url(../images/pagerNext.png) no-repeat left top; cursor:pointer;cursor:hand;
    }
.LastPage
{
    background: url(../images/pagerLast.png) no-repeat left top; width:23px; cursor:pointer;cursor:hand;
    }
.paginGridFoot{
    width: auto;
    margin: 8px 12px 0 0;
    padding: 0;
    float: right;
    white-space: nowrap
}
.pageSize
{
    color:#6E6E6E;
    vertical-align: middle

}
.dispalyPage
{
     margin: 0 auto;
     position:relative;
     width:40%;
     color:#6E6E6E;
     text-align:center;
     padding-top:9px
}
.pagiTxt{
    vertical-align: middle;
    color:#6E6E6E;
    font-size:12px;
    line-height:20px;
    float:left;
    padding:0 5px
}
.rgPager .RadInput_Default
{
    float:left !important
    }
/* Data Grid Pager end*/






/* Data list Pager start*/

.RadDataPager_Default
{
    background: none !important;
    border: none !important
}
.RadDataPager_Default .rdpPageFirst, .RadDataPager_Default .rdpPagePrev, .RadDataPager_Default .rdpPageNext, .RadDataPager_Default .rdpPageLast
{
    background: url(../images/sprite.gif) no-repeat !important
}
.RadDataPager_Default .rdpPageFirst
{
    background-position: 0 -550px !important
}
.RadDataPager_Default .rdpPagePrev
{
    background-position: 0 -700px !important
}
.RadDataPager_Default .rdpPageNext
{
    background-position: 0 -850px !important
}
.RadDataPager_Default .rdpPageLast
{
    background-position: 0 -1000px !important
}

.RadDataPager_Default .rdpNumPart a.rdpCurrentPage span, .RadDataPager_Default .rdpNumPart a.rdpCurrentPage:hover span
{
    background: none repeat scroll 0 0 #0377BA !important;
    border: none;
    color: #FFFFFF !important
}
.RadDataPager_Default .rdpNumPart a.rdpCurrentPage, .RadDataPager_Default .rdpNumPart a.rdpCurrentPage:hover
{
    background: none repeat scroll 0 0 #0377BA !important;
    border: 1px solid #CCCCCC !important;
    color: #FFFFFF !important
}
.RadDataPager_Default .rdpNumPart a
{
    background: none repeat scroll 0 0 #FFFFFF !important;
    border: 1px solid #CCCCCC !important;
    border-radius: 2px 2px 2px 2px !important;
    color: #0377BA !important;
    float: left;
    height: 16px !important;
    line-height: 16px !important;
    margin: 4px 2px 0 3px !important;
    padding: 0 5px 0 0
}
.RadDataPager .rdpWrap, .RadDataPager .rdpWrapRight, .RadDataPager .rdpWrapNone
{
    padding: 0 2px !important
}
/* Data list Pager end*/



/* List box Dropdown */

.RadComboBoxDropDown_Default
{
    border: 0 !important
}

.RadComboBoxDropDown_Default
{
    background: #fff;
    border-color: #c6c7d2;
    border-top-color: #83868d
}

.RadComboBoxDropDown_Default .rcbHeader, .RadComboBoxDropDown_Default .rcbFooter
{
    background-color: #f1f2f4;
    background-position: 0 -110px
}

.RadComboBoxDropDown_Default .rcbHeader
{
    border-bottom-color: #d5d5d5
}

.RadComboBoxDropDown_Default .rcbFooter
{
    border-top-color: #d5d5d5
}

.RadComboBoxDropDown_Default .rcbItem em
{
    background: #e5e5e5
}

.RadComboBoxDropDown_Default .rcbSeparator
{
    color: #fff;
    background: #8a8a8a
}

.RadComboBoxDropDown_Default .rcbDisabled .rcbInputCell .rcbInput, .RadComboBoxDropDown_Default .rcbDisabled
{
    color: #999
}
.RadComboBoxDropDown_Default .rcbList
{
    width: 100% !important;
    float: left
}
.RadComboBoxDropDown_Default .rcbScroll
{
    background: #fff;
    width: 99% !important;
    border: 1px solid #A7E3FD !important;
    overflow-x: hidden !important
}
.RadComboBoxDropDown_Default
{
    background: none !important;
    border: none !important
}
.RadComboBoxDropDown_Default .rcbItem, .RadComboBoxDropDown_Default .rcbHovered, .RadComboBoxDropDown_Default .rcbDisabled, .RadComboBoxDropDown_Default .rcbLoading
{
    margin: 0 !important;
    padding: 5px 0 5px 5px !important
}
.RadComboBoxDropDown_Default .rcbItem, .RadComboBoxDropDown_Default .rcbHovered, .RadComboBoxDropDown_Default .rcbDisabled, .RadComboBoxDropDown_Default .rcbLoading, .RadComboBoxDropDown_Default .rcbCheckAllItems, .RadComboBoxDropDown_Default .rcbCheckAllItemsHovered
{
    margin: 0 !important;
    padding: 5px !important
}
.RadComboBoxDropDown_Default .rcbCheckBox, .RadComboBoxDropDown_Default .rcbCheckAllItemsCheckBox
{
    margin: 1px 5px 1px 1px !important;
    padding: 0 !important
}
.RadComboBoxDropDown_Default .rcbCheckAllItems
{
    background: #fff !important;
    color: #333 !important
}
.RadComboBoxDropDown_Default .rcbHovered
{
    background: #DFEDF8 !important;
    color: #0475B9 !important
}
.RadComboBox .rcbInputCell .rcbEmptyMessage
{
    font-style: normal !important
}
.RadGrid .rgAdvPart{
    float: left;
    margin-top: -5px;
    position: absolute;
    left: 36px !important
}
.rgAdvPart .RadComboBox table td.rcbInputCell{
    background: none !important;
    border:none !important;
    padding:0 !important
}
.rgAdvPart .RadComboBox .rcbInputCell .rcbInput {
    background-color: #FFFFFF !important;
    border: 1px solid #aaa !important;
    border-radius: 2px 0 0 2px;
    height: 18px !important;
    line-height: 18px !important;
    width:14px !important;
    border-right:none !important;
    padding-left:4px !important
}

.searchBox .RadComboBox table td.rcbInputCell, .RadComboBox .rcbInputCell .rcbInput
{
    line-height: 28px !important;
    background-color: #fff !important;
    border: 1px solid #00B0F0 !important;
    height: 28px !important
}
.searchBox .RadComboBox table td.rcbInputCell, .RadComboBox .rcbInputCell
{
    border: none !important;
    background: none !important
}
.RadComboBox table td.rcbInputCell, .RadComboBox .rcbInputCell
{
    border: 1px solid #B9C9D3 !important;
    padding: 3px 0 !important;
    width: 224px;
    background: none !important;
    background-color: #FFF !important
}
.rcbArrowCellRight
{
    border: 0 !important;
}
/* .RadComboBox .rcbReadOnly td.rcbArrowCell{ display:none}*/

/* List box Dropdown end*/

/*Upload file*/
.RadUpload .ruStyled .ruFileInput, .RadUpload .ruFakeInput
{
    background: #FFFFFF !important;
    border: 1px solid #A7E3FD !important;
    color: #393939;
    /*padding: 6px 5px !important;*/
    height: 24px !important;
    line-height: 24px !important
}

.RadUpload_Default .ruButton, .RadUploadProgressArea_Default .ruButton
{
    background: url(../images/btn-tran-bg-blue.png) repeat-x left top #3395D4 !important;
    border: 1px solid #347BAB !important;
    border-radius: 3px 3px 3px 3px !important;
    color: #FFFFFF !important;
    font-family: Arial,Helvetica,sans-serif !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    padding: 5px 10px !important;
    text-decoration: none;
    font-size: 12px !important
}
.RadUpload .ruButton, .RadUploadProgressArea .ruButton
{
    height: 30px !important;
    line-height: 19px !important; min-width:80px !important;
}
.RadUpload, .RadUploadProgressArea
{
    padding-top: 5px !important
}
.searchBox div.RadComboBox td.rcbArrowCellHidden, .searchBox div.RadComboBox .rcbArrowCellHidden a
{
    background:none !important
    }
/*Upload file end*/

/*Date Picker start here*/
html body .smallInput .RadInput .riTextBox, html body .smallInput .RadInputMgr
{
    border: 1px solid #A7E3FD !important;
    padding: 6px 5px !important;
    width: 64px !important
}
.rgPager .RadInput_Default .riEnabled,.rgPager .RadInput_Default .riFocused,.rgPager .RadInput_Default .riHover
{
    border:1px solid #aaa !important;
    padding:2px 5px !important;
    width:25px !important;
    text-align:center;
    border-radius:2px
    }
html body .datePickerInp .RadInput .riTextBox, html body .datePickerInp .RadInputMgr
{
    border: 1px solid #A7E3FD !important;
    padding: 6px 5px !important;
    width:94% !important
}

/*Date Picker start end*/


/*Data List pager start*/
.dataListPager
{
    background: none !important;
    border: none !important;
    width:auto;
    float:right
}
.dataListPager .rdpPageFirst, .dataListPager .rdpPagePrev, .dataListPager .rdpPageNext, .dataListPager .rdpPageLast
{
    background: url(../images/sprite.gif) no-repeat !important;
    float:left
}
.dataListPager .rdpPageFirst
{
    background-position: 0 -550px !important;
     text-indent:-6000px !important
}
.dataListPager .rdpPagePrev
{
    background-position: 0 -700px !important;
     text-indent:-6000px !important
}
.dataListPager .rdpPageNext
{
    background-position: 0 -850px !important;
     text-indent:-6000px !important
}
.dataListPager .rdpPageLast
{
    background-position: 0 -1000px !important;
    text-indent:-6000px !important;
    display:inline !important
}

.dataListPager .rdpNumPart a.rdpCurrentPage span, .dataListPager .rdpNumPart a.rdpCurrentPage:hover span
{
    background: none repeat scroll 0 0 #0377BA !important;
    border: none;
    color: #FFFFFF !important
}
.dataListPager .rdpNumPart a.rdpCurrentPage, .dataListPager .rdpNumPart a.rdpCurrentPage:hover
{
    background: none repeat scroll 0 0 #0377BA !important;
    border: 1px solid #CCCCCC !important;
    color: #FFFFFF !important
}
.dataListPager .rdpNumPart a
{
    background: none repeat scroll 0 0 #FFFFFF !important;
    border: 1px solid #CCCCCC !important;
    border-radius: 2px 2px 2px 2px !important;
    color: #0377BA !important;
    float: left;
    height: 16px !important;
    line-height: 16px !important;
    margin: 4px 2px 0 3px !important;
    padding: 0 5px 0 0
}
.RadDataPager .rdpWrap, .RadDataPager .rdpWrapRight, .RadDataPager .rdpWrapNone
{
    padding: 0 2px !important
}

.dataListPager .rdpPageFirst, .dataListPager .rdpPagePrev, .dataListPager .rdpPageNext, .dataListPager .rdpPageLast
{

    float: left;
    height: 18px !important;
    width: 21px !important
}
.dataListPager .rdpPageFirst
{
    background-position: 0 -554px !important;
    text-indent: -6000px !important

    }
.dataListPager .rdpPagePrev {
    background-position: 0 -704px !important;
    text-indent: -6000px !important
}
.dataListPager .rdpPageNext {
    background-position: 0 -854px !important;
    text-indent: -6000px !important
}
.dataListPager .rdpPageLast {
    background-position: 0 -1004px !important;
    text-indent: -6000px !important
}
.dataListPager .dataListPagerMiddle a.rdpCurrentPage{
    background: none repeat 0 0 #FFFFFF ;
    border: 1px solid #CCCCCC !important;
    border-radius: 2px 2px 2px 2px !important;
    color: #0377BA !important;
    float: left;
    height: 16px !important;
    line-height: 16px !important;
    margin: 0 0 0 0 !important;
    padding: 0 5px 0 5px
}
.dataListPager .dataListPagerMiddle a.aspNetDisabled{
    background: none repeat 0 0 #0377BA !important;
    border: none;
    color: #FFFFFF !important
}

/*Data List pager end*/

/*Tabs start here*/
.RadTabStrip  ul.rtsUL{
    width:100%;
    float:left;
    font-size:12px;
    font-weight:700
}
 .RadTabStrip  ul.rtsUL li {
    float:left;
    margin-left:3px
}
 .RadTabStrip .rtsUL li:first-child {
    margin-left:0 !important
}
 .RadTabStrip  ul.rtsUL li {
    background:url(../images/bg-subtabOff-left.png) no-repeat left top !important
}
 .RadTabStrip  ul.rtsUL li.on a:hover {
color:#fff
}

.RadTabStripTop_Black .rtsLevel1 .rtsLink, .RadTabStripTop_Black .rtsLevel1 .rtsOut, .RadTabStripBottom_Black .rtsLevel1 .rtsLink, .RadTabStripBottom_Black .rtsLevel1 .rtsOut, .RadTabStripTop_Black_Baseline .rtsLevel1, .RadTabStripBottom_Black_Baseline .rtsLevel1{
    background:url(../images/bg-subtabOff-right.png) no-repeat right top !important;
    color:#6b6b6b
}
.RadTabStrip  ul.rtsUL li a {
background:url(../images/bg-subtabOff-right.png) no-repeat right top !important;
color:#6b6b6b
}
.RadTabStrip_Black .rtsLI, .RadTabStrip_Black .rtsLink {
    font-family:Arial !important;
    font-weight:bold !important
}
ul.subTabs li a:hover {
color:#6b6b6b
}
.RadTabStrip  ul.rtsUL li a.rtsSelected {
background:url(../images/bg-subtab-right.png) no-repeat right top !important;
color:#fff
}
.RadTabStrip  ul.rtsUL li a.rtsSelected .rtsOut{
background:url(../images/bg-subtab-left.png) no-repeat left top !important;
color:#fff
}
.RadTabStrip  ul.rtsUL li a {
    float:left;
    line-height:18px !important;
    text-decoration:none
}
.RadTabStripTop_Black .rtsLevel1 .rtsOut {
    background:url(../images/bg-subtabOff-left.png) no-repeat left top !important;
    padding:7px 20px 7px 15px !important
}
.RadTabStrip .rtsLevel1 .rtsTxt, .RadTabStripVertical .rtsLevel1 .rtsTxt {
    padding:0 !important
}
.RadTabStrip ul.rtsUL li a.rtsSelected .rtsTxt {
    color:#fff !important
}
.RadTabStrip .rtsLink, .RadTabStripVertical .rtsLink {
     padding-left:0 !important
}
/*Tabs start here*/

/*Filter start here*/

.RadGrid_Default .rgFilterBox
{
    border: 1px solid #A7E3FD !important;
    padding: 3px 2px !important
}
.rgFilterRow .RadInput .riTextBox, .rgFilterRow .RadInputMgr{
    padding: 3px 2px !important;
    width:100px !important;
    border:1px solid #A7E3FD !important
}

.RadGrid_Default .rgFilterRow {
    background:#EEEEEE !important
}
.RadGrid_Default .rgFilterRow td {
    border-bottom:#dfdcdc 1px solid !important;
    background:#EEEEEE !important;
    border-left:none !important
}
.RadGrid_Default .rgFilter
{
    background: url(../images/sprite.gif) no-repeat 0 -300px !important
}
.RadGrid_Default .rgFilter{
    background: url(../images/sprite.gif) no-repeat 0 -300px !important
}
.RadPicker_Default .rcCalPopup, .RadPicker_Default .rcTimePopup{
    background: url(../images/calender-arrow-sprite.png) no-repeat 0 0 !important
}
.RadPicker_Default .rcTimePopup{
    background-position:  0 -100px !important
}
.RadPicker table.rcTable, .RadPicker table.rcTable td {
     background:transparent !important
}

.rgHeaderDiv, .RadGrid_Default .rgHeaderDiv {
     margin-right:0 !important;
     padding-right:16px !important;
     background:url('../images/bg-thead.gif') repeat-x left top #3AA2EB !important
}
.twoDrag .RadGrid_Default tr.rgPager td {
     border-bottom:none !important
}
.twoDrag .RadGrid_Default .rgNoRecords td
{
   border:none !important
}
.rgClipCells{
    width:100% !important
}
.drgGrid .RadGrid_Default .rgSelectedRow td {
  background: url("../images/bg-grid-selected.gif") repeat-x scroll left top #005C83 !important;
  cursor: move !important
}

/*Calendar css start here*/
.RadCalendar_Default .rcRow .rcSelected{
    background:url("../images/calender-arrow-sprite.png") repeat-x scroll left -1700px #e26263 !important
    }
.RadCalendar_Default .rcRow td{
    background:url("../images/calender-arrow-sprite.png") repeat-x scroll left -1600px #cdcdcd !important;
    border-left:1px solid #9d9d9d !important;
    border-top:1px solid #9d9d9d !important;
    border-bottom:0 solid #9d9d9d !important;
    border-right:0 solid #9d9d9d !important
}
.RadCalendar_Default .rcRow td.rcOtherMonth{
     background:url("../images/calender-arrow-sprite.png") repeat-x scroll left -1200px #b2b2b2 !important
}
.RadCalendar_Default .rcWeek th{
    background:url("../images/calender-arrow-sprite.png") repeat-x scroll left -1000px #dadada !important;
    font-weight:bold !important
}
.RadCalendar_Default .rcTitlebar{
    background:url("../images/bg-sub-tabs.png") repeat-x left top #e26263 !important
}
/*Calendar css end here*/
/*Toolbar css start here*/
 .reToolbar li {
     width:auto !important
 }

 .RadGrid_Default table th.rgHeader{ font-weight:bold;}
 .clsSmallFont .RadGrid_Default .rgEditRow td select{ width:100%;}

.gridTwoPer .dispalyPage{  margin:0px 25%;   width:32%;  }
.RadGrid_Default .rgCommandTable a img {  margin-left:-15px; }

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WashLibraryTest.aspx.cs" Inherits="WebApplicationTestSort.WashLibraryTest" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2011.2.712.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>

 

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

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <link href="/themes/ecolab/css/ecolab-theme.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <form id="form1" runat="server">

         

    <telerik:RadScriptManager runat="server" ID="radscriptmanager1">

        </telerik:RadScriptManager>

    <div class="clearBlk">

     

    </div>

    <div style="height: 30px" class="clear">

     

    </div>

      <div class="clear">

     

    </div>

    <div style="padding: 10px">

    <asp:PlaceHolder ID="PlaceHolder1" EnableViewState="False" runat="server">

         

    </asp:PlaceHolder>

    </div>

    </form>

</body>

</html>



using System;

using System.Collections;

using System.Collections.Generic;

using System.Data;

using System.Globalization;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

 

namespace WebApplicationTestSort

{

    public partial class WashLibraryTest : System.Web.UI.Page

    {

 

        protected void Page_Init(object sender, EventArgs e)

        {

            GenerateRadgrid();

        }

 

        protected void Page_Load(object sender, EventArgs e)

        {

          //  GenerateRadgrid();

        }

 

 

        private void GenerateRadgrid()

        {

            var englishCulture = new CultureInfo("en-US");

            //washDataTable.Locale = englishCulture;

            var datalibrary = new RadGrid();

            datalibrary.ClientSettings.Scrolling.AllowScroll = true;

            datalibrary.ClientSettings.Scrolling.UseStaticHeaders = true;

            datalibrary.ClientSettings.Scrolling.SaveScrollPosition = true;

            //datalibrary.ClientSettings.ClientEvents.OnFilterMenuShowing = "filterMenuShowing";

            //datalibrary.FilterMenu.OnClientShown = "MenuShowing";

            datalibrary.ExportSettings.ExportOnlyData = false;

            datalibrary.MasterTableView.EditMode = GridEditMode.InPlace;

            datalibrary.AllowMultiRowEdit = true;

            datalibrary.MasterTableView.CommandItemSettings.ShowExportToExcelButton = true;

            datalibrary.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top;

            datalibrary.MasterTableView.CommandItemSettings.RefreshText = string.Empty;

            datalibrary.MasterTableView.CommandItemSettings.ExportToExcelText = string.Empty;

            //datalibrary.MasterTableView.CommandItemSettings.ExportToExcelImageUrl = @"../images/xls.png";

            //datalibrary.MasterTableView.CommandItemSettings.RefreshImageUrl = @"../images/icon-refresh.png";

            datalibrary.MasterTableView.CommandItemSettings.ShowRefreshButton = true;

            datalibrary.MasterTableView.CommandItemSettings.ShowAddNewRecordButton = false;

            datalibrary.MasterTableView.TableLayout = GridTableLayout.Fixed;

            datalibrary.ExportSettings.HideStructureColumns = true;

            datalibrary.ExportSettings.IgnorePaging = true;

            datalibrary.ExportSettings.OpenInNewWindow = false;

            datalibrary.GroupingSettings.CaseSensitive = false;

            datalibrary.PagerStyle.AlwaysVisible = true;

            datalibrary.AllowPaging = true;

            datalibrary.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;

            datalibrary.AutoGenerateColumns = false;

            datalibrary.AllowFilteringByColumn = true;

            datalibrary.AllowSorting = true;

            datalibrary.ID = "gvLibrary";

            datalibrary.Controls.Clear();

 

            DataTable table = new DataTable();

            for (int i = 0; i < 30; i++)

            {

                table.Columns.Add("columnName" + i, typeof(string));

            }

 

            for (int i = 0; i < 20; i++)

            {

                DataRow row = table.NewRow();

                for (int z = 0; z < 30; z++)

                {

                    row["columnName" + z] = z;

                }

                table.Rows.Add(row);

            }

            DataTable dt = table;

            GenerateRadGridColumn(table, datalibrary);

            datalibrary.DataSource = dt;

           // datalibrary.Rebind();

 

 

            PlaceHolder1.Controls.Clear();

            PlaceHolder1.Controls.Add(datalibrary);

        }

 

        /// <summary>

        /// The generate rad grid column.

        /// </summary>

        /// <param name="washDataTable">

        /// The wash data table.

        /// </param>

        /// <param name="gvwWashLibrary">

        /// The gv wash library.

        /// </param>

        private void GenerateRadGridColumn(DataTable washDataTable, RadGrid gvwWashLibrary)

        {

            foreach (DataColumn column in washDataTable.Columns)

            {

                 

                var col = new GridBoundColumn {UniqueName = column.ColumnName, DataField = column.ColumnName, FilterControlWidth = 60};

                col.HeaderStyle.Width = Unit.Pixel(100);

                col.HeaderText = column.ColumnName;

                col.AllowFiltering = true;

                col.AllowSorting = true;

                gvwWashLibrary.Columns.Add(col);

            }

        }

 

    }

}

[BABU]

Team,
I could not upload the solution as zip file in this thread, I provided the code snippet in the thread.
Please let me know how to upload the solution file in the forum
Apart from this we have another issues that thread below,
http://www.telerik.com/community/forums/reply-thread.aspx?messageId=0&threadId=746462

[Konstantin Dikov]

Hello Babu,

Thank you for the provided markup and code-behind. 

Finally, using your code snippet I was able to replicate the described issue in Chrome (it does not replicates in IE and Firefox).

The reasons behind this behavior are that you are clearing the Controls collection of the grid and that of the PlaceHolder, and that you are setting the EnableViewState property of the PlaceHolder to false.

I have modified the provided code, so it could behave as expected. Please refer to the attached files and see if the issue is solved on your end too.

If further assistance is needed, please feel free to contact us again.


Regards,
Konstantin Dikov
Telerik

[BABU]

Hi Konstantin,
We need to set the EnableViewState property of the PlaceHolder to false hence it throws error in run time that view state could not load.
 only chrome is not handling this issue.
Apart from this we have another issues the vertical alignment of grid is not proper after the sorting.
that thread below,
http://www.telerik.com/community/forums/reply-thread.aspx?messageId=0&threadId=746462

[Konstantin Dikov]

Hi Babu,

Apart from setting the EnableViewState to "true" I found out that the issue with the vertical scroll bar could be overcome if you wrap the Panel with RadAjaxPanel. This will allow you to keep the EnableViewState to "false" and still resolve the browser behavior.

For your convenience I am attaching the modified sample page.

Hope that helps.


Regards,
Konstantin Dikov
Telerik