Kendo Grid - Lazy Load On Popup Edit

[Omar]

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!

[Petur Subev]

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

[Philip]

Is there a way to do this with the standard Kendo MVC framework or do I need to utilize the JQuery tools?

[Eyup]

Yes, you can achieve this requirement by using a Custom popup form:
https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/how-to/editing/custom-popup-editor

And then set the .AutoBind() property of the inner Grid to false.

For any technical details, feel free to open a formal Support Ticket and our team will assist you.

[Omar]

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

[Petur Subev]

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

[Omar]

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

[Sebastian]

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

[Omar]

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

[Omar]

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

[Omar]

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

[Petur Subev]

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

[Omar]

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

[Petur Subev]

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

[Stacey]

Hello Omar, 

 Hope you are doing well!

The technical team has informed us that you don't have active support, so we've reached out to the proper product specialist if you wish to purchase a license so we can serve you properly. This way, you can submit your tickets to the proper team and the developers directly.

Have a good day!

Regards, Stacey Progress Telerik