Rank 1
We are trying to display a RadGrid with horizontal scroll bar as we have sevreal number of coulns to display.Iam generating the RadGrid programatically with dynamic columns.When i set the width of the Radgrid and also the columns in pixels iam able to see the horizonatal scrollbar. But we need to set the width in percentage,but it doesn't show the horizontal scrollbar.
Below is the code to create the radgrid
private
void DefineRadGridMarketsStructure()
{
object objDbId = SessionManager.GetSessionObject("INSTR_ID");
if (objDbId != null)
{
_dbId = (
int)objDbId;
}
grid =
new RadGrid();
grid.ID =
"radGridMarkets";
//grid.DataSourceID = "objContDSMarkets";
grid.AutoGenerateColumns =
false;
grid.AllowSorting =
true;
grid.AllowMultiRowSelection =
true;
grid.AllowMultiRowEdit =
true;
grid.GridLines =
GridLines.None;
grid.Height =
Unit.Pixel(400);
grid.Width =
Unit.Percentage(100);
grid.AllowPaging =
true;
grid.PageSize = 1000;
grid.GroupingSettings.CaseSensitive =
false;
grid.EnableLinqExpressions =
false;
String htmlColor = "#EDEFF1";
Color backColor = ColorTranslator.FromHtml(htmlColor);
grid.AlternatingItemStyle.BackColor = backColor;
String editColor = "#A2A2A2";
Color editbackColor = ColorTranslator.FromHtml(editColor);
grid.EditItemStyle.BackColor = editbackColor;
grid.EditItemStyle.Font.Name =
"arial";
grid.EditItemStyle.Font.Size =
new FontUnit("11px");
//grid.BorderColor = Color.Blue;
grid.MasterTableView.Width =
Unit.Percentage(100);
grid.MasterTableView.AllowFilteringByColumn =
true;
grid.MasterTableView.AllowPaging =
true;
grid.MasterTableView.PagerStyle.AlwaysVisible =
true;
grid.MasterTableView.PagerStyle.Position =
GridPagerPosition.TopAndBottom;
grid.MasterTableView.PagerStyle.Mode =
GridPagerMode.NextPrevNumericAndAdvanced;
grid.ClientSettings.AllowKeyboardNavigation =
true;
grid.ClientSettings.Selecting.AllowRowSelect =
true;
grid.ClientSettings.Scrolling.AllowScroll =
true;
grid.ClientSettings.Scrolling.UseStaticHeaders =
true;
grid.ClientSettings.Resizing.AllowColumnResize =
true;
grid.ClientSettings.Resizing.AllowRowResize =
true;
grid.ClientSettings.Resizing.ResizeGridOnColumnResize =
true;
grid.ClientSettings.Resizing.EnableRealTimeResize =
true;
grid.ClientSettings.Scrolling.ScrollHeight =
Unit.Pixel(320);
grid.FilterMenu.EnableTheming =
true;
grid.FilterMenu.CollapseAnimation.Duration = 200;
grid.FilterMenu.CollapseAnimation.Type =
AnimationType.OutQuint;
//Add Master table
grid.MasterTableView.Name =
"Market";
grid.MasterTableView.PageSize = 1000;
grid.MasterTableView.EditMode =
GridEditMode.InPlace;
grid.MasterTableView.TableLayout =
GridTableLayout.Fixed;
GridClientSelectColumn col0 = new GridClientSelectColumn();
col0.UniqueName =
"marketcheckBoxColumn";
grid.MasterTableView.Columns.Add(col0);
grid.MasterTableView.Columns[0].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[0].ItemStyle.Width =
Unit.Percentage(10);
//grid.MasterTableView.Columns[0].HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
//grid.MasterTableView.Columns[0].ItemStyle.HorizontalAlign = HorizontalAlign.Center;
GridEditCommandColumn col1 = new GridEditCommandColumn();
col1.ButtonType =
GridButtonColumnType.ImageButton;
col1.UpdateImageUrl =
"../images/Update.gif";
col1.EditImageUrl =
"../images/Edit.gif";
col1.InsertImageUrl =
"../images/Insert.gif";
col1.CancelImageUrl =
"../images/Cancel.gif";
col1.UniqueName =
"EditCommandColumn";
grid.MasterTableView.Columns.Add(col1);
grid.MasterTableView.Columns[1].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[1].ItemStyle.Width =
Unit.Percentage(10);
GridButtonColumn col2 = new GridButtonColumn();
col2.Text =
"Delete";
col2.ConfirmText =
"Delete this product?";
col2.ButtonType =
GridButtonColumnType.ImageButton;
col2.ImageUrl =
"../images/Delete.gif";
col2.CommandName =
"Delete";
col2.UniqueName =
"DeleteColumn";
grid.MasterTableView.Columns.Add(col2);
grid.MasterTableView.Columns[2].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[2].ItemStyle.Width =
Unit.Percentage(10);
GridCheckBoxColumn col3 = new GridCheckBoxColumn();
col3.UniqueName =
"colActive";
col3.HeaderText =
"Active";
col3.AllowFiltering =
false;
grid.MasterTableView.Columns.Add(col3);
grid.MasterTableView.Columns[3].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[3].ItemStyle.Width =
Unit.Percentage(10);
GridBoundColumn col4 = new GridBoundColumn();
//col4.DataField = "Tag";
col4.DataField =
"mkt_tag";
col4.UniqueName =
"colTag";
col4.HeaderText =
"Tag";
//col3.ReadOnly = true;
grid.MasterTableView.Columns.Add(col4);
grid.MasterTableView.Columns[4].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[4].ItemStyle.Width =
Unit.Percentage(10);
string templateColumnName = "Country";
GridTemplateColumn col5 = new GridTemplateColumn();
col5.ItemTemplate =
new ItemTemplate(templateColumnName);
col5.EditItemTemplate =
new EditItemTemplate(templateColumnName,_dbId);
col5.HeaderText =
"Country";
col5.UniqueName =
"colCountry";
grid.MasterTableView.Columns.Add(col5);
grid.MasterTableView.Columns[5].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[5].ItemStyle.Width =
Unit.Percentage(10);
GridBoundColumn col6 = new GridBoundColumn();
//col6.DataField = "ShortDescription";
col6.DataField =
"mkt_sdesc";
col6.UniqueName =
"colShortDescription";
col6.HeaderText =
"Short Description";
col6.MaxLength = 40;
grid.MasterTableView.Columns.Add(col6);
grid.MasterTableView.Columns[6].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[6].ItemStyle.Width =
Unit.Percentage(10);
GridBoundColumn col7 = new GridBoundColumn();
col7.DataField =
"mkt_sdesc2";
col7.UniqueName =
"colShortDescription2";
col7.HeaderText =
"Short Description 2";
col7.MaxLength = 40;
grid.MasterTableView.Columns.Add(col7);
grid.MasterTableView.Columns[7].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[7].ItemStyle.Width =
Unit.Percentage(10);
GridBoundColumn col8 = new GridBoundColumn();
//col8.DataField = "LongDescription";
col8.DataField =
"mkt_ldesc";
col8.UniqueName =
"colLongDescription";
col8.HeaderText =
"Long Description";
col8.MaxLength = 80;
grid.MasterTableView.Columns.Add(col8);
grid.MasterTableView.Columns[8].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[8].ItemStyle.Width =
Unit.Percentage(10);
templateColumnName =
"QCInstructions";
GridTemplateColumn col9 = new GridTemplateColumn();
col9.DataField =
"QCInstructions";
col9.ItemTemplate =
new ItemTemplate(templateColumnName);
col9.EditItemTemplate =
new EditItemTemplate(templateColumnName, _dbId);
col9.HeaderText =
"QC Instructions";
col9.UniqueName =
"colQCInstructions";
grid.MasterTableView.Columns.Add(col9);
grid.MasterTableView.Columns[9].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[9].ItemStyle.Width =
Unit.Percentage(10);
GridBoundColumn col11 = new GridBoundColumn();
col11.DataField =
"nshops";
col11.UniqueName =
"colNShops";
col11.HeaderText =
"NShops";
col11.MaxLength = 5;
grid.MasterTableView.Columns.Add(col11);
grid.MasterTableView.Columns[10].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[10].ItemStyle.Width =
Unit.Percentage(10);
GridTemplateColumn col12 = new GridTemplateColumn();
col12.ItemTemplate =
new ItemTemplate("PeriodLength");
col12.EditItemTemplate =
new EditItemTemplate("PeriodLength", _dbId);
col12.UniqueName =
"colPeriodLength";
col12.HeaderText =
"Period Length";
grid.MasterTableView.Columns.Add(col12);
grid.MasterTableView.Columns[11].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[11].ItemStyle.Width =
Unit.Percentage(10);
DataSet ds = new DataSet();
DBConnectionUtility dbcon = new DBConnectionUtility();
ds = dbcon.GetDataTable(
"Select db_char_name_id , 'Char_' || char_name as Char_name from axnadmin.gs_clt_db_char_names where clt_db_id= " + _dbId +
" and dimension_id = 1");
_noOfChars = ds.Tables[0].Rows.Count;
_dtCharNames = ds.Tables[0];
StringBuilder sb = new StringBuilder();
sb.Append(
"clt_db_id,mkt_id,mkt_tag,country,qcinstructions,periodlength,Active");
for (int i = 0; i < _noOfChars ; i++)
{
GridTemplateColumn col13 = new GridTemplateColumn();
col13.ItemTemplate =
new ItemTemplate(ds.Tables[0].Rows[i]["Char_Name"].ToString());
col13.EditItemTemplate =
new EditItemTemplate(ds.Tables[0].Rows[i]["Char_Name"].ToString(),_dbId);
col13.HeaderText = ds.Tables[0].Rows[i][
"Char_Name"].ToString();
col13.UniqueName =
"colChar" + ds.Tables[0].Rows[i]["Char_Name"];
sb.Append(
",");
sb.Append(ds.Tables[0].Rows[i][
"Char_Name"].ToString());
grid.MasterTableView.Columns.Add(col13);
grid.MasterTableView.Columns[i + 12].HeaderStyle.Width =
Unit.Percentage(10);
grid.MasterTableView.Columns[i + 12].ItemStyle.Width =
Unit.Percentage(10);
}
string dataKeyNames = sb.ToString();
grid.MasterTableView.DataKeyNames = dataKeyNames.Split(
',');
grid.NeedDataSource +=
new GridNeedDataSourceEventHandler(this.RadGridMarkets_NeedDataSource);
//grid.DeleteCommand += new GridCommandEventHandler(this.RadGridMarkets_DeleteCommand);
//grid.UpdateCommand += new GridCommandEventHandler(this.RadGridMarkets_UpdateCommand);
//grid.InsertCommand += new GridCommandEventHandler(this.RadGridMarkets_InsertCommand);
grid.ItemDataBound +=
new GridItemEventHandler(this.RadGridMarkets_ItemDataBound);
grid.ItemCommand +=
new GridCommandEventHandler(this.RadGridMarkets_ItemCommand);
MessageControl MessageUserControl = (MessageControl)LoadControl("~/Common/CommonUI/MessageControl/MessageControl.ascx");
MessageUserControl.ID =
"lblMessageUserControl";
//objContainer.Selecting += new EventHandler<ObjectContainerDataSourceSelectingEventArgs>(this.objContDSMarkets_Selecting);
grid.MasterTableView.CommandItemTemplate =
new MarketCommandItemTemplate();
grid.MasterTableView.CommandItemDisplay =
GridCommandItemDisplay.Top;
// Add the grid to the placeholder
this.radAjaxPanelMarkets.Controls.Add(MessageUserControl);
this.radAjaxPanelMarkets.Controls.Add(grid);
//this.radAjaxPanelMarkets.Controls.Add(objContainer);
}
Thanks and Regards
V.Balamurali
9 Answers, 1 is accepted
You can set column widths, according to your preference (in percent or in pixels). In order to display horizontal scroll for navigation, you need to make sure that the total width of the columns (either auto-generated or declaratively set) exceeds the width of the grid (as demonstrated in this online demo).
Greetings,
Pavlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
Thanks for the response. Actually you can see in the code i have pasted before that I have already set the width for the columns by setting the headerstyle width,but still the horizontal scrollbar doesn't appear
Thanks and Regards
V.Balamurali
Rank 1
Thanks for the response. Actually you can see in the code i have pasted before that I have already set the width for the columns by setting the headerstyle width,but still the horizontal scrollbar doesn't appear.
I have set the radgrid width as 100% and my columns are definetly more than 100%. I see only those columns that fit within 100%..rest of the columns are not getting displayed
Thanks and Regards
V.Balamurali
In order to progress in the resolution of this problem I will ask you to open a formal support ticket and send me a small sample project where I can reproduce the problem. Thus I could do all my best to help you further in resolving it.
All the best,
Pavlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
Try this, it was discussed somewhere else on the forums, this adds a scroll bar to the bottom of the grid.
| <div style="overflow-x: scroll"> |
| <<telerik:RadGrid> |
| </telerik:RadGrid> |
| </div> |
Rank 1
The horizonatl Scroll bar appears only if we set the width of the Radgrid in pixels.if i set it as 100% iam not getting the horizontal scrollbar even if the total width of the columns exceeds 100%.
I followed your scenario and prepared a simple working project which handles the desired functionality. Please examine it and let me know if it works as expected.
All the best,
Pavlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
When we set the column widths also in percentage .Its not showing all the columns.can you try setting the column widths in percentage exceeding 100% and see how it behaves
Attached to this message is a modified project with column widths in percent and it behaves as expected. Give it a try and let me know if it works for you.
I hope this helps.
Regards,
Pavlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.