Paging in MVC Telerik Grid not Working - asp.net-mvc-3

I am working on a project that would display Graduated and current student on a page. I rendered that information on the client side using a telerik grid. The page has two radio button - one radio button for displaying graduated students and the other for displaying current students. Every time a user click on one of the radio button, it does not post. There are more current than graduate students. When the user access the last page for current student and then click on the graduate radio button, it does not show any graduate students. The telerik page did not update as expected. The undergrad page has 23 pages while the graduate one has 18. Accessing the graduate page is still on page 23 even though we have 18 pages.
I follow this example and added a
.Pageable(paging => paging.Enabled((bool)ViewData["paging"]).PageTo(1))
It does not go back to page one.

I could not figure out how to make this paging work properly. As a result, I created two session variables, that have values true or false, and I redirected the user to the same page setting the grad and undergrad students flag to false or true. If the user came in for the first time, the grad students flag was set to false, and the page would not redirect. The same logic was created for the undergrad student.

Related

UX for Model with Children in Admin Panel

I would like everyones input on how to layout a CRUD for an admin panel. First, the 'basic' data layout:
- tblSchool (parent)
- tblCars
- tblContacts (eg: John/Mary/Joe)
- tblContactType (eg: Admin/Manager/Accounts)
- tblContactDetails (eg: 012-345-6789/john#place.com)
- tblContactDetailTypes (eg: Telephone/Facsimilie/Mobile/Email)
- pivotTblCars (connect tblSchool with tblCars)
- pivotTblContacts (connect tblSchool with tblContacts)
Firstly, pivot tables are there for referrential integrity and there are other (parents) which share the same details and hence the need for the pivot tables.
So standard CRUD would just be a separate page for each element type, each having its own index, create, edit, and possibly show page.
1) So one approach for example could be: 'School' index would have a grid of all the schools - then you would select a school and click a 'manage contacts' button to get taken to the 'Contacts' index page where you would manage all the contacts of the selected School. Then you would have to go 'back' to then either manage another schools contacts and/or its 'Cars'.
2) Another approach could be that when a School is selected, sub grids below the school grid could load the children (car/contacts) data. This seems disconnected and unintuitive though.
3) Another approach could be that you would 'view' a school to see its data and at the same time it would be the index/grids for the 'Cars' and 'Contacts' below its data?
How would you handle a more inclusive approach with less steps/better flow?
4) why not use a modal, on which the main page would have the grid of all school with its details, except that cars details and contacts details are just link in which upon clicking will pop a modal instead of redirecting to a new page.
main reason for this,
this will improve the request speed as you would just request for a data.
this is more user-friendly approach, and a better-experience for the end-user, as the page will not reload/redirect to another page.

Create an Apex form with multiple pages

I'm trying to make an apex form that has multiple 'pages' within it, so that I can achieve a nice layout.
For example:
Page 1 - Personal Details >> Page 2 - Occupation >> Page 3 - Career History >> Submit
Is there a way to do this without submitting one page at a time as this would mess up my validation for the table entry.
It's kind of a broad question - lots of possible solutions. You will need to create several regions on the page, so that you can easily show or hide different sets of page items without submitting the page.
If you simply want to keep the page tidy, you could make use of the Hide and Show Region template, or you could create a Region Display Selector region.
To help the user experience flow a bit better, I would probably do something like this:
Set up the page items using the Form wizard.
Create three HTML regions - Personal Details, Occupation, and Career History.
Move the page items into the appropriate regions.
Delete the original region created by the wizard, together with the default buttons.
Create navigation buttons in each region - probably a Next button in Personal Details, Next and Previous buttons in Occupation, and Previous and Submit in Career History.
Create dynamic actions for each of the buttons. The Submit button submits the page of course. The Next and Previous buttons show and hide the regions as appropriate.

Partial refresh of JSF page using ui:repeat and AJAX

I have a page say "Main Page" (Page 1) which looks like a Outlook calendar page having a large number of rows displayed using . Actually, the columns represent "Weeks" and the rows represent "Products". The functionality is that the user can choose a product week combination and create offers for the chosen week.Ideally, as we have a lot of rows (products), we should have ideally implemented pagination but we have not.
We use JSF2 (Mojarra faces that comes with JBoss EAP 6.0). Main Page uses a different bean and Details page uses a different bean and both are in session scope.
When the user creates an offer, instead of refreshing the entire page (i.e. Page1), we just refresh the impacted cells using AJAX. However, the On double clicking the slot(offer), we redirect to a different page (Page2) that displays offer details.
Page 1 - Main Page and Page 2 - Details page.
There are 2 cases from here :
Case 1: User goes from Main page to the details page, just views information on the details page and clicks the close button. In this case, it is enough for me to display Main Page as it was before I opened the details page. To achieve this, we used browser history.back(). However, we faced the below issues :
(a) history.back() works only in Firefox and does not work in Chrome/IE.
(b) Even if we do history.back(), the page loading is cleary visible and as our page is heavy, it takes a few seconds. I would like to avoid re-rendering of main page again (i.e. make it look like opening a popup from the main page and closing it)
Case 2: User goes from Main Page to Details page and makes certain updates which require us to reflect those updates in the main page.(For example: change color of the slot from red to green on the main page).
Currently, when Details page is closed, we call an API that provides us with refreshed data (so that we do not need to maintain the list of actions that the user had performed) and we reload the entire Main page (Page1). However, as the page takes a long time to load, we are asked to refresh only the affected slots/rows.
So, the problem here is that if we have to achieve the refresh of Main Page through AJAX, we need to maintain a list of activities that has been done on the details page and feed it through AJAX which appears to be a complicated activity. (We also want to avoid calling the API.)
Is there any workaround which helps us to refresh only the selected rows on the Main Page to minimise the page load time. Can ui:repeat be partially re-rendered ?
PLease advise.

Drawing a part of a page only after another part was "submitted"

ASP.NET MVC noob here
I was writing a quiz application where a user can select her preferences (e.g. difficulty, number of question etc.), and once she hit a submit button - she got a new page with questions.
The preferences are represented as a "Preferences" object, and the questions are IEnumerable of Question.
This all worked well.
Now I decide both parts should be in the same page - and I don't know how to accomplish that:
Should I have a new model class that is a composition of these two parts?
And also - How will I make the "questions" part appear only after the user completed filling up her preferences and clicked a button?
Should I use AJAX?
I also read a little about partial views and RenderSection.. But I really couldn't understand which approach is the most appropriate for my scenario.
So how should I draw two parts of a page, where the second is only displayed after the first is submitted?
Thanks.
How familiar are you with AJAX? If I had to guess I would think a good way to do what you want to do is to have an AJAX call which is linked to an action when the user submits their preferences. The action can then return a partial view which you can have appear on the page without a reload via AJAX.

What strategy should I use for multiple room booking selection without JS?

The user requests 2 rooms on the initial page and is then presented with room types to select from on step 2. The arriving and starting dates will always be the same, but the number of adults and children may differ, causing the price to fluctuate.
Now, if JS is enabled I think I'll just program it such that it's tab-powered and when you hit 'Select' which is an input submit, it'll cancel the form submit and mimic a "add to cart" functionality, so the user must select at least one room for each specified.
I'm confused on how I should treat this with JS off - should I just enable radio buttons or checkboxes and have the user select with radio buttons per room? So instead of "Select" button image it would be just a label "Select this" text and a radio button nearby, and at the far bottom of my form there will be one primary submit button.
Ended up just not providing a non-JS alternative.

Resources