i use telerik grid for fixed width and hieght
but it act randomly and i dont how to fix it:
i set table-layout to fixed but does'nt help it.
the problems is
1-the pager number position change
2- if sum of columns size bigger than the parent elemenet size the grid make the page size in columns size
3- in end page when scroll bar disppear grid act strage
i used custom stylesheet
cs file
aspx file
style sheet
but it act randomly and i dont how to fix it:
i set table-layout to fixed but does'nt help it.
the problems is
1-the pager number position change
2- if sum of columns size bigger than the parent elemenet size the grid make the page size in columns size
3- in end page when scroll bar disppear grid act strage
i used custom stylesheet
cs file
using System; |
using System.Data; |
using System.Configuration; |
using System.Collections; |
using System.Web; |
using System.Web.Security; |
using System.Web.UI; |
using System.Web.UI.WebControls; |
using System.Web.UI.WebControls.WebParts; |
using System.Web.UI.HtmlControls; |
using Telerik.Web.UI; |
public partial class RTL : System.Web.UI.Page |
{ |
protected void Page_Load(object sender, EventArgs e) |
{ |
DataTable dt = new DataTable(); |
dt.Columns.Add(new DataColumn("id", typeof(int))); |
dt.Columns.Add(new DataColumn("name", typeof(string))); |
for(int i=0;i<93;i++) |
dt.Rows.Add(i, "Razi"+i.ToString()); |
// dt.Rows.Add(2, "Reza"); |
RadGrid1.DataSource = dt; |
RadGrid1.DataBind(); |
//RadGrid1.MasterTableView.DetailTables[0].DataSource = dt; |
//RadGrid1.MasterTableView.DetailTables[0].DataBind(); |
} |
public string RadGrid1PanelClientID; |
public string RadGrid2PanelClientID; |
protected void RadAjaxManager1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e) |
{ |
if (e.Initiator.ID == "RadGrid1") |
{ |
this.RadGrid1PanelClientID = e.UpdatePanel.ClientID; |
} |
} |
} |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RTL.aspx.cs" Inherits="RTL" |
EnableEventValidation="false" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<%@ Register Assembly="Janus.Web.GridEX.v3" Namespace="Janus.Web.GridEX" TagPrefix="jwg" %> |
<!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>Untitled Page</title> |
<link href="App_Themes/blueTheme/grid/Grid.Office2007.css" rel="stylesheet" type="text/css" /> |
</head> |
<body class="ChildBody"> |
<form id="form1" runat="server"> |
<telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True"> |
</telerik:RadScriptManager> |
<br /> |
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackColor="White" |
Transparency="10"> |
Loading ...</telerik:RadAjaxLoadingPanel> |
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" |
OnAjaxSettingCreated="RadAjaxManager1_AjaxSettingCreated"> |
<AjaxSettings> |
<telerik:AjaxSetting AjaxControlID="RadGrid1"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="RadGrid1" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
</AjaxSettings> |
</telerik:RadAjaxManager> |
<br /> |
<br /> |
<br /> |
<br /> |
<table align="center" border="0" cellpadding="0" cellspacing="0" |
style="width: 768px"> |
<tr> |
<td style=" background-color: green;"> |
<telerik:RadGrid ID="RadGrid1" runat="server" dir="rtl" EnableEmbeddedSkins="False" |
Skin="Office2007" AllowMultiRowSelection="True" AutoGenerateColumns="False" VirtualItemCount="10" |
GridLines="None" AllowPaging="True" AllowSorting="True" Width="768px"> |
<MasterTableView> |
<Columns> |
<telerik:GridBoundColumn DataField="id" HeaderText="Id" UniqueName="id"> |
<ItemStyle Width="700px" /> |
<HeaderStyle Width="700px" /> |
</telerik:GridBoundColumn> |
<telerik:GridBoundColumn DataField="name" HeaderText="Name" UniqueName="name"> |
<ItemStyle Width="100px" /> |
<HeaderStyle Width="100px" /> |
</telerik:GridBoundColumn> |
</Columns> |
<PagerStyle Mode="NumericPages" /> |
</MasterTableView> |
<HeaderContextMenu EnableAutoScroll="True" EnableEmbeddedSkins="False"> |
</HeaderContextMenu> |
<FilterMenu EnableEmbeddedSkins="False"> |
</FilterMenu> |
<ClientSettings> |
<Selecting AllowRowSelect="True" /> |
<Scrolling AllowScroll="True" SaveScrollPosition="False" ScrollHeight="100px" UseStaticHeaders="True" /> |
</ClientSettings> |
</telerik:RadGrid></td> |
</tr> |
</table> |
<br /> |
<div align="center"> |
</div> |
</form> |
</body> |
</html> |
/*Telerik RadGrid Default Skin*/ |
/*global*/ |
.RadGrid_Office2007 |
{ |
border:1px solid #999; |
background:#fff; |
color:#000; |
} |
.RadGrid_Office2007, |
.RadGrid_Office2007 .rgMasterTable, |
.RadGrid_Office2007 .rgDetailTable, |
.RadGrid_Office2007 .rgGroupPanel table, |
.RadGrid_Office2007 .rgCommandRow table, |
.RadGrid_Office2007 .rgEditForm table, |
.RadGrid_Office2007 .rgPager table, |
.GridToolTip_Office2007 |
{ |
font:12px/16px tahoma,"segoe ui",arial,sans-serif; |
} |
.RadGrid_Office2007 .rgHeader:first-child, |
.RadGrid_Office2007 th.rgResizeCol:first-child, |
.RadGrid_Office2007 .rgFilterRow>td:first-child, |
.RadGrid_Office2007 .rgRow>td:first-child, |
.RadGrid_Office2007 .rgAltRow>td:first-child |
{ |
border-left-width:0; |
padding-left:8px; |
} |
.RadGrid_Office2007 .rgAdd, |
.RadGrid_Office2007 .rgRefresh, |
.RadGrid_Office2007 .rgEdit, |
.RadGrid_Office2007 .rgDel, |
.RadGrid_Office2007 .rgFilter, |
.RadGrid_Office2007 .rgPagePrev, |
.RadGrid_Office2007 .rgPageNext, |
.RadGrid_Office2007 .rgPageFirst, |
.RadGrid_Office2007 .rgPageLast, |
.RadGrid_Office2007 .rgExpand, |
.RadGrid_Office2007 .rgCollapse, |
.RadGrid_Office2007 .rgSortAsc, |
.RadGrid_Office2007 .rgSortDesc, |
.RadGrid_Office2007 .rgUpdate, |
.RadGrid_Office2007 .rgCancel, |
.RadGrid_Office2007 .rgUngroup, |
.RadGrid_Office2007 .rgExpXLS, |
.RadGrid_Office2007 .rgExpDOC, |
.RadGrid_Office2007 .rgExpPDF, |
.RadGrid_Office2007 .rgExpCSV |
{ |
background-image:url('Grid/sprite.gif'); |
} |
/*header*/ |
.RadGrid_Office2007 .rgHeaderDiv |
{ |
background:#e4e4e4; |
} |
.RadGrid_Office2007 .rgHeader, |
.RadGrid_Office2007 th.rgResizeCol |
{ |
border:0; |
border-bottom:1px solid #7c7c7c; |
border-left:1px solid #9e9e9e; |
background:#e4e4e4; |
} |
.RadGrid_Office2007 th.rgHeaderOver |
{ |
background:url('Grid/headerOver.jpg') repeat-x; |
} |
.RadGrid_Office2007 th.rgHeader |
{ |
border-right:#999999 solid 1px; |
} |
.RadGrid_Office2007 th.rgSorted |
{ |
background-color:#f0f0f0; |
} |
.RadGrid_Office2007 .rgHeader, |
.RadGrid_Office2007 .rgHeader a |
{ |
color:#000; |
} |
.RadGrid_Office2007 th.rgSorted, |
.RadGrid_Office2007 th.rgSorted a |
{ |
color:#892500; |
} |
/*rows*/ |
.RadGrid_Office2007 .rgRow td, |
.RadGrid_Office2007 .rgAltRow td, |
.RadGrid_Office2007 .rgEditRow td, |
.RadGrid_Office2007 .rgFooter td |
{ |
border-style:solid; |
border-width:0 0 1px 1px; |
} |
.RadGrid_Office2007 .rgRow td |
{ |
border-color:#fff #c3c3c3; |
} |
.RadGrid_Office2007 .rgAltRow td |
{ |
border-color:#fff #c3c3c3; |
} |
.RadGrid_Office2007 .rgSorted |
{ |
background-color:#eaf3ff; |
} |
.RadGrid_Office2007 .rgSorted |
{ |
background-color:#eaf3ff; |
} |
.RadGrid_Office2007 .rgSelectedRow .rgSorted, |
.RadGrid_Office2007 .rgActiveRow .rgSorted, |
.RadGrid_Office2007 .rgHoveredRow .rgSorted, |
.RadGrid_Office2007 .rgEditRow .rgSorted |
{ |
background-color:transparent; |
} |
.RadGrid_Office2007 .rgRow a, |
.RadGrid_Office2007 .rgAltRow a, |
.RadGrid_Office2007 tr.rgEditRow a, |
.RadGrid_Office2007 .rgFooter a, |
.RadGrid_Office2007 .rgEditForm a |
{ |
color:#000; |
} |
.RadGrid_Office2007 .rgSelectedRow |
{ |
background:#ffa517; |
color:#892500; |
} |
*+html .RadGrid_Office2007 .rgSelectedRow .rgSorted{background-color:#ffa517} |
* html .RadGrid_Office2007 .rgSelectedRow .rgSorted{background-color:#ffa517} |
.RadGrid_Office2007 .rgSelectedRow a, |
.RadGrid_Office2007 .rgHoveredRow a, |
.RadGrid_Office2007 .rgActiveRow a |
{ |
color:#892500; |
} |
.RadGrid_Office2007 .rgActiveRow, |
.RadGrid_Office2007 .rgHoveredRow |
{ |
background:#ffe79c 0 -2900px repeat-x url('Grid/sprite.gif'); |
color:#892500; |
} |
*+html .RadGrid_Office2007 .rgActiveRow .rgSorted, |
*+html .RadGrid_Office2007 .rgHoveredRow .rgSorted{background-color:#ffe79c} |
* html .RadGrid_Office2007 .rgActiveRow .rgSorted, |
* html .RadGrid_Office2007 .rgHoveredRow .rgSorted{background-color:#ffe79c} |
.RadGrid_Office2007 .rgEditRow |
{ |
background:#fff 0 -4900px repeat-x url('Grid/sprite.gif'); |
} |
*+html .RadGrid_Office2007 .rgEditRow .rgSorted{background-color:#fff} |
* html .RadGrid_Office2007 .rgEditRow .rgSorted{background-color:#fff} |
.RadGrid_Office2007 .rgSelectedRow td, |
.RadGrid_Office2007 .rgSelectedRow td.rgSorted |
{ |
border-color:#ca4b0c #ffa517; |
} |
.RadGrid_Office2007 .rgActiveRow td, |
.RadGrid_Office2007 .rgActiveRow td.rgSorted, |
.RadGrid_Office2007 .rgHoveredRow td, |
.RadGrid_Office2007 .rgHoveredRow td.rgSorted |
{ |
border-color:#c98400 #ffe79c; |
} |
.RadGrid_Office2007 .rgEditRow td, |
.RadGrid_Office2007 .rgEditRow td.rgSorted |
{ |
border-color:#616161 #c3c3c3; |
} |
/*footer*/ |
.RadGrid_Office2007 .rgFooterDiv, |
.RadGrid_Office2007 .rgFooter |
{ |
background:#e4e4e4; |
} |
.RadGrid_Office2007 .rgFooter td |
{ |
border-top:1px solid; |
border-color:#999 #c3c3c3; |
} |
/*status*/ |
.RadGrid_Office2007 .rgPager .rgStatus |
{ |
border:1px solid; |
border-color:#999 #999 #e4e4e4 #e4e4e4; |
border-left:0; |
} |
.RadGrid_Office2007 .rgStatus div |
{ |
background-image:url('Common/loading_small.gif'); |
} |
/*pager*/ |
.RadGrid_Office2007 .rgPager |
{ |
background:#e4e4e4; |
} |
.RadGrid_Office2007 td.rgPagerCell |
{ |
border:1px solid; |
border-color:#999 #e4e4e4 #e4e4e4; |
border-right:0; |
} |
.RadGrid_Office2007 .rgInfoPart |
{ |
color:#777; |
} |
.RadGrid_Office2007 .rgInfoPart strong |
{ |
color:#4c4e54; |
} |
.RadGrid_Office2007 .rgPageFirst |
{ |
background-position:0 -550px; |
} |
.RadGrid_Office2007 .rgPageFirst:hover |
{ |
background-position:0 -600px; |
} |
.RadGrid_Office2007 .rgPagePrev |
{ |
background-position:0 -700px; |
} |
.RadGrid_Office2007 .rgPagePrev:hover |
{ |
background-position:0 -750px; |
} |
.RadGrid_Office2007 .rgPageNext |
{ |
background-position:0 -850px; |
} |
.RadGrid_Office2007 .rgPageNext:hover |
{ |
background-position:0 -900px; |
} |
.RadGrid_Office2007 .rgPageLast |
{ |
background-position:0 -1000px; |
} |
.RadGrid_Office2007 .rgPageLast:hover |
{ |
background-position:0 -1050px; |
} |
.RadGrid_Office2007 .rgPager .rgPagerButton |
{ |
border-color:#7e7e7e; |
background:#c6c6c6; |
color:#000; |
font:12px/12px "segoe ui",arial,sans-serif; |
} |
.RadGrid_Office2007 .rgNumPart a |
{ |
border:1px solid #e4e4e4; |
line-height:20px; |
color:#000; |
} |
.RadGrid_Office2007 .rgNumPart a:hover |
{ |
border-color:#c98400; |
background:#ffe79c; |
color:#892500; |
} |
.RadGrid_Office2007 .rgNumPart a.rgCurrentPage, |
.RadGrid_Office2007 .rgNumPart a.rgCurrentPage:hover |
{ |
border-color:#ca4b0c; |
background:transparent; |
color:#892500; |
} |
/*sorting, reordering*/ |
.RadGrid_Office2007 .rgHeader .rgSortAsc |
{ |
background-position:3px -248px; |
height:10px; |
} |
.RadGrid_Office2007 .rgHeader .rgSortDesc |
{ |
background-position:3px -198px; |
height:10px; |
} |
.GridReorderTop_Office2007, |
.GridReorderBottom_Office2007 |
{ |
background:0 0 no-repeat url('Grid/sprite.gif'); |
} |
.GridReorderBottom_Office2007 |
{ |
background-position:0 -50px; |
} |
/*filtering*/ |
.RadGrid_Office2007 .rgFilterRow |
{ |
background:#e4e4e4; |
} |
.RadGrid_Office2007 .rgFilterRow td |
{ |
border-bottom:1px solid #999; |
border-left:1px solid #e4e4e4; |
} |
.RadGrid_Office2007 .rgFilter |
{ |
background-position:0 -300px; |
} |
.RadGrid_Office2007 .rgFilter:hover |
{ |
background-position:0 -350px; |
} |
.RadGrid_Office2007 .rgFilterActive, |
.RadGrid_Office2007 .rgFilterActive:hover |
{ |
background-position:0 -400px; |
} |
.RadGrid_Office2007 .rgFilterBox |
{ |
border-color:#616161; |
font:12px "segoe ui",arial,sans-serif; |
color:#000; |
} |
/*filter context menu*/ |
.RadMenu_Office2007 .rgHCMClear, |
.RadMenu_Office2007 .rgHCMFilter |
{ |
border-color:#7e7e7e; |
background:#c6c6c6; |
color:#000; |
font-family:"segoe ui",arial,sans-serif; |
-moz-border-radius:0; |
-webkit-border-radius:0; |
border-radius:0; |
} |
.RadMenu_Office2007 .rgHCMClear:hover, |
.RadMenu_Office2007 .rgHCMFilter:hover |
{ |
border-color:#c98400; |
background-color:#ffe79c; |
color:#882501; |
} |
/*grouping*/ |
.RadGrid_Office2007 .rgGroupPanel |
{ |
border:0; |
border-bottom:1px solid #7c7c7c; |
background:#c6c6c6; |
} |
.RadGrid_Office2007 .rgGroupPanel td |
{ |
border:0; |
padding:3px 4px; |
} |
.RadGrid_Office2007 .rgGroupPanel td td |
{ |
padding:0; |
} |
.RadGrid_Office2007 .rgGroupPanel .rgSortAsc |
{ |
background-position:4px -144px; |
} |
.RadGrid_Office2007 .rgGroupPanel .rgSortDesc |
{ |
background-position:4px -94px; |
} |
.RadGrid_Office2007 .rgUngroup |
{ |
background-position:0 -6999px; |
} |
.RadGrid_Office2007 .rgGroupItem |
{ |
border:1px solid #7e7e7e; |
background:#c6c6c6; |
} |
.RadGrid_Office2007 .rgMasterTable td.rgGroupCol, |
.RadGrid_Office2007 .rgMasterTable td.rgExpandCol |
{ |
border-color:#c9c9c9; |
background:#c9c9c9 none; |
} |
.RadGrid_Office2007 .rgGroupHeader |
{ |
background:#c9c9c9; |
font-size:1.1em; |
line-height:22px; |
color:#000; |
} |
.RadGrid_Office2007 .rgGroupHeader td |
{ |
padding-left:8px; |
padding-bottom:2px; |
} |
.RadGrid_Office2007 .rgExpand |
{ |
background-position:5px -496px; |
} |
.RadGrid_Office2007 .rgCollapse |
{ |
background-position:3px -444px; |
} |
/*editing*/ |
.RadGrid_Office2007 .rgEditForm |
{ |
border-bottom:1px solid #999; |
} |
.RadGrid_Office2007 .rgUpdate |
{ |
background-position:0 -1800px; |
} |
.RadGrid_Office2007 .rgCancel |
{ |
background-position:0 -1850px; |
} |
/*hierarchy*/ |
.RadGrid_Office2007 .rgDetailTable |
{ |
border-color:#999; |
} |
/*command row*/ |
.RadGrid_Office2007 .rgCommandRow |
{ |
background:#c6c6c6; |
color:#000; |
} |
.RadGrid_Office2007 .rgCommandCell |
{ |
border:0; |
border-bottom:1px solid #7c7c7c; |
padding:0; |
} |
.RadGrid_Office2007 tfoot .rgCommandCell |
{ |
border-top:1px solid #7c7c7c; |
border-bottom:0; |
} |
.RadGrid_Office2007 .rgCommandTable td |
{ |
border:0; |
padding:2px 7px; |
} |
.RadGrid_Office2007 .rgCommandTable |
{ |
border:0; |
} |
.RadGrid_Office2007 .rgCommandRow a |
{ |
color:#000; |
text-decoration:none; |
} |
.RadGrid_Office2007 .rgAdd |
{ |
margin-right:3px; |
background-position:0 -1650px; |
} |
.RadGrid_Office2007 .rgRefresh |
{ |
margin-right:3px; |
background-position:0 -1600px; |
} |
.RadGrid_Office2007 .rgEdit |
{ |
background-position:0 -1700px; |
} |
.RadGrid_Office2007 .rgDel |
{ |
background-position:0 -1750px; |
} |
.RadGrid_Office2007 .rgExpXLS, |
.RadGrid_Office2007 .rgExpDOC, |
.RadGrid_Office2007 .rgExpPDF, |
.RadGrid_Office2007 .rgExpCSV |
{ |
background-image:url('Grid/export.gif'); |
} |
.RadGrid_Office2007 .rgExpXLS |
{ |
background-position:0 0; |
} |
.RadGrid_Office2007 .rgExpDOC |
{ |
background-position:0 -50px; |
} |
.RadGrid_Office2007 .rgExpPDF |
{ |
background-position:0 -100px; |
} |
.RadGrid_Office2007 .rgExpCSV |
{ |
background-position:0 -150px; |
} |
/*multirow select*/ |
.GridRowSelector_Office2007 |
{ |
background:#4c4e54; |
} |
/*row drag n drop*/ |
.GridItemDropIndicator_Office2007 |
{ |
border-top:1px dashed #666; |
} |
/*tooltip*/ |
.GridToolTip_Office2007 |
{ |
border:1px solid #c98400; |
padding:3px; |
background:#ffefbd; |
color:#333; |
} |
/*rtl*/ |
.RadGridRTL_Office2007 .rgHeader:first-child, |
.RadGridRTL_Office2007 th.rgResizeCol:first-child, |
.RadGridRTL_Office2007 .rgFilterRow>td:first-child, |
.RadGridRTL_Office2007 .rgRow>td:first-child, |
.RadGridRTL_Office2007 .rgAltRow>td:first-child |
{ |
border-left-width:0px; |
padding-left:7px; |
} |
.RadGridRTL_Office2007 .rgPageFirst |
{ |
background-position:0 -1000px; |
} |
.RadGridRTL_Office2007 .rgPageFirst:hover |
{ |
background-position:0 -1050px; |
} |
.RadGridRTL_Office2007 .rgPagePrev |
{ |
background-position:0 -850px; |
} |
.RadGridRTL_Office2007 .rgPagePrev:hover |
{ |
background-position:0 -900px; |
} |
.RadGridRTL_Office2007 .rgPageNext |
{ |
background-position:0 -700px; |
} |
.RadGridRTL_Office2007 .rgPageNext:hover |
{ |
background-position:0 -750px; |
} |
.RadGridRTL_Office2007 .rgPageLast |
{ |
background-position:0 -550px; |
} |
.RadGridRTL_Office2007 .rgPageLast:hover |
{ |
background-position:0 -600px; |
} |
DIV.RadGrid_Office2007 TH.rgResizeCol { |
PADDING-BOTTOM: 0px; |
PADDING-TOP: 0px; |
HEIGHT: 20px; |
BACKGROUND-COLOR: #F0F0F0; |
} |
DIV.RadGrid_Office2007 .rgHeader { |
PADDING-BOTTOM: 0px; |
PADDING-TOP: 0px; |
HEIGHT: 20px; |
BACKGROUND-COLOR: #F0F0F0; |
} |
DIV.RadGrid_Office2007 TH.rgSorted { |
COLOR: #000000; |
} |
DIV.RadGrid_Office2007 TH.rgSorted A { |
COLOR: #000000; |
} |
DIV.RadGrid_Office2007 .rgRow TD, DIV.RadGrid_Office2007 .rgAltRow TD { |
COLOR : #000000; |
BORDER-BOTTOM-COLOR: #C4DDFF; |
PADDING-BOTTOM: 0px; |
PADDING-TOP: 0px; |
} |
/*DIV.RadGrid_Office2007 .rgSelectedRow TD, rgAltRow rgSelectedRow{ |
BACKGROUND-COLOR: #A7CDF0; |
}*/ |
DIV.RadGrid_Office2007 TR.rgSelectedRow { |
BACKGROUND-COLOR: #A7CDF0; |
} |