FindTabByUrl on tabs nested within another tab using Telerik - tabs

I have a RadTabStrip being used as a menu (the tabs act as links), some tabs when clicked open a sub-menu for related links.
I have the following code to highlight the current tab being visited:
Master Page Code-behind
protected void Page_Load(object sender, EventArgs e)
{
RadTabStrip tabControl = FindControl("radTabMenu"); //Pseudo
RadTab currentTab = tabControl.FindTabByUrl(Request.Url.PathAndQuery);
if (currentTab != null) currentTab.Selected = true;
}
Master Page
<telerik:RadTabStrip ID="radTabMenu" runat="server">
<Tabs>
<telerik:RadTab Text="Home" NavigateUrl="~/" /> <!-- Loads Default.aspx -->
<telerik:RadTab Text="Menu Item" NavigateUrl="~/MenuItem.aspx" />
<telerik:RadTab Text="Top Level Nav">
<Tabs>
<telerik:RadTab Text="Lower Menu Item 1" />
<telerik:RadTab Text="Lower Menu Item 2" NavigateUrl="~/Location/Page.aspx" />
</Tabs>
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
On page load if I have clicked Menu Item tab to load MenuItem page, the RadTabs correctly highlights the tab. However, I'm not sure how to go about making sure the sub-tab gets highlighted correctly.
I'm trying this, but I'm a little stuck:
RadTabStrip tabControl = FindControl("radTabMenu"); //Pseudo
RadTab currentTab = tabControl.FindTabByUrl(Request.Url.PathAndQuery);
if (currentTab != null)
currentTab.Selected = true;
else
{
string dir = Request.Url.GetComponents(UriComponents.Path, UriFormat.SafeUnescaped);
currentTab = tabControl.FindTabByValue(dir);
if (currentTab != null)
//Trying to findByUrl isn't possible here because the parent tab doesn't have that method.
}
Is there a good alternative to finding by URL, or a faster method overall of reaching the parent and sub-tabs?
EDIT: Adding a picture to clarify what I'm trying to achieve after page navigation

The FindTabBy* methods are available at either RadTabStrip or RadTabCollection level.
That's why, once you find the parent tab you were not able to invoke the FindTabBy* method on it, because you need to invoke the method on its .Tabs property instead.
See an example below:
var parent = radTabMenu.FindTabByText("Top Level Nav");
parent.Selected = true;
var child = parent.Tabs.FindTabByText("Lower Menu Item 1");
child.Selected = true;

Revisiting this, well after having my team decide to remove nested tab menus, I found that the tabs would be selected by URL.
My issue was that the parent tab wouldn't open and be selected, but digging through documentation led me to use tab.Select Parents() which goes up the hierarchy selecting all parents that lead to the current selected tab.
It seems super obvious now that I've found it.

Related

In Bootstrap how do I redirect to a section using a modal (without getting redirected to where the modal was opened)

I am building a simple front end site and I'm using Bootstrap for styling.
I have built a section using modals. The user clicks on a button to open the modal and then sees a centred modal.
What I would Like
I want to be able to allow the user to click a button at the bottom of the modal and be redirected to another part of the page and the modal close.
I have successfully been able to move the user to the new part of the page by using <a> tags, href and id's and also by using onclick="window.location.href='#middle'", and have also been able to dismiss the modal.
THE PROBLEM is when the user clicks the button on the modal, they are redirected to where I want them to go to and the modal closes BUT then instantaneously the window moves back to the original place where the modal button was pressed.
I want to stop the moving back to the place where the original modal was clicked and leave the user at the place they got to when they clicked the button.
I have tried using <a> tags instead of <button> and it has the same effect.
Here is a working example jsfiddle showing the problem.
https://jsfiddle.net/peamanschesthair/kdu5gno1/42/
Any ideas are greatly appreciated.
Use setTimeout to delay the location change, after the modal hide event. To determine the element that triggered the dismiss, check the document.activeElement...
$('#exampleModalCenter').on('hide.bs.modal', function (e) {
var closeTrigger = document.activeElement.id
if (closeTrigger === 'btnMove') {
setTimeout(()=>{
window.location.hash = '#middle'
},400)
}
})
Demo: https://codeply.com/p/WW9aB8OeNx
Alternate option: Set a data flag in the modal hide event if the btnMove has been clicked, then chain the hidden event and check the data flag...
$('#exampleModalCenter').on('hide.bs.modal', function (e) {
var closeTrigger = document.activeElement.id
if (closeTrigger === 'btnMove') {
this.data = 'move'
}
}).on('hidden.bs.modal', function (e) {
if (this.data === 'move') {
setTimeout(()=>{
window.location.hash = '#middle'
},400)
}
})

How can I tell which HubSection is selected

I need to change the contents of an AppBar when a user changes the view in a Hub control.
The way I did it while using a Pivot control is listening to the SelectionChanged event and responding to the SelectIndex value.
The hub, however, only has a SectionsInViewChanged event, which returns a collection of multiple sections. Usually the one user is interacting with and then the adjacent, barely-visible section.
So my question is, how can I tell which Section is the one that is currently being prominently displayed to the user (so I can change the AppBar icons accordingly)?
In Hub control, We can listen to the SectionsInViewChanged event. We can get the HubSection which is displayed in screen by this:
var section = hubDemo.SectionsInView[0];
hubDemo is the name of my Hub control. And we can set Tag property for each HubSection. For example:
<Hub x:Name="hubDemo" SectionsInViewChanged="demoHub_SectionsInViewChanged">
<HubSection Tag="0" Header="Section1" Width="800"/>
<HubSection Tag="1" Header="Section2" Width="400"/>
<HubSection Tag="2" Header="Section3" Width="400"/>
<HubSection Tag="3" Header="Section4" Width="400"/>
<HubSection Tag="4" Header="Section5" Width="600"/>
</Hub>
So we can change AppBar content by tag:
private void demoHub_SectionsInViewChanged(object sender, SectionsInViewChangedEventArgs e)
{
var section = hubDemo.SectionsInView[0];
var tag = section.Tag.ToString();
switch (tag)
{
// Change your AppBar by tag
}
}

How to highlight active page in a masterpage menu?

I have a menu inside a masterpage (in a ASP.NET Web site), and i want to highlight active page in masterpage menu and submenus.
HTML:
<ul id="nav" class="sf-menu">
<li class="current-menu-item">Home</li>
<li>menu-2
<ul>
<li>full</li>
<li>featurs</li>
<li>typography</li>
</ul>
</li>
</ul>
CSS:
#nav>li.current-menu-item>a,
#nav>li.current_page_item>a{
color: #fe8300;
}
thanks in advance.
finally i solved my problem with using jQuery:
var str=location.href.toLowerCase();
$("#nav li a").each(function() {
if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
$("li.current-menu-item").removeClass("current-menu-item");
$(this).parent().addClass("current-menu-item");
}
});
$("li.current-menu-item").parents().each(function(){
if ($(this).is("li")){
$(this).addClass("current-menu-item");
}
});
There are many ways to do this. There are some easy and some ugly hacky ones:
Solution 1:
Use a Menu Control. The standard .NET Menu Control has an easy solution to do this. This is the cleanest and fastest solution in my opinion. Have a look at this post. Maby it'll help you if you choose this solution.
Solution 2:
You coud use some sort of javascript to highlight the current item. jQuery would make that easier if you dont want to write everything by yourself. For this solution have a look at this page. It's outdated but still effective.
Solution 3:
This is kinda ugly solution and you can do that in many different ways: You could change the <a> elements to HyperLink controls and set some sort of session or cookie when you click on them. When set you could change the style based on the value the cookie has.
There are even more ways you could solve this but I think the first two solutions will help you.
check your url and get the html file name then compare it and set your css class in master page or make a menu UserControl seperate and then put it on master page.
You have to change your anchor tag to Hyperlinks
asp.net markup :
<li><asp:HyperLink runat="server" ID="lnk_full" NavigateUrl="page-full.html" Text="full" /></li>
<li><asp:HyperLink runat="server" ID="lnk_features" NavigateUrl="page-features.html" Text="features" /></li>
<li><asp:HyperLink runat="server" ID="lnk_typography" NavigateUrl="page-typography.html" Text="typography" /></li>
Codebehind :
protected void SelectMenu()
{
try
{
string page = Path.GetFileNameWithoutExtension(Request.AppRelativeCurrentExecutionFilePath);
string pageDirectory = Path.GetDirectoryName(Request.AppRelativeCurrentExecutionFilePath);
string category = Request.QueryString.Count>0 ? Request.QueryString[0] : string.Empty;
if (pageDirectory.Length > 3)
{
pageDirectory = pageDirectory.Substring(2, pageDirectory.Length - 2);
}
if (pageDirectory != null && pageDirectory.Length > 0 && page != null && page.Length > 0)
{
switch (pageDirectory)
{
case "Secure\\Clients":
switch (page)
{
case "page-full":
lnk_full.CssClass = "current-menu-item";
break;
case "page-features":
lnk_features.CssClass = "current-menu-item";
break;
case "page-typography":
lnk_typography.CssClass = "current-menu-item";
break;
}
break;
}
}
}
catch (Exception ex)
{
throw ex;
}
}
If your webpages are in root directory then don't switch for pageDirectory. and if you are using querystrings then you can switch for category. Hope this is helps you.
$(function () {
$(".navbar‐btn a").each(function () {
var hreff = this.href.trim().split("/").splice(3, 4);
if (hreff.length > 1)
hreff.splice(0, 1);
if (hreff[0] == window.location.pathname.split("/").splice(1, 1)[0])
$(this).parent().addClass("active");
});
})
This works fine for me during development and in local, but when I host it on IIS the active highlighting on the menu does not work. What am I missing here?
Masterpage code below
$(document).ready(function () {
//You can name this function anything you like
function activePage() {
//When user lands on your website location.pathname is equal to "/" and in
//that case it will add "active" class to all links
//Therefore we are going to remove first character "/" from the pathname
var currentPage = location.pathname;
var slicedCurrentPage = currentPage.slice(1);
//This will add active class to link for current page
$('.nav-link').removeClass('active');
$('a[href*="' + location.pathname + '"]').closest('li').addClass('active');
//This will add active class to link for index page when user lands on your website
if (location.pathname == "/") {
$('a[href*="index"]').closest('li').addClass('active');
}
}
//Invoke function
activePage();
});
jQuery(document).ready(function() {
var str = location.href.toLowerCase();
jQuery('#topnav li a[href=\'' + str + '\']').addClass('active');
});

Flex ItemRenderer: rendering the source item of a drag

When an item is being dragged from/within a list in the default implementation, it is shown as selected during the drag (and a separate item renderer, in dragging state, is shown as the drag image), so:
<s:ItemRenderer>
<s:Label text="{data}" color.selected="0xFF0000" color.dragging="0x00FF00" />
</s:ItemRenderer>
renders as:
Is there a straightforward way to change the state of the source of the drag (the red, selected, "Bar") to something other than "selected" for the duration of the drag?
In the ideal, I would add color.dragSource="0x0000FF" to the item renderer code above, and "Bar" would be red while selected, but blue once the dragging had begun. When the drag was complete, it would revert to red (or, if no longer selected, black).
What if you did an eventListener on drag start that set the selected item in the list to -1? -1 says that nothing should be selected.
Edit: added below code to support:
<s:List id="myList" dragStart="startDrag(event)"/>
private var dragIndex:int;
private function startDrag(e:Event):void
{
dragIndex = myList.selectedIndex;
myList.selectedIndex = -1;
}
private function stopDrag(e:Event):void
{
myList.selectedIndex = dragIndex;
}

Scroller not shown Flex 4 with VGroup

I am creating one application. In that There is one popup, in that I had used one VGroup in one Scroller.
I am dynamically adding my custom components in VGroup and removing all components at the closing of the popup and saves those components in Memory Pool.
In First step, I open a popup with numbers of components by that scroll bar appears.
Then I close the popup.
In second step, I opens a same popup instance with some less components so scroll bar does not appears and close the popup.
And now when I open popup with more components again scrollbar not appears.
So whenever popup is once opend with less components, scrollbar disappears.
Pls help me...
Here is the full code :
<s:Scroller id="myScroller"
width="100%"
height="210"
horizontalScrollPolicy="off">
<s:VGroup id="myContainer"
width="100%"
height="210" />
</s:Scroller>
Code for Adding Components :
for each(var object:MyObject in _arr)
{
var newView:MyCustomView = MyCustomViewPool.acquire();
myContainer.addElementAt(newView, 0);
newView.myData = object;
}
Here is the code for removing components :
for(var i:int = 0; i < myContainer.numElements; i++)
{
var newViewElement:IVisualElement = myContainer.getElementAt(i);
var myViewComponent:MyCustomView = newViewElement as MyCustomView;
MyCustomViewPool.release(myViewComponent);
}
myContainer.removeAllElements();
I think you don't have to set the hight on the VGroup. Just remove the assignment.