Kendo Grid - Lazy Load On Popup Edit - kendo-ui

I am using Kendo UI ASP.NET MVC Grid (Razor) in Ajax mode with a popup editor.
As an example say: Customers have orders
User of the application go to a grid that displays all customers. User is allowed to add/edit/delete customers (and their orders). But when the user clicks on edit and the popup editor comes up that is when I want to load orders. I do not want to load orders eagerly since a customer may have many orders and the user may never edit any customer at all.
Seems like this should be a simple thing to do. I have looked through all forums/questions. I have not been able to find such an example. Can someone help me with this?
Thanks a bunch!
j

Are the orders already loaded when the initial grid is loaded (are they in the model)?
If not, one way to do this is define a grid in your popup editor and set .Autobind(false) and set its Read action to a Controller/action.
When editing a record, you can fire a .refresh() on the datasource of the Orders grid.
I would need some more info on the structure of the template and the grid.

Related

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.

Kendo UI grid - different templates for Edit and Create

We are using Kendo UI grid to display some records. The requirements need us to have a column (Say "File Name")shown as a text box when the user clicks on "Edit".
However, when user clicks on the "Create" button in the toolbar, the same column should be replaced with a File Select control which will allow the user to select a file from his machine. The other columns remain the same.
I have already tried searching through Stack Overflow as well as the Kendo UI Grid forums, but to no avail.
Is there any way to achieve this? Any pointers will be of great help.
Regards,
Nikhil
Using different editor templates for create/edit is not supported. You need to use the edit event of the Grid to change that text input to file input with JavaScript. To distinguish between edit and create you can use the isNew() method of the model.
i.e.
edit:function(e){
if(e.model.isNew()){
//replacement logic
}
}
Similar question is covered here.

How retain focus on the same field, where user was, after page refresh in MVC3

The question seems to be basic but I would ask.
Is there a standard way to retain focus on the same field (where user was, before refresh) after page refresh in MVC3.
for simplicity purpose, I will take a simple scenario. scenario is like
I have three controls on a page.
a textbox ---Name
a dropdown ---Country)
another dropdown---City (which loads cities from server based on the country selected in field 2 and this causes the page to refresh)
What I want,
the focus to be on Country field, after page refresh.
I hope, the question makes sense.
To achieve what you want, just use jQuery's .focus function (http://api.jquery.com/focus/).
You may want to consider loading your dropdown dynamically through jQuery or jQuery UI so that you don't get the page refresh.

How to add a new item to a dropdownlist in a create form in MVC 3?

I have a Form to create a new model object and persist it. That form is displayed in a lightbox or popup.
Some fields are dropdownlist showing related info that lives in another table (other model object related to the main model).
What I need to achieve is without leaving the creation form, create a new item of the related type and update the DropDownList in order to continue filling fields and finaly submit the form.
I have done this in winforms but not really sure which is the best approach in MVC 3:
Trigger another popup with a small form?
Use some kind of editable dropdownlist?
Place a small hidden form right next/after the DDL to allow entering the info to create an item in DDL (and to DB also)?
What do you thing is the best option?
Thanks!
There is no editable dropdown list in HTML. There are some toolkits that simulate it, but in general these are clumbsy and really complex. It's a lot easier to stick with basic controls.
You would proably do best to have a small + sign next to the field, and then popup an editing field that inserts the element into the combobox and sends it to the controller via ajax to add to the database.
An alternative to a second pop up is having a toggle add button. When toggled, then show a small area where you can enter the name. Using ajax, save the name, and then refresh your dropdown. This works well if you only have a few attributes to fill in.

MVC3: Showing entity relationships in a view

I am new to ASP.NET MVC and I have a question regarding viewing entity relationships.
Say I have an entity called 'Person'. This holds the usual data relating to a person (Name, Email, etc). I also have a 'Notes' entity. Under EF, a 'Person' can have many 'Notes'.
I have a Person controller where I can view and preform CRUD operations on a Person object.
I can show the notes in the view easily but what is the best way to allow a user to add/edit/delete these notes from the Person view? I am hoping to do this using AJAX and not have the user move to a completely different page to add/edit/delete a note.
Thanks in advance,
ViperMAN.
When they edit a note, popup a jQuery dialog pointing to your URL to edit or have a separate Ajax.BeginForm() on the page that the details go into. When they finish the edit call a method to refresh the notes.
So:
1. In your Notes grid (or whatever)
you have an edit link for each note called "edit"
this link looks something like the following:
This one actually uses 'notes' : )
http://www.iwantmymvc.com/dialog-form-with-jqueryui-and-mvc-3
ASP.NET MVC | Problem about showing modal dialog using jQuery dialog widget
ASP.NET MVC modal dialog/popup best practice
Also beware of this scenario for multiple links:
MVC3 - Only first row link works well with Jquery Modal Dialog
Now the urls you use to populate the dialogs would be for example
/Note/Edit/10
One thing to note - jQuery validation needs to know about these new items that are being loaded via ajax into the DOM , so in your partial view you need to tell jQuery validation to include the new items - I'll edit in a bit to add this, have to grab it from another machine.

Resources