This is a migrated thread and some comments may be shown as answers.

Kendo Grid - Lazy Load On Popup Edit

11 Answers 201 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Omar
Top achievements
Rank 1
Omar asked on 21 Aug 2013, 09:42 PM
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!

11 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 23 Aug 2013, 03:58 PM
Hello Omar,

How to customize the popup editor is covered in this code library article:

http://www.kendoui.com/code-library/mvc/grid/custom-popup-editor.aspx

Once you put a Grid inside the custom editor template you can configure it for ajax binding. 

I assume that you will also need to set the AutoBind option of the master Grid to false and use the edit event to perform read by sending the master ID that is currently being edited so you can return the appropriate records.

To get the master ID that you will need to pass to the read method of the dataSource you can go like this:
var masterId = $('#masterGridName').data().kendoGrid.editable.options.model.CustomerID


Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Omar
Top achievements
Rank 1
answered on 23 Aug 2013, 06:51 PM
Hello Petur

I have to also place a multi-select, a checkbox-list and a drop-down list in the popup edit. Are those also configurable so that they can load the data when the popup edit is displayed?

I want to load the selectedvalues and the full list of values when the popup edit is show.

Thanks

0
Petur Subev
Telerik team
answered on 27 Aug 2013, 12:42 PM
Hello again Omar,

You are should be able to put whatever you need inside of the Popup editor. However some fine tuning might be required to make it function properly. 

Also regarding MultiSelect you can check the following code library:

http://www.kendoui.com/code-library/mvc/grid/using-multiselect-in-grid.aspx


Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Omar
Top achievements
Rank 1
answered on 28 Aug 2013, 12:18 PM
Hello

I do not see a checkboxlist control in the asp.net mvc tools suite? Can you please point me in the right direction?

Thanks
0
Sebastian
Telerik team
answered on 28 Aug 2013, 01:35 PM
We don't offer such type of widget, Omar. However, you can consider one of the options listed below:

http://mvccontrolstoolkit.codeplex.com/wikipage?title=CheckBox%20list%20for%20selecting%20elements

http://stackoverflow.com/questions/5285088/checkboxlist-in-mvc3

Regards,
Sebastian
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Omar
Top achievements
Rank 1
answered on 28 Aug 2013, 06:46 PM
I am trying the second link: http://stackoverflow.com/questions/5285088/checkboxlist-in-mvc3

When I check one box in the checkboxlist all of them get checked. I have looked at the source and found out that:
All the check-boxes in the checkboxlist are getting rendered with the following
data-bind="checked: ModelArrayName">

I 'think' that it may be because of grid popup edit. 

Any ideas how I can remove the data-bind?

Thanks
0
Omar
Top achievements
Rank 1
answered on 28 Aug 2013, 08:25 PM
In addition, the following data annotations are not working as expected:

        [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; }

        [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [StringLength(500, ErrorMessage = "Image path cannot be more than 500 characters.")]
        [Display(Name = "Image path")]
        [DataType(DataType.ImageUrl)]
        [RegularExpression(@"^http(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$", ErrorMessage = "Image path format is incorrect.")]
        public string ImagePath { get; set; }

Currently for Add/Edit both, I am getting a minimum password length should be 6. Also both for Add and Edit I get "Image path format is incorrect" even when there is nothing typed in that field

In addition to the above
On Edit - I do not want the password to be required. On New I want password to be required.

Thanks
0
Omar
Top achievements
Rank 1
answered on 29 Aug 2013, 02:41 AM
Attached is a sample project that shows that 
http://stackoverflow.com/questions/5285088/checkboxlist-in-mvc3
works when the grid edit is not used. But when grid popup edit is used it does not work.

(Note due to file size restriction, I am attaching just the web project)

What do I have to change to allow for this to work in the popup edit?

Thanks
0
Petur Subev
Telerik team
answered on 30 Aug 2013, 12:30 PM
Hello Omar,

The Grid depends on the MVVM bindings to update the model. And the checkbox binding requires a little bit more special formatting.

Here is an example:

http://demos.kendoui.com/web/mvvm/elements.html


To demonstrate how to apply this approach with the MVC wrappers I attached a sample project.

I hope this helps.

Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Omar
Top achievements
Rank 1
answered on 30 Aug 2013, 01:24 PM
Thank you Petur. How do I get the data annotations to work as expected in the Ajax popup edit?:

        [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; }

        [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [StringLength(500, ErrorMessage = "Image path cannot be more than 500 characters.")]
        [Display(Name = "Image path")]
        [DataType(DataType.ImageUrl)]
        [RegularExpression(@"^http(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$", ErrorMessage = "Image path format is incorrect.")]
        public string ImagePath { get; set; }

Currently for Add/Edit both, I am getting a minimum password length should be 6. Also both for Add and Edit I get "Image path format is incorrect" even when there is nothing typed in that field

In addition to the above
On Edit - I do not want the password to be required. On New I want password to be required.

Thanks
0
Petur Subev
Telerik team
answered on 03 Sep 2013, 12:22 PM
Hello again,

Please open separate tickets for the distinct question not related to the initial one related to that thread.

Thank you for the understanding.

Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Omar
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Omar
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or