I am using asp.net MVC with razor.
In my application,I have a main menu in the layout page.
In each Page,i have given this layout page to display menu in each page like,
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
With this,When I select an item in the menu the total page is reloading,
what i want is when I select item in the menu,the content will only change with out disturbing the menu.can u tell me how to do this?
I have defined menu like
<div id="menu" style="width:80%;"></div>
<script type='text/javascript'>
$("#menu").kendoMenu({
dataSource: [
{
text: Home,
encoded: false,
url:'#Url.Action("Index","Home")'
},
{
text: "<a href='#Url.Action("About","Home")'>About</a>",
encoded: false,
}]
</script>
You have to create an Ajax UI to accomplish this. The menu you're showing is rendering anchor tags which will indeed cause full page loads.
One other option is to come up with a scheme to maintain the state of the menu across page loads (i.e. make the nav points be controlled by rendered pages)
Related
I'm very new to programming & working on creating a website for a work project.
In it, there will be a multi-level (w/sub-menus) vertical sidebar on each page.
The problem I'm facing is that every time a user clicks on one link, the sidebar resets to its original state & will have to redo the same thing & not very UX friendly.
I took the template of the accordian sidebar from here.
I've looked at various search results on both stack overflow & google, but can't seem to understand how to get it working to retain the state of the sidebar, regardless of how many levels are opened.
Can someone please help me with the JS code to get it working?
UPDATE:
Nathan, thanks for writing mate! I really appreciate the help.
So based on your suggestion, I've written the following (shoddy) code that injects the 'checked' attribute to the input element.
But it isn't transferring over to the new/redirected html page when a user clicks on one of the sub-menus. What am I missing here?
var menuIndex = -1;
//extract all the input elements
var inputs = document.querySelectorAll('.parent-menu');
//Find index of the element from the array that has "checked == true"
function indexFinder() {
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked == true) {
menuIndex = i;
console.log(menuIndex);
}
};
}
//Function to set/inject the attribute
function attributeSetter() {
inputs[menuIndex].setAttribute('checked', 'checked')
}
//When a user clicks literally anywhere, it'll run the indexFinder function
//to check if any of the input elements were expanded (i.e. checked == true)
window.addEventListener('click', () => {
indexFinder();
});
//Run the attributeSetter function when a page loads
window.addEventListener('DOMContentLoaded', () => {
attributeSetter();
});
Welcome to the world of programming! Hopefully I can help you out a little!
So what you're asking is something that can easily get a little complicated.
In order to achieve what you're trying to do you need to specify how you want your menu to look on each individual page!
Allow me to present a few menu options for an imaginary site:
Home
Contact
Email
Mail
About
The Company
Our Owner
I've indented the page names based on how we want them to show up in our menu.
So for example you may click on "Contact" and it drops down with the Email and Mail options.
Well, if you take your regular code from that webpage and copy and paste it everywhere. Any time you reload a page (or travel to another page with the same code) it's gonna reset the code! Thus "closing" the menu. Think of it as some sort of multi-dimentional sci-fi. When you load a webpage, you are accessing the main flow of time, any time you make an update to that page it takes you to an alternate reality with that change! but once you reload the webpage you jump back to the main timeline as if you never made that change (when you get into more advanced web dev, this analogy will break down but it should work to help your understanding for now.)
So let's say I click on the Contact > Email option and it takes me to the Email page. Well, in order to make it seem like my changes to the menu bar (clicking "Contact" to expand the dropdown) are still active. I need to hardcode the change into the Email page!
Here's some sample code:
<nav class="nav">
<a class="navOption">Home<a>
<a class="navOption">Contact<a>
<div class="navDropdown">
<a class="navOption">Email<a>
<a class="navOption">Mail<a>
</div>
<a class="navOption">About<a>
<div class="navDropdown">
<a class="navOption">The Company<a>
<a class="navOption">Our Owner<a>
</div>
<nav>
By default the .navDropdown will be closed. However when we add a class to them .active they will expand! If this is my base menu, then how should I make it so that the "About" dropdown is expanded when you are on one of the About pages?
Simply by adding .active to that dropdown!
<nav class="nav">
<a class="navOption">Home<a>
<a class="navOption">Contact<a>
<div class="navDropdown">
<a class="navOption">Email<a>
<a class="navOption">Mail<a>
</div>
<a class="navOption active">About<a>
<div class="navDropdown">
<a class="navOption">The Company<a>
<a class="navOption">Our Owner<a>
</div>
<nav>
Now, my example is different from yours because it's meant more for JavaScript. However, you can use the same concept in your code too.
For you, instead of having a .active class to expand a dropdown menu. You are using a checkbox element! In your codem you have CSS which is checking to see if the checkbox is checked and then it is opening the dropdown menu if it is:
<input class="cd-accordion__input" type="checkbox" name ="group-1" id="group-1">
So, if we use this method on our example webpage. We could set it to be open by setting the checkbox to start out being checked. Like so:
<input class="cd-accordion__input" type="checkbox" name ="group-1" id="group-1" checked>
It's important to note that as you get better and better at web development (eventually learning JavaScript and a server side language such as PHP). You will be able to piece together more advanced methods to doing what we're trying to accomplish! But for now, I hope I was able to break this down for you!
New react developer here, here i have antd table with filtering system.
My question is like this: if there is much data in the table so that there are for example page 1 page 2 page 3(with these i mean )
for example if you click page 3 (in table) and above are filtering buttons and you click one of those buttons and scroll down, you can see it is still at page 3, how to make it so when button is clicked it should always go automatically to page 1. my code:
https://codesandbox.io/s/dreamy-surf-t9eh3?file=/src/Test.js
english is not my mother language so there could be mistakes
From Table docs https://ant.design/components/table/ you can pass pagination props to your table. This means that you can pass on onChange and current to pagination element in order to reset pagination page when filtering.
Here is an example of how to manage pages using state:
const [paginationPage, setPaginationPage] = useState(1);
return (
<Table
pagination={{
current: paginationPage,
onChange: (pageNum) => setPaginationPage(pageNum)
}}
dataSource={filteredEventsData}
columns={tableColumns}
/>
)
You can now reset the current page anywhere with:
setPaginationPage(youPageNumber);
https://codesandbox.io/s/nervous-banach-d7ff2?file=/src/Test.js
I have web site with side menu and Content. Inside content i have Tabstrip and i have Default one Tab.
I just want to add dynamically tabs when i select one item instead of open new view i want to show new tab
inside content .
Is it possible?
Here is my Tabstrip inside Layout
#(Html.Kendo().TabStrip()
.Name("tabstrip-layout").SelectedIndex(0)
.Items(tabstrip =>
{ tabstrip.Add().Text("General").ImageUrl("~/assets/images/icons/general.svg")
.Content(#<text>
#RenderBody()
</text>);
}))
I found my question answer in kendo documents. If you want to add new tabs dynaically you can use append function
https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/methods/append
Here is the example
$("#tabstrip-layout").kendoTabStrip();
var tabstrip = $("#tabstrip-layout").data("kendoTabStrip");
tabstrip.append({
text: "New "tab,
encoded: false,
contentUrl: "../Home/Default",
imageUrl: 'assets/images/icons/general.svg',
});
Currently I am learning ext.js 6 and I have a quastion to ask.
I want to build a tree-like menu and from examples I know how to build all kinds of trees. But how can I change a view when user clicks on different leefs in a tree? I know I need controller(viewcontroller) and handlers to work with events (onClick and such) but how to render views from there?
Thank you.
You need to use add() function for that:
add( component ) : Ext.Component[]/Ext.Component
Adds Component(s) to its parent.
You need to pass the view to be rendered as parameter
Eg. Adding a formpanel & button directly to the view port:
Ext.Viewport.add([
{
xtype:'formpanel'
},
{
xtype:'button'
}
]);
Im my application (its use ExtJS 4 actually, but I guess idea is the same) I do something like this:
var viewport = Ext.create('Ext.container.Viewport', {
alias: 'widget.viewport',
layout: 'border',
items: [
// Its my main menu, displayed on all pages
portalToolbar,
{
xtype: 'panel',
itemId: 'mainPanel',
layout: 'fit',
region: 'center'
}
]
});
And on menu item click I remove any content from main panel and add new one, like this:
// remove previous page from main panel,
// think about `abort()`ing all ajax requests, clear intervals and so on along with this
mainPanel.removeAll();
// `currentInterface` is any component that is one of the pages of my application
mainPanel.add([currentInterface]);
Also you can take a look at Ext.util.History and on menu click add new token to history and on history change event open application page like described above.
I have a web application (using ember 2.0) with 2 parts. Left menu and right content, both independent from each other.
Navigating to route name "PageRoute", application load the configuration JSON from server, process it and the checks, where should be content rendered:
{
...
position: "left",
...
}
or
{
...
position: "right",
...
}
Then I use "this.transitionTo" and redirect it to RightRoute or LeftRoute.
RightRoute is ok, LeftRoute is the problem.
At the beginning - Left menu is empty. When LeftRoute is loaded, it should append (not replace) some menu (rendered template or component).
When the LeftRoute is loaded again, new menu should be rendered from model and append it to existing left menus so it would be possible to swap between rendered menus and the last menu will be visible.
At the same time, when the current menu is swapped, it should be removed from the "left menu list" and the previous menu will be visible.
I've found some some solutions appending View, but the view is deprecated in Ember 2.0, I've tried to do it like here http://emberjs.jsbin.com/defapo/3/edit?html,js,output but Router can't access actions in components (with pushObject) and I've tried countless other methods like using data stores or dynamically modifying the model etc.
I would make it this way:
/controllers/left.js
import Ember from 'ember';
export default Ember.Controller.extend({
menus: [],
addMenu (menuData) {
this.get('menus').addObject(menuData);
},
removeMenu () {
this.get('menus').popObject();
}
});
/routes/left.js
import Ember from 'ember';
export default Ember.Route.extend({
setupController (controller, model) {
controller.addMenu(model);
}
});
/templates/left.hbs
{{#each menus as |menu| }}
<!-- render menu -->
{{log menu}}
{{/each}}
In this case when you transitionTo('left', menuData) it will append the menu to the list. When you need to remove last menu, you can do this.controllerFor('left').removeMenu() in any other route (e.g. in your PageRoute).
Hope this helps.