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

Excel-like Grid Coming?

3 Answers 108 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jeremy Yoder
Top achievements
Rank 1
Jeremy Yoder asked on 01 Apr 2010, 07:43 PM

This is in response to the info I learned in the thread below. We're just wondering if you're planning on creating an excel-like grid control in the near future. (Whether it's an option in RadGrid or something different.) Thanks.

http://www.telerik.com/community/forums/aspnet-ajax/grid/empty-radgrid-shows-no-columns.aspx

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 05 Apr 2010, 08:14 AM
Hello Jeremy,

Have you seen the code library which resembles entering data in an excel spreadsheet using RadGrid?

I hope you found what you were looking for  :)

Regards,
Princy.
0
Jeremy Yoder
Top achievements
Rank 1
answered on 06 Apr 2010, 08:38 PM

Thanks. I had checked that, but was leery of all the code trying to make it work, which concerns me for the long-term. And the arrow keys always work, so you can't use arrows to move left and right within the text. (As opposed to the Infragistics grid, which has a cell-selected mode and cell-edit mode.)

Also, its appearance isn't excel-like with gaps between columns and rows. Is there at least a way to make all the cells tight against each other? Thanks again.
0
Erwin Floresca
Top achievements
Rank 1
answered on 06 Apr 2010, 11:27 PM
Hi,

You can use the attached stylesheet to make the radgrid look like excel. On the radgrid you need to set
Skin="datasheet" EnableEmbeddedSkins="false". The filename should be Grid.datasheet.css

In excel you will press "F2" key to change the cell to edit mode. you can do the same thing in the web by looking for that key code in the keypress event for the cell.

I included an attachment to show you how it looks when I applied the skin.

I hope this helps.
/*Telerik RadGrid datasheet Skin*/ 
 
/*global*/ 
 
.RadGrid_datasheet 
    border:1px solid #ad9e87
    background:#fff
    color:#333
 
.RadGrid_datasheet, 
.RadGrid_datasheet .rgMasterTable, 
.RadGrid_datasheet .rgDetailTable, 
.RadGrid_datasheet .rgGroupPanel table, 
.RadGrid_datasheet .rgCommandRow table, 
.RadGrid_datasheet .rgEditForm table, 
.RadGrid_datasheet .rgPager table, 
.GridToolTip_datasheet 
    font:8pt arial
 
.RadGrid_datasheet .rgMasterTable, 
.RadGrid_datasheet .rgDetailTable 
    border-collapse:separate
 
.RadGrid_datasheet .rgRow, 
.RadGrid_datasheet .rgAltRow, 
.RadGrid_datasheet .rgHeader, 
.RadGrid_datasheet .rgResizeCol, 
.RadGrid_datasheet .rgPager, 
.RadGrid_datasheet .rgGroupPanel, 
.RadGrid_datasheet .rgGroupHeader 
    cursor:default
 
.RadGrid_datasheet input[type="image"
    cursor:pointer
 
.RadGrid_datasheet .rgRow td, 
.RadGrid_datasheet .rgAltRow td, 
.RadGrid_datasheet .rgEditRow td, 
.RadGrid_datasheet .rgFooter td, 
.RadGrid_datasheet .rgFilterRow td, 
.RadGrid_datasheet .rgHeader, 
.RadGrid_datasheet .rgResizeCol, 
.RadGrid_datasheet .rgGroupHeader td 
    padding-left:0; 
    padding-right:0; 
 
.RadGrid_datasheet .rgClipCells .rgHeader, 
.RadGrid_datasheet .rgClipCells .rgRow>td, 
.RadGrid_datasheet .rgClipCells .rgAltRow>td 
    overflow:hidden
 
.RadGrid_datasheet .rgAdd, 
.RadGrid_datasheet .rgRefresh, 
.RadGrid_datasheet .rgEdit, 
.RadGrid_datasheet .rgDel, 
.RadGrid_datasheet .rgFilter, 
.RadGrid_datasheet .rgPagePrev, 
.RadGrid_datasheet .rgPageNext, 
.RadGrid_datasheet .rgPageFirst, 
.RadGrid_datasheet .rgPageLast, 
.RadGrid_datasheet .rgExpand, 
.RadGrid_datasheet .rgCollapse, 
.RadGrid_datasheet .rgSortAsc, 
.RadGrid_datasheet .rgSortDesc, 
.RadGrid_datasheet .rgUpdate, 
.RadGrid_datasheet .rgCancel, 
.RadGrid_datasheet .rgUngroup, 
.RadGrid_datasheet .rgExpXLS, 
.RadGrid_datasheet .rgExpDOC, 
.RadGrid_datasheet .rgExpPDF, 
.RadGrid_datasheet .rgExpCSV 
    width:16px
    height:16px
    border:0; 
    margin:0; 
    padding:0; 
    background-color:transparent
    background-image:url('Grid/sprite.gif'); 
    background-repeat:no-repeat
    vertical-align:middle
    font-size:1px
    cursor:pointer
 
.RadGrid_datasheet .rgGroupItem input, 
.RadGrid_datasheet .rgCommandRow img, 
.RadGrid_datasheet .rgHeader input, 
.RadGrid_datasheet .rgFilterRow img, 
.RadGrid_datasheet .rgFilterRow input, 
.RadGrid_datasheet .rgPager img 
    vertical-align:middle
 
/*header*/ 
 
.RadGrid_datasheet .rgHeaderDiv 
    background:#eee 0 -7550px repeat-x url('../Images/sprite.gif');  
.rgTwoLines .rgHeaderDiv 
    background-position:0 -7050px
 
.rgNoScrollImage .rgHeaderDiv 
    background-image:none
 
.RadGrid_datasheet .rgHeader, 
.RadGrid_datasheet th.rgResizeCol 
    padding-left:1px
    background:#eaeaea 0 -2300px repeat-x url('../Images/sprite.gif');   
    font-familyArial
    font-size:8pt;   
    font-weight:normal
    text-aligncenter
    vertical-align:middle
 
.RadGrid_datasheet th.rgSorted 
    background-color:#c4c4c4
    background-position:0 -2600px
 
.RadGrid_datasheet .rgHeader, 
.RadGrid_datasheet .rgHeader a 
    color#333
    text-decoration:none
 
.RadGrid_datasheet .rgCheck 
    height:15px
    margin-top:0; 
    margin-bottom:0; 
    padding:0; 
 
/*rows*/ 
 
.RadGrid_datasheet .rgRow td, 
.RadGrid_datasheet .rgAltRow td, 
.RadGrid_datasheet .rgEditRow td, 
.RadGrid_datasheet .rgFooter td 
    border:0; 
 
.RadGrid_datasheet .rgRow td 
    padding:0px
    border-left:1px solid #D3D3D3
    border-bottom:1px solid #D3D3D3
 
.RadGrid_datasheet .rgAltRow, .RadGrid_datasheet .rgRow 
    background:#fff
    height:22px
 
.RadGrid_datasheet .rgAltRow td 
    padding:0px
    border-left:1px solid #D3D3D3
    border-bottom:1px solid #D3D3D3
 
.rgMasterTable td input 
    border:0px none
    width:100%; 
    height:100%; 
    padding-left:3px
    font-family:Arial
    font-size:8pt
 
.rgMasterTable td input.rightright 
{     
    width:90%; 
    height:100%; 
    padding-right:3px
    font-family:Arial
    font-size:8pt
 
.rgMasterTable td a 
    padding-left:3px
    font-family:Arial
    font-size:8pt
    text-decoration:underline
    color:red
 
.RadGrid_datasheet .rgRow .rgSorted 
    border-bottom-color:#f2f2f2
    background-color:#f2f2f2
 
.RadGrid_datasheet .rgAltRow .rgSorted 
    border-bottom-color:#e6e6e6
    background-color:#fff
 
.RadGrid_datasheet .rgSelectedRow .rgSorted, 
.RadGrid_datasheet .rgActiveRow .rgSorted, 
.RadGrid_datasheet .rgHoveredRow .rgSorted, 
.RadGrid_datasheet .rgEditRow .rgSorted 
    background-color:transparent
 
.RadGrid_datasheet .rgRow a, 
.RadGrid_datasheet .rgAltRow a, 
.RadGrid_datasheet .rgEditRow a, 
.RadGrid_datasheet .rgFooter a, 
.RadGrid_datasheet .rgEditForm a 
    color:#000
 
.RadGrid_datasheet .rgSelectedRow 
    background:#828282 0 -3900px repeat-x url('Grid/sprite.gif'); 
    color:#fff
*+html .RadGrid_datasheet .rgSelectedRow .rgSorted{background-color:#828282
* html .RadGrid_datasheet .rgSelectedRow .rgSorted{background-color:#828282
 
.RadGrid_datasheet .rgSelectedRow a 
    color:#fff
 
.RadGrid_datasheet .rgActiveRow, 
.RadGrid_datasheet .rgHoveredRow 
    background:#c5c5c5 0 -2900px repeat-x url('Grid/sprite.gif'); 
    color:#333
*+html .RadGrid_datasheet .rgActiveRow .rgSorted, 
*+html .RadGrid_datasheet .rgHoveredRow .rgSorted{background-color:#c5c5c5
* html .RadGrid_datasheet .rgActiveRow .rgSorted, 
* html .RadGrid_datasheet .rgHoveredRow .rgSorted{background-color:#c5c5c5
 
.RadGrid_datasheet .rgEditRow 
    background:#fff 0 -4900px repeat-x url('Grid/sprite.gif'); 
    color:#333
*+html .RadGrid_datasheet .rgEditRow .rgSorted{background-color:#fff
* html .RadGrid_datasheet .rgEditRow .rgSorted{background-color:#fff
 
.RadGrid_datasheet .rgActiveRow td, 
.RadGrid_datasheet .rgActiveRow td.rgSorted, 
.RadGrid_datasheet .rgHoveredRow td, 
.RadGrid_datasheet .rgHoveredRow td.rgSorted 
    border-bottom-color:#9e9e9e
 
.RadGrid_datasheet .rgSelectedRow td, 
.RadGrid_datasheet .rgSelectedRow td.rgSorted 
    border-bottom-color:#6c6c6c
 
/*footer*/ 
 
.RadGrid_datasheet .rgFooterDiv, 
.RadGrid_datasheet .rgFooter 
    background:#eee
 
.RadGrid_datasheet .rgFooter td 
    border-top:1px solid #828282
    border-bottom:1px solid #fff
 
/*status*/ 
 
.RadGrid_datasheet .rgPager .rgStatus 
    width:35px
    border:1px solid
    border-color:#828282 #c9c9c9 #eee #c9c9c9
    border-left:0; 
    padding:3px 0 2px
 
.RadGrid_datasheet .rgStatus div 
    width:24px
    height:24px
    overflow:hidden
    border:0; 
    margin:0 auto
    padding:0; 
    background:transparent center center no-repeat url('Common/loading_small.gif'); 
    text-indent:-2222px
 
/*pager*/ 
 
.RadGrid_datasheet .rgPager 
    background:#eee
 
.RadGrid_datasheet .rgPager td 
    padding:0; 
 
.RadGrid_datasheet .rgPager .rgPagerCell 
    border:1px solid
    border-color:#828282 #eee #eee
    border-right:0; 
    padding:5px 0 4px
 
.RadGrid_datasheet .rgWrap 
    float:left
    padding:0 10px
    line-height:22px
    whitewhite-space:nowrap
 
.RadGrid_datasheet .rgArrPart1 
    padding-right:0; 
 
.RadGrid_datasheet .rgArrPart2 
    padding-left:0; 
 
.RadGrid_datasheet .rgInfoPart 
    float:rightright
    color:#8a8a8a
 
.RadGrid_datasheet .rgInfoPart strong 
    font-weight:normal
    color:#4c4e54
 
.RadGrid_datasheet .rgArrPart1 img, 
.RadGrid_datasheet .rgArrPart2 img 
    margin:0 8px
 
.RadGrid_datasheet .rgPageFirst, 
.RadGrid_datasheet .rgPagePrev, 
.RadGrid_datasheet .rgPageNext, 
.RadGrid_datasheet .rgPageLast 
    width:22px
    height:22px
    vertical-align:top
 
.RadGrid_datasheet .NextPrev .rgPageFirst, 
.RadGrid_datasheet .NextPrev .rgPagePrev, 
.RadGrid_datasheet .NextPrev .rgPageNext, 
.RadGrid_datasheet .NextPrev .rgPageLast 
    vertical-align:middle
 
.RadGrid_datasheet .rgPageFirst 
    background-position:0 -550px
.RadGrid_datasheet .rgPageFirst:hover 
    background-position:0 -600px
.RadGrid_datasheet .rgPagePrev 
    background-position:0 -700px
.RadGrid_datasheet .rgPagePrev:hover 
    background-position:0 -750px
.RadGrid_datasheet .rgPageNext 
    background-position:0 -850px
.RadGrid_datasheet .rgPageNext:hover 
    background-position:0 -900px
.RadGrid_datasheet .rgPageLast 
    background-position:0 -1000px
.RadGrid_datasheet .rgPageLast:hover 
    background-position:0 -1050px
 
.RadGrid_datasheet .rgPager .rgPagerButton 
    height:22px
    border:1px solid
    border-color:#d0d0d0 #aeaeae #8b8b8b
    margin:0 14px 0 0; 
    padding:0 4px 2px
    background:#e8e8e8 repeat-x 0 -1550px url('Grid/sprite.gif'); 
    color:#000
    font:12px/12px "segoe ui",arial,sans-serif
    vertical-align:middle
    cursor:pointer
 
.RadGrid_datasheet .rgNumPart 
    padding:0; 
 
.RadGrid_datasheet .NumericPages .rgNumPart 
    padding:0 10px
 
.RadGrid_datasheet .rgNumPart a:hover, 
.RadGrid_datasheet .rgNumPart a:hover span, 
.RadGrid_datasheet .rgNumPart a.rgCurrentPage, 
.RadGrid_datasheet .rgNumPart a.rgCurrentPage span 
    background:no-repeat url('Grid/sprite.gif'); 
 
.RadGrid_datasheet .rgNumPart a 
    float:left
    line-height:22px
    margin:0; 
    padding:0 5px 0 0; 
    color:#000
    text-decoration:none
 
.RadGrid_datasheet .rgNumPart span 
    float:left
    padding:0 0 0 5px
 
.RadGrid_datasheet .rgNumPart a:hover 
    background-position:100% -1250px
 
.RadGrid_datasheet .rgNumPart a:hover span 
    background-position:0 -1150px
    cursor:pointer
 
.RadGrid_datasheet .rgNumPart a.rgCurrentPage, 
.RadGrid_datasheet .rgNumPart a.rgCurrentPage:hover 
    background-position:100% -1450px
    cursor:datasheet; 
 
.RadGrid_datasheet .rgNumPart a.rgCurrentPage span, 
.RadGrid_datasheet .rgNumPart a.rgCurrentPage:hover span 
    background-position:0 -1350px
    cursor:datasheet; 
 
.RadGrid_datasheet .NextPrevNumericAndAdvanced .rgAdvPart 
    float:none
    text-align:center
 
.RadGrid_datasheet .rgPager .RadSlider 
    float:left
    margin:0 10px 0 0; 
 
.RadGrid_datasheet .rgPagerLabel, 
.RadGrid_datasheet .rgPager .RadComboBox, 
.RadGrid_datasheet .rgPager .RadInput_datasheet 
    margin:0 4px 0 0; 
    vertical-align:middle
 
*+html .RadGrid_datasheet .rgPager .RadComboBox{margin-top:-1px;} 
* html .RadGrid_datasheet .rgPager .RadComboBox{margin-top:-1px;padding:1px 0;} 
 
.RadGrid_datasheet .rgPagerTextBox 
    text-align:center
 
/*sorting, reordering*/ 
 
.RadGrid_datasheet .rgHeader .rgSortAsc 
    background-position:3px -248px
    height:10px
 
.RadGrid_datasheet .rgHeader .rgSortDesc 
    background-position:3px -198px
    height:10px
 
.GridReorderTop_datasheet, 
.GridReorderBottom_datasheet 
    width:9px !important; 
    height:9px !important; 
    margin-left:-5px
    background:0 0 no-repeat url('Grid/sprite.gif'); 
 
.GridReorderBottom_datasheet 
    background-position:0 -50px
 
/*filtering*/ 
 
.RadGrid_datasheet .rgFilterRow 
    background:#eee
 
.RadGrid_datasheet .rgFilterRow td 
    border-bottom:1px solid #828282
    padding-top:4px
    padding-bottom:7px
 
.RadGrid_datasheet .rgFilter 
    width:22px
    height:22px
    margin:0 0 0 2px
    background-position:0 -300px
 
.RadGrid_datasheet .rgFilter:hover 
    background-position:0 -350px
 
.RadGrid_datasheet .rgFilterActive, 
.RadGrid_datasheet .rgFilterActive:hover 
    background-position:0 -400px
 
.RadGrid_datasheet .rgFilterBox 
    border:1px solid
    border-color:#8e8e8e #c9c9c9 #c9c9c9 #8e8e8e
    padding:2px 1px 3px
    font:12px "segoe ui",arial,sans-serif
    color:#333
    vertical-align:middle
 
/*grouping*/ 
 
.RadGrid_datasheet .rgGroupPanel 
    height:24px
    border:0; 
    border-bottom:1px solid #828282
    background:#eee 0 -1900px repeat-x url('Grid/sprite.gif'); 
 
.RadGrid_datasheet .rgGroupPanel td 
    border:0; 
    padding:3px 4px
 
.RadGrid_datasheet .rgGroupPanel td td 
    padding:0; 
 
.RadGrid_datasheet .rgGroupPanel .rgSortAsc 
    background-position:4px -144px
 
.RadGrid_datasheet .rgGroupPanel .rgSortDesc 
    background-position:4px -94px
 
.RadGrid_datasheet .rgUngroup 
    background-position:0 -6998px
 
.RadGrid_datasheet .rgGroupItem 
    border:1px solid
    border-color:#c4c4c4 #c4c4c4 #9e9e9e
    padding:0 2px 1px 3px
    background:#c6c6c6 0 -6500px repeat-x url('Grid/sprite.gif'); 
    line-height:20px
    font-weight:normal
    vertical-align:middle
 
.RadGrid_datasheet .rgMasterTable td.rgGroupCol, 
.RadGrid_datasheet .rgMasterTable td.rgExpandCol 
    border-color:#d9d9d9
    background:#d9d9d9 none
 
.RadGrid_datasheet .rgGroupHeader 
    background:#d9d9d9
    font-size:1.1em; 
    line-height:21px
    color:#000
 
.RadGrid_datasheet .rgGroupHeader td 
    border-top:1px solid #828282
    border-bottom:1px solid #d9d9d9
    padding-top:0; 
    padding-bottom:0; 
 
.RadGrid_datasheet .rgGroupHeader td.rgGroupCol 
    border-top-color:#828282
 
.RadGrid_datasheet .rgExpand 
    background-position:5px -496px
 
.RadGrid_datasheet .rgCollapse 
    background-position:3px -444px
 
.RadGrid_datasheet .rgGroupHeader td p 
    display:inline
    margin:0; 
    padding:0 10px
 
.RadGrid_datasheet .rgGroupHeader td div div 
    top:-0.8em; 
    padding:0 10px
 
.RadGrid_datasheet .rgGroupHeader td div div div 
    top:0; 
    padding:0; 
    border:0; 
 
/*editing*/ 
 
.RadGrid_datasheet .rgEditForm 
    border-bottom:1px solid #828282
 
.RadGrid_datasheet .rgUpdate 
    background-position:0 -1800px
 
.RadGrid_datasheet .rgCancel 
    background-position:2px -1848px
 
/*hierarchy*/ 
 
.RadGrid_datasheet .rgDetailTable 
    border:1px solid #828282
    border-right-width:0; 
 
/*command row*/ 
 
.RadGrid_datasheet .rgCommandRow 
    background:#c5c5c5 0 -2099px repeat-x url('Grid/sprite.gif'); 
    color:#000
 
.RadGrid_datasheet .rgCommandCell 
    border:1px solid
    border-color:#999 #f2f2f2
    border-top:0; 
    padding:0; 
 
.RadGrid_datasheet tfoot .rgCommandCell 
    border-top:1px solid
    border-bottom:0; 
 
.RadGrid_datasheet .rgCommandTable td 
    border:0; 
    padding:3px 7px 4px
 
.RadGrid_datasheet .rgCommandTable 
    border:0; 
    border-top:1px solid #fdfdfd
    border-bottom:1px solid #e7e7e7
 
.RadGrid_datasheet .rgCommandRow a 
    color:#000
    text-decoration:none
 
.RadGrid_datasheet .rgAdd 
    margin-right:3px
    background-position:0 -1650px
 
.RadGrid_datasheet .rgRefresh 
    margin-right:3px
    background-position:0 -1600px
 
.RadGrid_datasheet .rgEdit 
    background-position:0 -1700px
 
.RadGrid_datasheet .rgDel 
    background-position:0 -1750px
 
.RadGrid_datasheet .rgExpXLS, 
.RadGrid_datasheet .rgExpDOC, 
.RadGrid_datasheet .rgExpPDF, 
.RadGrid_datasheet .rgExpCSV 
    background-image:url('../Common/Grid/export.gif'); 
 
.RadGrid_datasheet .rgExpXLS 
    background-position:0 0; 
.RadGrid_datasheet .rgExpDOC 
    background-position:0 -50px
.RadGrid_datasheet .rgExpPDF 
    background-position:0 -100px
.RadGrid_datasheet .rgExpCSV 
    background-position:0 -150px
 
/*multirow select*/ 
 
.GridRowSelector_datasheet 
    background:#4c4e54
 
/*row drag n drop*/ 
 
.GridItemDropIndicator_datasheet 
    border-top:1px dashed #666
 
/*tooltip*/ 
 
.GridToolTip_datasheet 
    border:1px solid #828282
    padding:3px
    background:#fff
    color:#333
 
/*rtl*/ 
 
.RadGridRTL_datasheet .rgHeader, 
.RadGridRTL_datasheet .rgResizeCol 
    text-align:rightright
 
.RadGridRTL_datasheet .rgPager .rgStatus 
    border-right:0; 
    border-left-width:1px
 
.RadGridRTL_datasheet .rgWrap 
    float:rightright
 
.RadGridRTL_datasheet .rgInfoPart 
    float:left
 
.RadGridRTL_datasheet .rgNumPart 
    width:220px
 
.RadGridRTL_datasheet .rgNumPart a 
    float:rightright
 
.RadGridRTL_datasheet .rgPageFirst 
    background-position:0 -1000px
.RadGridRTL_datasheet .rgPageFirst:hover 
    background-position:0 -1050px
.RadGridRTL_datasheet .rgPagePrev 
    background-position:0 -850px
.RadGridRTL_datasheet .rgPagePrev:hover 
    background-position:0 -900px
.RadGridRTL_datasheet .rgPageNext 
    background-position:0 -700px
.RadGridRTL_datasheet .rgPageNext:hover 
    background-position:0 -750px
.RadGridRTL_datasheet .rgPageLast 
    background-position:0 -550px
.RadGridRTL_datasheet .rgPageLast:hover 
    background-position:0 -600px
 
.RadGridRTL_datasheet .rgDetailTable 
    border-right-width:1px
    border-left-width:0; 
 



Tags
Grid
Asked by
Jeremy Yoder
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Jeremy Yoder
Top achievements
Rank 1
Erwin Floresca
Top achievements
Rank 1
Share this question
or