I am currently working with an ASPxNavbar and I am trying to achieve a functionality where the name of the NavBar item is displayed on a label every time the user clicks on it. I attempted to implement this feature using JavaScript, but unfortunately, my code does not seem to be working as expected.
Below is what I have tried so far:
<dx:ASPxLabel ID="ASPxLabel1" runat="server" Text="ASPxLabel">
</dx:ASPxLabel>
<dx:ASPxNavBar ID="ASPxNavBar1" runat="server" EnableAnimation="True" Width="100%"
Theme="Material" AllowSelectItem="true" Target="contentUrlPane" ClientInstanceName="NavbarClick">
<LinkStyle>
<HoverFont Underline="False" />
</LinkStyle>
<Border BorderWidth="0px" />
<Paddings Padding="0px" />
<GroupHeaderStyle HorizontalAlign="left" />
<ItemStyle HorizontalAlign="left">
<SelectedStyle BackColor="#404652 " ForeColor="#a2a2a2" />
</ItemStyle>
<ClientSideEvents ItemClick="function NavbarClick(s, e) {
ave = e.item.name;
alert(ave)
document.getElementById('ASPxLabel1').innerHTML = ave;
}"/>
<Groups>
<dx:NavBarGroup Text="DASHBOARD" ></dx:NavBarGroup>
<dx:NavBarGroup Text="Forms">
<Items>
<dx:NavBarItem Text="Cancel Memo" NavigateUrl="sample.aspx" Selected="True" Name = "Sample Title Here">
<Image Height="18px" Url="Content/Images/1.png" Width="18px" />
</dx:NavBarItem>
<dx:NavBarItem Text="Change Memo" NavigateUrl="Sample2.aspx" Name = "Another sample title here">
<Image Height="18px" Url="Content/Images/2.png" Width="18px" />
</dx:NavBarItem>
</Items>
</dx:NavBarGroup>
</Groups>
</dx:ASPxNavBar>
If anyone has any suggestions or solutions, I would greatly appreciate your help. Thank you!