Excel-like Grid Coming?

[Jeremy Yoder]

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

[Princy]

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.

[Jeremy Yoder]

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.

[Erwin Floresca]

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-family: Arial;
    font-size:8pt;
    font-weight:normal;
    text-align: center;
    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;
}