I am using telerik rad grid. The grid is distorting if any refresh happend in which there is no databind.please find attached screen shot for details. Any help will be greatly aprecieated.
Nb: I am creating the grid entirly in page Init method.
protected
void Page_Init(object sender, EventArgs e)
{
if (Request.Cookies["Session"] != null)
{
sessionValues = Request.Cookies[
"Session"].Value;
objStateEngineNet.Load(Server.UrlDecode(sessionValues));
}
_actorID =
new Guid(objStateEngineNet.GetValue("UserId").ToString());
_companyID =
new Guid(objStateEngineNet.GetValue("UserCompanyId").ToString());
// if (!Page.IsPostBack)
{
//Dynamic Grid Creation
rgdFVM =
new Telerik.Web.UI.RadGrid();
rgdFVM.Columns.Clear();
rgdFVM.Skin =
"Default";
rgdFVM.Height =
Unit.Pixel(510);
rgdFVM.AutoGenerateColumns =
false;
rgdFVM.ItemDataBound +=
new GridItemEventHandler(this.rgdFVM_ItemDataBound);
rgdFVM.ItemCommand +=
new GridCommandEventHandler(this.rgdFVM_ItemCommand);
rgdFVM.AllowPaging =
false;
String[] strDataKeys = new string[] { "ROW_NO", "NAME_VALUE_COLLECTION_ITEM_ACTIVE", "NAME_VALUE_COLLECTION_ITEM_PARENT_ID", "NAME_VALUE_COLLECTION_ID", "NAME_VALUE_COLLECTION_ITEM_ID", "NAME_VALUE_COLLECTION_ITEM_ORDER" };
rgdFVM.MasterTableView.DataKeyNames = strDataKeys;
rgdFVM.MasterTableView.ClientDataKeyNames = strDataKeys;
rgdFVM.ClientSettings.Scrolling.AllowScroll =
true;
rgdFVM.ClientSettings.Scrolling.UseStaticHeaders =
true;
rgdFVM.ClientSettings.Scrolling.FrozenColumnsCount = 7;
rgdFVM.ClientSettings.Scrolling.SaveScrollPosition =
false;
rgdFVM.ClientSettings.Resizing.AllowRowResize =
false;
rgdFVM.ClientSettings.Resizing.AllowColumnResize =
false;
rgdFVM.ClientSettings.Resizing.EnableRealTimeResize =
false;
rgdFVM.ClientSettings.Resizing.ClipCellContentOnResize =
false;
rgdFVM.Attributes.Add(
"onkeydown", "javascript:return mykeydown(event)");
rgdFVM.ClientSettings.ClientEvents.OnGridCreated =
"GridCreated";
rgdFVM.MasterTableView.Width =
Unit.Percentage(100);
rgdFVM.Width =
Unit.Percentage(98);
PlaceHolder1.Controls.Add(rgdFVM);
hidRgdFVM.Value = rgdFVM.ClientID;
//Create common Grid Columns
CreateGridStaticFeilds();
//Create Company Supported Lagnguage Columns
CreateMultilingualGrid();
}
}
protected
void CreateGridStaticFeilds()
{
//To create RowNumber Text Box
string templateColumnName = "RowNum";
string dataFeild = "ROW_NO";
string textboxID = "txtRowNum";
Telerik.Web.UI.
GridTemplateColumn templateColumn = new Telerik.Web.UI.GridTemplateColumn();
templateColumn.ItemTemplate =
new RowNumTemplate(templateColumnName, textboxID, dataFeild);
templateColumn.HeaderText =
"";
templateColumn.UniqueName =
"RowNum";
rgdFVM.MasterTableView.Columns.Add(templateColumn);
Telerik.Web.UI.
GridBoundColumn boundColumn;
boundColumn =
new Telerik.Web.UI.GridBoundColumn();
boundColumn.DataField =
"NAME_VALUE_COLLECTION_ITEM_ACTIVE";
boundColumn.HeaderText =
"";
boundColumn.Visible =
false;
rgdFVM.MasterTableView.Columns.Add(boundColumn);
//To create Insert Button in Grid
templateColumnName =
"Insert";
string insertID = "Insert";
string InsertUrl = "images/Insert.jpg";
bool insertisScripting = false;
string InsertcommandName = "Insert";
Telerik.Web.UI.
GridTemplateColumn templateColumn6 = new Telerik.Web.UI.GridTemplateColumn();
templateColumn6.ItemTemplate =
new ImageTemplate(templateColumnName, insertID, InsertUrl, insertisScripting, InsertcommandName);
templateColumn6.HeaderText =
"";
templateColumn6.UniqueName =
"Insert";
rgdFVM.MasterTableView.Columns.Add(templateColumn6);
//To create Activate/Deactivate Buttons
templateColumnName =
"ActivateColumn";
string[] buttonID1 ={ "Activate", "Deactivate" };
bool[] isScripting1 ={ false, true };
string[] ImageUrl1 ={ "~/images/Reactivate.gif", "~/images/delete.gif" };
string[] commandName1 = { "ActivateColumn", "DeactivateColumn" };
Telerik.Web.UI.
GridTemplateColumn templateActivateColumn = new Telerik.Web.UI.GridTemplateColumn();
templateActivateColumn.ItemTemplate =
new ImageActivateDeactivate(templateColumnName, buttonID1, ImageUrl1, isScripting1, commandName1);
templateActivateColumn.HeaderText =
"";
templateActivateColumn.UniqueName =
"ActivateColumn";
rgdFVM.MasterTableView.Columns.Add(templateActivateColumn);
//To create MoveUp Button
string buttonID = string.Empty;
bool isScripting;
string ImageUrl = string.Empty;
string commandName = string.Empty;
templateColumnName =
"MoveUp";
buttonID =
"MoveUp";
isScripting =
false;
ImageUrl =
"images/moveUp.gif";
commandName =
"MoveUp";
Telerik.Web.UI.
GridTemplateColumn templateColumnMoveUp = new Telerik.Web.UI.GridTemplateColumn();
templateColumnMoveUp.ItemTemplate =
new ImageTemplate(templateColumnName, buttonID, ImageUrl, isScripting, commandName);
templateColumnMoveUp.HeaderText =
"";
templateColumnMoveUp.UniqueName =
"MoveUp";
rgdFVM.MasterTableView.Columns.Add(templateColumnMoveUp);
//To create MoveDown Button
templateColumnName =
"MoveDown";
buttonID =
"MoveDown";
isScripting =
false;
ImageUrl =
"images/moveDown.gif";
commandName =
"MoveDown";
Telerik.Web.UI.
GridTemplateColumn templateColumnMoveDown = new Telerik.Web.UI.GridTemplateColumn();
templateColumnMoveDown.ItemTemplate =
new ImageTemplate(templateColumnName, buttonID, ImageUrl, isScripting, commandName);
templateColumnMoveDown.HeaderText =
"";
templateColumnMoveDown.UniqueName =
"MoveDown";
rgdFVM.MasterTableView.Columns.Add(templateColumnMoveDown);
//To create NextLevel Button
templateColumnName =
"NextLevel";
buttonID =
"btnNextLevel";
string buttonText = "Next Level";
isScripting =
false;
commandName =
"NextLevel";
Telerik.Web.UI.
GridTemplateColumn templateColumnNextLevel = new Telerik.Web.UI.GridTemplateColumn();
templateColumnNextLevel.ItemTemplate =
new ButtonTemplate(templateColumnName, buttonID, buttonText, isScripting, commandName);
templateColumnNextLevel.HeaderText =
"";
templateColumnNextLevel.UniqueName =
"NextLevel";
rgdFVM.MasterTableView.Columns.Add(templateColumnNextLevel);
//To create English Column in the grid
templateColumnName =
"English";
string[] engIds ={ "txten-US", "hidRowNo" };
string[] engDataFields ={ "en-US", "ROW_NO" };
Telerik.Web.UI.
GridTemplateColumn templateColumnEglish = new Telerik.Web.UI.GridTemplateColumn();
templateColumnEglish.ItemTemplate =
new EnglishTemplate(templateColumnName, engIds, engDataFields);
templateColumnEglish.HeaderText =
"English";
templateColumnEglish.UniqueName =
"English";
rgdFVM.MasterTableView.Columns.Add(templateColumnEglish);
}
protected void CreateMultilingualGrid()//Telerik.Web.UI.RadGrid rgdFVM
{
try
{
//This method will loop through all company supported languages and create Gridview column dynamically
FieldValueModifierBC objFieldValueModifierBC = new FieldValueModifierBC();
DataTable LanguagesTable = objFieldValueModifierBC.GetCompanySupportedLanguage(_actorID, _companyID);
if (LanguagesTable.Rows.Count > 0)
{
for (int i = 0; i <= LanguagesTable.Rows.Count - 1; i++)
{
if (LanguagesTable.Rows[i][0].ToString() != "en-US")//Rows[i][0] represent Locale Code in the data table
{
string templateColumnName = LanguagesTable.Rows[i][3].ToString();
string dataFeild = LanguagesTable.Rows[i][0].ToString();
string textboxID = "txt" + LanguagesTable.Rows[i][0].ToString();
Telerik.Web.UI.
GridTemplateColumn templateColumn = new Telerik.Web.UI.GridTemplateColumn();
templateColumn.ItemTemplate =
new MyTemplate(templateColumnName, textboxID, dataFeild);
templateColumn.HeaderText = templateColumnName;
templateColumn.UniqueName = LanguagesTable.Rows[i][0].ToString();
rgdFVM.MasterTableView.Columns.Add(templateColumn);
}
}
}
foreach (Telerik.Web.UI.GridColumn gbc in rgdFVM.Columns)
{
if (gbc.HeaderText.IndexOf("(") != -1)//Lanuage colume other that english will have its regional representation in brackets
{
gbc.HeaderStyle.Width =
Unit.Pixel(150);
gbc.HeaderStyle.Height =
Unit.Pixel(10);
gbc.ItemStyle.Width =
Unit.Pixel(150);
gbc.Resizable =
false;
}
if (gbc.HeaderText == "")// For items which doesn't have Header. Eg. Insert Button
{
gbc.HeaderStyle.Width =
Unit.Pixel(35);
gbc.HeaderStyle.Height =
Unit.Pixel(10);
gbc.ItemStyle.Width =
Unit.Pixel(35);
gbc.Resizable =
false;
}
if (gbc.HeaderText == "English")
{
gbc.HeaderStyle.Width =
Unit.Pixel(150);
gbc.HeaderStyle.Height =
Unit.Pixel(10);
gbc.ItemStyle.Width =
Unit.Pixel(150);
gbc.ItemStyle.CssClass =
"Row50";
gbc.Resizable =
false;
}
if (gbc.UniqueName == "NextLevel")
{
gbc.HeaderStyle.Width =
Unit.Pixel(90);
gbc.HeaderStyle.Height =
Unit.Pixel(10);
gbc.ItemStyle.Width =
Unit.Pixel(90);
gbc.Resizable =
false;
}
}
}
catch (Exception ex)
{
Logger.Error(_CLASS_NAME, ex.ToString());
throw new AppException(_CLASS_NAME, MethodInfo.GetCurrentMethod().Name, AppExceptionCode.SYSTEM_ERROR, ex.ToString());
}
}
7 Answers, 1 is accepted
Remove the following lines from your code and the column should not resize after the PostBack:
if (gbc.HeaderText == "English"){ gbc.HeaderStyle.Width = Unit.Pixel(150);Best wishes,
Vasil
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
Rank 1
This will resolve distortion issue.But there some more problem like header is coming in the wrong position.Please find attached screen shot and suggest a solution.
Try to remove also the gbc.ItemStyle.Width = Unit.Pixel(150); and see if this will fix the issue.
All the best,
Vasil
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
Rank 1
I am able to resolve the same by setting
rgdFVM.ClientSettings.Scrolling.UseStaticHeaders =
false;
and by removing gbc.ItemStyle.Width = Unit.Pixel(150);
Thank you for the help
Rank 2
<HeaderStyle HorizontalAlign="Center" Font-Bold="true" Width="10%"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" Width="10%"></ItemStyle>
Is there any real solution without removing width and use as well static header and footer as well?
Make sure that the sum of the header widths of all your columns is less than 100% of the grid's width.
Additionally could you tell us what is the difference between your code and this shown in this online demo? Could share your code that we can test locally here?
Kind regards,
Vasil
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Rank 1
Using of Static headers will not create problem. If you are setting width from code behind make sure you are setting the same width in Page Load too.Reason is while refreshing the page it will take the original Width and if you set width from eg. Item data Bound then it will distort.