Hi,
I have come across an issue with the layout of a tab strip on my page. I have a menu div on the left side with a fixed height and a content div next to it.
The issue is that the tabs appear at the bottom of the page instead of in the div st the top (see attached screen shot).
Here is the code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Tabstriptest._default" %> <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> <!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></title> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </Scripts> </telerik:RadScriptManager> <div style="width: auto;"> <div style="width: 180px;height: 500px; float: left;background-color: Red;">Menu here</div> <div style="width: auto;margin-left: 190px;margin-right: 0px;"> <div style="width: 100%;background-color: Green;"> <telerik:RadToolBar ID="rtbVisitMenu" runat="server" Width="100%"> <Items> <telerik:RadToolBarButton runat="server" Text="New Visit"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Edit Visit"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Print"> </telerik:RadToolBarButton> </Items> </telerik:RadToolBar> </div> <div style="width: 100%;background-color: Blue;"> <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"> <Tabs> <telerik:RadTab Text="tab 1" runat="server" PageViewID="RadPageView1" Selected="true"></telerik:RadTab> <telerik:RadTab Text="tab 2" runat="server" PageViewID="RadPageView2"></telerik:RadTab> </Tabs> </telerik:RadTabStrip> <telerik:RadMultiPage ID="RadMultiPage1" runat="server"> <telerik:RadPageView ID="RadPageView1" runat="server" Selected="true">RadPageView1</telerik:RadPageView> <telerik:RadPageView ID="RadPageView2" runat="server">RadPageView2</telerik:RadPageView> </telerik:RadMultiPage> </div> </div> </div> </form> </body> </html> Is this an issue with the tab strip of is there soem html/css I can use to get around this.
Thanks
Gavin.
function populateSearchAttributesSuccess(result) { var drpSearchAttributeFixedList = document.getElementById('drp_SearchAttributeFixedList'); var drpSearchAttributeAssociatedList = document.getElementById('drp_SearchAttributeAssociatedList'); var drpSearchAttributeItemLookup = document.getElementById('drp_SearchAttributeItemLookup'); var drpSearchAttributeBlackList = document.getElementById('drp_SearchAttributeBlackList'); var drpSearchAttributeFilterAssociatedList = document.getElementById('drp_merchlist_search_attribute'); var doFixed = false; var doAssociated = false; var doLookup = false; var doBlack = false; var doFilter = false; if (drpSearchAttributeFixedList != null) { doFixed = true; drpSearchAttributeFixedList.style.display = 'block'; drpSearchAttributeFixedList.options.length = 0; } if (drpSearchAttributeAssociatedList != null) { doAssociated = true; drpSearchAttributeAssociatedList.style.display = 'block'; drpSearchAttributeAssociatedList.options.length = 0; } if (drpSearchAttributeItemLookup != null) { doLookup = true; drpSearchAttributeItemLookup.style.display = 'block'; drpSearchAttributeItemLookup.options.length = 0; } if (drpSearchAttributeBlackList != null) { doBlack = true; drpSearchAttributeBlackList.style.display = 'block'; drpSearchAttributeBlackList.options.length = 0; } if (drpSearchAttributeFilterAssociatedList != null) { doFilter = true; drpSearchAttributeFilterAssociatedList.options.length = 0; } var xmlCatalogsArray = result.getElementsByTagName('Table1'); var o; for (var i = 0; i < xmlCatalogsArray.length; i++) { if (xmlCatalogsArray[i].getElementsByTagName('ResonanceField').item(0).firstChild != null && xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild) { if (doFixed) { //Populate the fixed list o = document.createElement('option'); o.value = xmlCatalogsArray[i].getElementsByTagName('ResonanceField').item(0).firstChild.data; o.text = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data; o.label = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data; if (isInternetExplorer()) drpSearchAttributeFixedList.appendChild(o); else drpSearchAttributeFixedList.add(o, null); } if (doAssociated) { //Populate the associated list o = document.createElement('option'); o.value = xmlCatalogsArray[i].getElementsByTagName('ResonanceField').item(0).firstChild.data; o.text = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data; o.label = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data; if (isInternetExplorer()) drpSearchAttributeAssociatedList.appendChild(o); else drpSearchAttributeAssociatedList.add(o, null); } if (doLookup) { //Populate the Item Lookup field o = document.createElement('option'); o.value = xmlCatalogsArray[i].getElementsByTagName('ResonanceField').item(0).firstChild.data; o.text = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data; o.label = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data; if (isInternetExplorer()) drpSearchAttributeItemLookup.appendChild(o); else drpSearchAttributeItemLookup.add(o, null); } if (doBlack) { //Populate the Blacklist search attribute selector o = document.createElement('option'); o.value = xmlCatalogsArray[i].getElementsByTagName('ResonanceField').item(0).firstChild.data; o.text = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data; o.label = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data; if (isInternetExplorer()) drpSearchAttributeBlackList.appendChild(o); else drpSearchAttributeBlackList.add(o, null); } if (doFilter) { //populate the associated merchandising list filtering box o = document.createElement('option'); o.value = xmlCatalogsArray[i].getElementsByTagName('ResonanceField').item(0).firstChild.data; o.text = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data; o.label = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data; if (isInternetExplorer()) drpSearchAttributeFilterAssociatedList.appendChild(o); else drpSearchAttributeFilterAssociatedList.add(o, null); } } }grid.MasterTableView.CommandItemSettings.ShowExportToExcelButton = true;grid.MasterTableView.CommandItemSettings.ShowExportToPdfButton = true;grid.MasterTableView.CommandItemSettings.ShowExportToWordButton = true;grid.ExportSettings.IgnorePaging = true;grid.ExportSettings.ExportOnlyData = true;grid.ExportSettings.OpenInNewWindow = true;if (e.CommandName == RadGrid.ExportToExcelCommandName || e.CommandName == RadGrid.ExportToPdfCommandName || e.CommandName == RadGrid.ExportToWordCommandName){ foreach (GridColumn column in grid.MasterTableView.Columns) { if (!(column is GridBoundColumn) && !(column is GridCheckBoxColumn)) { column.Visible = false; } }}<telerik:RadComboBox ID="ddlValue" runat="server" AllowCustomText="True" Width="320px" MarkFirstMatch="True" AutoCompleteSeparator=";" AutoPostBack="true" OnSelectedIndexChanged="ddlValue_SelectedIndexChanged"></telerik:RadComboBox>
And this code-behind
protected void Page_Load(object sender, EventArgs e){ if (!this.IsPostBack) { var datasource = new RadComboBoxItemCollection(ddlValue) { new RadComboBoxItem("", ""), new RadComboBoxItem("David Larkin", Guid.NewGuid().ToString()), new RadComboBoxItem("Ahmed Warreth", Guid.NewGuid().ToString()), new RadComboBoxItem("Ryan Estes", Guid.NewGuid().ToString()), new RadComboBoxItem("Antonio Siqueira", Guid.NewGuid().ToString()) }; ddlValue.DataSource = datasource; ddlValue.DataTextField = "Text"; ddlValue.DataValueField = "Value"; ddlValue.DataBind(); }} protected void ddlValue_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e){ ltrSelection.Text = (sender as RadComboBox).Text;}
I'm experiencing the following behaviour:
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"> <telerik:RadGrid ID="rdgSurveys" runat="server" AllowPaging="false" Skin="Office2010Silver" OnNeedDataSource="rdgSurveys_NeedDataSource" OnItemDataBound="rdgSurveys_ItemDataBound" OnItemCreated="rdgSurveys_ItemCreated"> <MasterTableView AutoGenerateColumns="False" HeaderStyle-HorizontalAlign="Center" HierarchyDefaultExpanded="false"> <GroupByExpressions> <telerik:GridGroupByExpression> <SelectFields> <telerik:GridGroupByField FieldName="Ref" FieldAlias="Survey" /> <telerik:GridGroupByField FieldAlias="Count" FieldName="SumField" Aggregate="Sum" /> </SelectFields> <GroupByFields> <telerik:GridGroupByField FieldName="Ref" SortOrder="Ascending"></telerik:GridGroupByField> </GroupByFields> </telerik:GridGroupByExpression> </GroupByExpressions> <Columns> <telerik:GridBoundColumn DataField="DateCreated" DataType="System.DateTime" HeaderText="Date Created" UniqueName="DateCreated" DataFormatString="{0:dd MMM yyy hh:mm}" /> <telerik:GridBoundColumn DataField="Version" DataType="System.String" HeaderText="Version" UniqueName="Version" /> <telerik:GridBoundColumn DataField="Respondent" DataType="System.String" HeaderText="Completed By" UniqueName="Respondent" /> </Columns> </MasterTableView> </telerik:RadGrid> </telerik:RadAjaxPanel>RadAjaxManager.GetCurrent(Page).ClientEvents.OnRequestStart = "RequestStart"; RadAjaxManager.GetCurrent(Page).ClientEvents.OnResponseEnd = "ResponseEnd";<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="grdItems"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="grdItems" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManagerProxy><script type="text/javascript"> var currentLoadingPanel = null; var currentUpdatedControl = null; function RequestStart(sender, args) { currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>"); currentUpdatedControl = args.get_eventTarget(); currentLoadingPanel.show(currentUpdatedControl); } function ResponseEnd() { //hide the loading panel and clean up the global variables if (currentLoadingPanel != null) currentLoadingPanel.hide(currentUpdatedControl); currentUpdatedControl = null; currentLoadingPanel = null; } </script>I have radgrid which displays information on 2 grouping levels
Based on selction from dropdown above the radgrid, it retrieves the Radgrid.
On first load of the page or whenever there is change in the selection in the search drop down. I need the Group1 not to expand and user should able to expand the group which should result the groups inside it and then expand I should able to expand the 2nd group again.
I was able to to do the following in the load
If Not IsPostBack Then
RadGrid1.MasterTableView.GroupsDefaultExpanded = False
Else
RadGrid1.MasterTableView.GroupsDefaultExpanded = True <--- I have to do this otherwise it stays FALSE on subsequest page loads
End If
And on the change selection of dropdown I am doing
RadGrid1.MasterTableView.GroupsDefaultExpanded = FALSE
With the above codigng the first load of grid displays fine with not expanded , when i click on the group expand button, the symbol changes that it expanded but it does not display the expanded groups. Now If I clcik again the same buttons ,it shows everything with all 2 level groups also expanded .
So basically on 1st time you don't see any change in the display of screen ( except the higher level group shows expanded sysmbol).
Clicking on it agian it shows everything expanded.
How to control the two level groupings for the scenario I mentioned above.
Thanks